原理                                         

总 布局为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);

    }

}


​