Android，android官網

Android，android官網
原理                                                                                   

總布局為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