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

}

}

我是天王盖地虎的分割线

http://www.jinhusns.com/Products/Download/?type=xcj