首页 > 代码库 > Android -- ViewPager滑动背景渐变

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);    }}

我是天王盖地虎的分割线                                                             

1

 

 

 

 

 

 

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

Android -- ViewPager滑动背景渐变