Androidガイドページスライドグラデーションによる背景色(一)
12370 ワード
次の知識点は、自分が初めてこの効果を作って、知識を記録して、もっと良い実現方法があるかどうか分かりません.記事2------改良版Androidプロジェクトでは、ガイドページの上に小さな図を組み合わせたものがありますが、背景の色は純色で、1枚1色違います.この場合、展示案内ページをスライドさせると、切り替え効果の色の変化が硬く感じられます.スライドによって背景色を徐々に変化させる効果について説明します.まず効果図を見てみましょう.以下のようにします.
効果表示図
1、主な依存:
compile'com.android.support:support-v4:23.4.0'
compile'com.readystatesoftware.systembartint:systembartint:1.0.4'
1つ目は皆さんがよく知っているので、あまり言わないでください(确かに知らないので、私も仕方がありません.2つ目は、主に浸透式ステータスバーの1つの運用依存で、ステータスバーの色も変化して、見ているともっと気持ちがいいのではないでしょうか.バージョン番号は公式の自分で更新するしかありません.このステータスバー依存の公式アドレスと紹介を以下に貼ります.
Mavenセントラルウェアハウス
githubコードアドレス
2、コード部分はコード実装ですね.使うものは簡単です.
1、レイアウトファイル、つまりViewPagerの使用.xmlコードは次のとおりです.
2、リソースファイルコード、私は配列ファイルarraysに書いています.xml:
3、ViewPagerのレイアウト、xmlは以下の通りです.
mRootLayout.setBackgroundColor(shades.generate());
これで基本的に背景色をスライドさせる機能が完成しましたが、これは不快で、ステータスバーの色も変化すれば、画面全体が1色で、もっときれいになります.次に,前述した2番目の依存パケットを用いて状態欄の色を設定した.どのように使うかは、前に示した作者のコードアドレスを参考にして、私も実装したコードを貼ることができます.主にonCreateメソッドの中にあります.
効果表示図
1、主な依存:
compile'com.android.support:support-v4:23.4.0'
compile'com.readystatesoftware.systembartint:systembartint:1.0.4'
1つ目は皆さんがよく知っているので、あまり言わないでください(确かに知らないので、私も仕方がありません.2つ目は、主に浸透式ステータスバーの1つの運用依存で、ステータスバーの色も変化して、見ているともっと気持ちがいいのではないでしょうか.バージョン番号は公式の自分で更新するしかありません.このステータスバー依存の公式アドレスと紹介を以下に貼ります.
Mavenセントラルウェアハウス
githubコードアドレス
2、コード部分はコード実装ですね.使うものは簡単です.
1、レイアウトファイル、つまりViewPagerの使用.xmlコードは次のとおりです.
2、リソースファイルコード、私は配列ファイルarraysに書いています.xml:
-
- ，
-
-
- @mipmap/splash_iv_first
- @mipmap/splash_iv_second
- @mipmap/splash_iv_third
- @mipmap/splash_iv_forth
- @color/light_green_500
- @color/amber_500
- @color/red_400
- @color/blue_500
3、ViewPagerのレイアウト、xmlは以下の通りです.
立即开启按钮可以先进行隐藏，最后一页的时候在显示。
4、主要实现代码：
怎么创建页面、mainfest怎么引用activity、怎么引用控件等基础操作在这就不说了。（后贴出全部代码）
1、首先得到要设置背景颜色的根布局控件：
mRootLayout = (RelativeLayout)findViewById(R.id.rl_root);
private class IntroPager extends PagerAdapter
{
private String[] mDescs;
private TypedArray mIcons;
public IntroPager(int icoImage, int des)
{
mDescs = getResources().getStringArray(des);
mIcons = getResources().obtainTypedArray(icoImage);
}
@Override
public int getCount()
{
return mIcons.length();
}
@Override
public boolean isViewFromObject(View view, Object object)
{
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position)
{
View itemLayout = getLayoutInflater().inflate(R.layout.layout_app_intro, container, false);
ImageView mImage = (ImageView)itemLayout.findViewById(R.id.iv_img);
TextView mTextView = (TextView)itemLayout.findViewById(R.id.tv_desc);
Button mButton = (Button)itemLayout.findViewById(R.id.btn_launch);
mImage.setImageResource(mIcons.getResourceId(position, 0));
mTextView.setText(mDescs[position]);
if (position == getCount() - 1)
{
mButton.setVisibility(View.VISIBLE);
}
else
{
mButton.setVisibility(View.GONE);
}
container.addView(itemLayout);
return itemLayout;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object)
{
container.removeView((View)object);
}
}
shades = new ColorShades();
colorBg = getResources().getIntArray(R.array.splash_bg);
mRootLayout = (RelativeLayout)findViewById(R.id.rl_root);
mViewPager = (ViewPager)findViewById(R.id.viewpager);
IntroPager introPager = new IntroPager(R.array.splash_icon, R.array.splash_desc);
mViewPager.setAdapter(introPager);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener()
{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{
shades.setFromColor(colorBg[position % colorBg.length])
.setToColor(colorBg[(position + 1) % colorBg.length])
.setShade(positionOffset);
mRootLayout.setBackgroundColor(shades.generate());
applySelectedColor(shades.generate());
}
@Override
public void onPageSelected(int position)
{
}
@Override
public void onPageScrollStateChanged(int state)
{
}
});
/**
* Source from :
https://gist.github.com/cooltechworks/4f37021b1216f773daf8
* Color shades will provide all the intermediate colors between two colors. It just requires a decimal value between
* 0.0 to 1.0
* and it provides the exact shade combination of the two color with this shade value.
* Textual explanation :
*
* White LtGray Gray DkGray Black
* 0 0.25 0.5 0.75 1
* Given two colors as White and Black,and shade
* as 0 gives White
* as 0.25 gives Light gray
* as 0.5 gives Gray
* as 0.75 gives Dark gray
* as 1 gives Black.
*/
public class ColorShades
{
private int mFromColor;
private int mToColor;
private float mShade;
public ColorShades setFromColor(int fromColor)
{
this.mFromColor = fromColor;
return this;
}
public ColorShades setToColor(int toColor)
{
this.mToColor = toColor;
return this;
}
public ColorShades setFromColor(String fromColor)
{
this.mFromColor = Color.parseColor(fromColor);
return this;
}
public ColorShades setToColor(String toColor)
{
this.mToColor = Color.parseColor(toColor);
return this;
}
public ColorShades forLightShade(int color)
{
setFromColor(Color.WHITE);
setToColor(color);
return this;
}
public ColorShades forDarkShare(int color)
{
setFromColor(color);
setToColor(Color.BLACK);
return this;
}
public ColorShades setShade(float shade)
{
this.mShade = shade;
return this;
}
/**
* Generates the shade for the given color.
*
* @return the int value of the shade.
*/
public int generate()
{
int fromR = Color.red(mFromColor);
int fromG = Color.green(mFromColor);
int fromB = Color.blue(mFromColor);
int toR = Color.red(mToColor);
int toG = Color.green(mToColor);
int toB = Color.blue(mToColor);
int diffR = toR - fromR;
int diffG = toG - fromG;
int diffB = toB - fromB;
int red = fromR + (int)((diffR * mShade));
int green = fromG + (int)((diffG * mShade));
int blue = fromB + (int)((diffB * mShade));
return Color.rgb(red, green, blue);
}
/**
* Assumes the from and to color are inverted before generating the shade.
* @return the int value of the inverted shade.
*/
public int generateInverted()
{
int fromR = Color.red(mFromColor);
int fromG = Color.green(mFromColor);
int fromB = Color.blue(mFromColor);
int toR = Color.red(mToColor);
int toG = Color.green(mToColor);
int toB = Color.blue(mToColor);
int diffR = toR - fromR;
int diffG = toG - fromG;
int diffB = toB - fromB;
int red = toR - (int)((diffR * mShade));
int green = toG - (int)((diffG * mShade));
int blue = toB - (int)((diffB * mShade));
return Color.rgb(red, green, blue);
}
/**
* Gets the String equivalent of the generated shade
* @return String value of the shade
*/
public String generateInvertedString()
{
return String.format("#%06X", 0xFFFFFF & generateInverted());
}
/**
* Gets the inverted String equivalent of the generated shade
* @return String value of the shade
*/
public String generateString()
{
return String.format("#%06X", 0xFFFFFF & generate());
}
}
mRootLayout.setBackgroundColor(shades.generate());
これで基本的に背景色をスライドさせる機能が完成しましたが、これは不快で、ステータスバーの色も変化すれば、画面全体が1色で、もっときれいになります.次に,前述した2番目の依存パケットを用いて状態欄の色を設定した.どのように使うかは、前に示した作者のコードアドレスを参考にして、私も実装したコードを貼ることができます.主にonCreateメソッドの中にあります.
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
{
//
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
setContentView(R.layout.activity_app_intro);
mTintManager = new SystemBarTintManager(this);
mTintManager.setStatusBarTintEnabled(true);
mTintManager.setNavigationBarTintEnabled(true);
applySelectedColor(R.color.light_green_500);//
init();
}
// ， onPageScrolled 。
private void applySelectedColor(int color)
{
mTintManager.setTintColor(color);
}