让背景颜色随ViewPager的滑动而渐变

转载请注明出处,谢谢~

今天要说一个简单但不好想的效果实现。代码绝对简单,实现绝对easy,就是你可能想不到而已。

不多说,上效果图。第一个效果是仿最美应用的滑动颜色变化,第二个是我项目中要用的效果,实现后我就贴出来了,开源嘛。

下面分别说说这两个实现的原理和想法。

首先我们看纯色的第一张gif,纯色的渐变还是容易一些的。

1.实现一个ViewPager,因为我们要实现的是,随着手指的移动,viewpager的背景色改变,所以暂时的想法是,不需要自定义viewpager。

2.给背景设置一个纯色的color。

3.viewpager的滑动,如何获取,如何处理

4.如何让颜色渐变,怎么获取渐变值

下面我们一个一个的解决。

1.使用viewpager貌似是很简单的,这里不复述了,代码我贴上:

<LinearLayout xmlns:android=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"android:padding="20dp"android:id="@+id/ll"android:orientation="vertical" ><TextViewandroid:padding="10dp"android:layout_width="match_parent"android:gravity="center_horizontal"android:layout_height="wrap_content"android:textColor="#ff000000"android:text="这是title" /><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent" ></android.support.v4.view.ViewPager></LinearLayout>@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);llLayout = (LinearLayout) findViewById(R.id.ll);viewpager = (ViewPager) findViewById(R.id.viewpager);fragment = new ImageFragment();fragment2 = new ImageFragment();fragment3 = new ImageFragment();fragment4 = new ImageFragment();views.add(fragment2);views.add(fragment3);views.add(fragment4);views.add(fragment);viewpager.setAdapter(new MyAdapter(getSupportFragmentManager()));viewpager.setCurrentItem(0);viewpager.setOnPageChangeListener(new PageChangeLisener());}private class MyAdapter extends FragmentPagerAdapter{private List<Fragment> list_views;public MyAdapter(FragmentManager fm) {super(fm);list_views = views;}@Overridepublic Fragment getItem(int arg0) {return list_views.get(arg0);}@Overridepublic int getCount() {return list_views.size();}}以上是关于viewpager的一些代码,没有贴全,像是ImageFragment就特别简单,布局里就是一张图片而已。

下面第二个问题,背景色我们很容易搞定,setBackgroundColor就可以。

然后看第三个问题,并不是所有的滑动处理都要在onTouch里进行,像viewpager,我们完全可以看它的listener

class PageChangeLisener implements OnPageChangeListener {@Overridepublic void onPageScrollStateChanged(int arg0) {}@SuppressLint("NewApi")@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {ArgbEvaluator evaluator = new ArgbEvaluator();if (position % 2 == 0) {llLayout.setBackgroundColor(0XFF8080FF);int evaluate = (Integer) evaluator.evaluate(positionOffset, 0XFF8080FF,0XFFFF8080);llLayout.setBackgroundColor(evaluate);}else {llLayout.setBackgroundColor(0XFFFF8080);int evaluate = (Integer) evaluator.evaluate(positionOffset, 0XFFFF8080,0XFF8080FF);llLayout.setBackgroundColor(evaluate);}}@Overridepublic void onPageSelected(int arg0) {}}这是整个颜色控制的核心,先说第三个问题,这里用onPageChangeListener来处理了viewpager的滑动,这里虽然拿不到坐标,但是可以拿到一些对我们来说,很有用的东西,看onPageScrolled方法的第二个参数,这里做实验发现,,它向右滑动的时候,取值是[0,1),而向左滑动的时候,取值的(1,0],这完全就是为了让开发者做缩放平移等动画的小助手啊!

然后,注意了,我们考虑第四个问题,我不知道大家是否熟悉属性动画,我首先是在属性动画里写了一个对backgroundColor属性设置改变的一个动画:

@SuppressLint("NewApi")private void setBackRepeat(View view,String property,int from , int to){ValueAnimator animator = ObjectAnimator.ofInt(view,property,from,to);animator.setDuration(2000);animator.setRepeatMode(ValueAnimator.REVERSE);animator.setRepeatCount(ValueAnimator.INFINITE);animator.setEvaluator(new ArgbEvaluator());animator.start();animator.addUpdateListener(new AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {// TODO Auto-generated method stubSystem.out.println("value : "+Integer.toHexString((Integer)animation.getAnimatedValue()));}});}然后我打印了动画执行时的颜色的变化,然后我发现他居然会渐变成为你想要的颜色,而不是刷的一下就变了,这下,开心了。

把这个属性动画里的颜色估值器拿出来,ArgbEvaluator,就是它!它的实现特别简单,大家可以点进去看看源码,然后用这个估值器我们来做估值。

你所缺少的部分,也早已被我用想像的画笔填满。

让背景颜色随ViewPager的滑动而渐变

相关文章:

你感兴趣的文章:

标签云: