Android -- ViewPager滑动背景渐变_移动开发_编程开发_程序员俱乐部

原理                                                                                   

总布局为RelativeLayout或者FrameLayout，在这里我们用的是RelativeLayout。先设置背景图片，宽度和高度都fill_parent，在设置viewpager，viewpager的背景要透明哟~这样背景图片就可以显示在页面上。对viewpager进行滑动监听，通过滑动的偏移量对当前背景进行淡出，下一个背景进行显示。

布局                                                                                   

<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=".MyActivity">

    <us.yydcdut.viewpagercolorchange.BackGroundImage
        android:id="@+id/img"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
</RelativeLayout>

有个自定义View，淡出等操作就是在自定义view中进行的。

Code                                                                                   

public class MyActivity extends Activity {
    private BackGroundImage mImg;
    private ViewPager mViewPager;
    private List<View> mViewLists;
    private List<Drawable> mDrawableLists;
    private static final int ALL = 5;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        initViews();
        mImg.setmDrawableLists(mDrawableLists);
        mViewPager.setAdapter(new MyAdapter());
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i2) {
                mImg.setmDegree(v);
                mImg.setmPosition(i);
                mImg.invalidate();//刷新
            }

            @Override
            public void onPageSelected(int i) {

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    private void initViews() {
        mImg = (BackGroundImage) findViewById(R.id.img);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewLists = new ArrayList<View>();
        mDrawableLists = new ArrayList<Drawable>();
        for (int i = 0; i < ALL; i++) {
            View view = getLayoutInflater().inflate(R.layout.vp, null);
            mViewLists.add(view);
            if (i % 2 == 0) {
                mDrawableLists.add(getResources().getDrawable(R.drawable.bg_img1));
            } else {
                mDrawableLists.add(getResources().getDrawable(R.drawable.bg_img2));
            }
        }
    }


    class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return mViewLists.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object o) {
            return view == o;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            ((ViewPager) container).removeView(mViewLists.get(position));
            //super.destroyItem(container, position, object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View v = mViewLists.get(position);
            TextView textView = (TextView) v.findViewById(R.id.txt);
            textView.setText("第" + position + "个");
            ((ViewPager) container).addView(v);
            return v;
        }
    }
}

public class BackGroundImage extends View {
    private int mPosition;
    private float mDegree;
    private List<Drawable> mDrawableLists;
    private int mPrePosition = 0;
    private Drawable mNext;

    public void setmDrawableLists(List<Drawable> mDrawableLists) {
        this.mDrawableLists = mDrawableLists;
        mNext = mDrawableLists.get(1);//设置下一个背景图片的drawable
    }
 
    public void setmPosition(int mPosition) {
        this.mPosition = mPosition;
    }

    public void setmDegree(float mDegree) {
        this.mDegree = mDegree;
    }

    public BackGroundImage(Context context) {
        super(context);
        //setWillNotDraw(false);
    }

    public BackGroundImage(Context context, AttributeSet attrs) {
        super(context, attrs);
        //setWillNotDraw(false);
    }

    public BackGroundImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //setWillNotDraw(false);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Log.i("111", "onDraw");
        if (null == mDrawableLists) {
            return;
        }
        int alpha1 = (int) (255 - (mDegree * 255));
        Drawable fore = mDrawableLists.get(mPosition);
        fore.setBounds(0, 0, getWidth(), getHeight());
        mNext.setBounds(0, 0, getWidth(), getHeight());
        if (mPrePosition != mPosition) {//边界判断
            if (mPosition != mDrawableLists.size() - 1) {
                mNext = mDrawableLists.get(mPosition + 1);
            } else {
                mNext = mDrawableLists.get(mPosition);
            }
        }
        fore.setAlpha(alpha1);//淡出
        mNext.setAlpha(255);
        mNext.draw(canvas);
        fore.draw(canvas);
        mPrePosition = mPosition;
        super.onDraw(canvas);
    }
}

我是天王盖地虎的分割线                                                             

源代码：https://github.com/pinguo-yuyidong/ViewPagerColorChange