Android——ViewPager滑動背景漸變（自定義view，ViewPager）

效果：

ActivityBackgroundImage,java（自定義視圖）

package com.example.chenshuai.test322;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import java.util.List;

/**
 * Created by chenshuai on 2016/4/22.
 */
public class ActivityBackgroundImage extends View {

    private int mPosition;
    private float mDegree;
    private List<Drawable> mDrawableLists;
    private int mPrePosition = 0;
    private Drawable mNext;


    //本身寫的方法 生成set方法
    //設置背景圖片的drawble
    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 ActivityBackgroundImage(Context context) {
        super(context);
    }

    public ActivityBackgroundImage(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ActivityBackgroundImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public ActivityBackgroundImage(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    //自繪控件的意思是，這個控件上的內容是用onDraw函數繪製出來的。
    @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);
    }
}

activity_activityhuadong.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.chenshuai.test322.Activityhuadong">

    <com.example.chenshuai.test322.ActivityBackgroundImage
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/img"/>

    <android.support.v4.view.ViewPager android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager">
    </android.support.v4.view.ViewPager>

</RelativeLayout>

vp.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="第幾個"
        android:textSize="30sp"
        android:gravity="center"
        android:id="@+id/txt"/>

</LinearLayout>

Activityhuadong.java

package com.example.chenshuai.test322;

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class Activityhuadong extends AppCompatActivity {

    private ActivityBackgroundImage 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_activityhuadong);

        initViews();
        //設置圖片列表? 準備數據?
        mImg.setmDrawableLists(mDrawableLists);

        //設置ViewPager適配器?
        mViewPager.setAdapter(new MyAdapter());
        //加監聽
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                mImg.setmPosition(position);
                mImg.setmDegree(positionOffset);
                mImg.invalidate();
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    private void initViews()
    {
        mImg = (ActivityBackgroundImage) 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.df, null));

            } else {

                mDrawableLists.add(getResources().getDrawable(R.drawable.hh,null));

            }

        }
    }
    //用PagerAdapter
    class MyAdapter extends PagerAdapter{

        // 獲取要滑動的控件的數量，在這裏咱們以滑動的廣告欄爲例，那麼這裏就應該是展現的廣告圖片的ImageView數量
        @Override
        public int getCount() {
            return mViewLists.size();
        }

        // 來判斷顯示的是不是同一張圖片，這裏咱們將兩個參數相比較返回便可
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        //PagerAdapter只緩存三張要顯示的圖片，若是滑動的圖片超出了緩存的範圍，就會調用這個方法，將圖片銷燬
        //覆蓋destroyItem方法
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            ((ViewPager)container).removeView(mViewLists.get(position));

        }

        // 當要顯示的圖片能夠進行緩存的時候，會調用這個方法進行顯示圖片的初始化，
        // 咱們將要顯示的ImageView加入到ViewGroup中，而後做爲返回值返回便可
        //覆蓋instantiateItem方法
        @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;
        }
    }
}