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