背景色渐变的引导页
使用什么实现
还用问么,ViewPager 以及 Fragment 呀,非常简单。
关键 API
下面的 API 可以根据初始颜色和结束颜色计算中间值。
Object ArgbEvaluator.evaluate(float fraction, Object startValue, Object endValue);
具体实现
布局
- activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="me.loshine.guidedemo.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
处理滑动背景色
- MainActivity.xml
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
ViewPager mViewPager;
private int[] colors;
private int state = ViewPager.SCROLL_STATE_IDLE; // 初始位于停止滑动状态
private ArgbEvaluator mArgbEvaluator;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initColors();
initViewPager();
}
/**
* 初始化 ViewPager
*/
private void initViewPager() {
mViewPager = (ViewPager) findViewById(R.id.view_pager);
if (mViewPager != null) {
// 初始颜色
mViewPager.setBackgroundColor(colors[0]);
mViewPager.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return GuideBaseFragment.newInstance(position);
}
@Override
public int getCount() {
return 4;
}
});
mViewPager.addOnPageChangeListener(this);
}
}
/**
* 初始化颜色
*/
private void initColors() {
colors = new int[4];
colors[0] = getResources().getColor(R.color.guideBackgroundColor1);
colors[1] = getResources().getColor(R.color.guideBackgroundColor2);
colors[2] = getResources().getColor(R.color.guideBackgroundColor3);
colors[3] = getResources().getColor(R.color.guideBackgroundColor4);
mArgbEvaluator = new ArgbEvaluator();
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 只要不是滑动停止状态就计算颜色
if (state != ViewPager.SCROLL_STATE_IDLE) {
if (positionOffset > 0 && position < 4) {
int evaluatePreColor = (int) mArgbEvaluator
.evaluate(positionOffset, colors[position], colors[position + 1]);
mViewPager.setBackgroundColor(evaluatePreColor);
} else if (positionOffset < 0 && position > 0) {
int evaluateNextColor = (int) mArgbEvaluator
.evaluate(-positionOffset, colors[position], colors[position - 1]);
mViewPager.setBackgroundColor(evaluateNextColor);
}
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
this.state = state;
}
}
总结
其实实现方式并不复杂,监听 ViewPager 的滚动然后计算中间值即可,重要的是又学习到酷炫的新东西了。