Android ViewPager滑動背景漸層，androidviewpager

Android ViewPager滑動背景漸層，androidviewpager
原理                                         

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