ViewPager实现Gallery的画廊效果 突显中间 虚化两边的界面

昨天在项目中需要完成一个滑动切换投资标的需求

百度了很多都不是很理想，后面通过结合几个前辈的经验，写了一个符合要求的Demo

下面就总结一下：

首先布局文件，需要注意的是在Relatilayout和viewpager中必须要设置

android:clipChildren="false"

具体代码：

<?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:clipChildren="false"
    android:id="@+id/rl_content"
    tools:context="com.gellarydemo.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="500px"
        android:layout_height="650px"
        android:layout_centerInParent="true"
        android:clipChildren="false"
       />


</RelativeLayout>

然后在MainActivity中的代码

public class MainActivity extends AppCompatActivity {

    private ViewPager mVpcontent;
    private RelativeLayout mRlcontent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mVpcontent = (ViewPager) findViewById(R.id.vp_content);
        mRlcontent = (RelativeLayout) findViewById(R.id.rl_content);

        initView();
    }

    private void initView() {
        mVpcontent.setAdapter(new HomeContentAdapter(this));
        mVpcontent.setOffscreenPageLimit(3);
        //设置page之间的距离
        mVpcontent.setPageMargin(10);
        //设置缩放及透明度
        mVpcontent.setPageTransformer(true, new ScalePageTransformer());
        //监听viewpager滑动，在page滑动的时候一直去更新界面
        mVpcontent.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (mVpcontent != null) {
                    mVpcontent.invalidate();
                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        mRlcontent.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // 这是让整个View随着触摸而滑动
                return mVpcontent.dispatchTouchEvent(event);
            }
        });
    }
}

Adapter中的代码

public class HomeContentAdapter extends PagerAdapter {
    private static final String TAG = "HomeContentAdapter";
    private Context mContext;
  private int[] datas ={R.mipmap.guide01,R.mipmap.guide02,R.mipmap.guide03,R.mipmap.guide01,R.mipmap.guide02,R.mipmap.guide03};

    public HomeContentAdapter(Context context) {
        mContext = context;
    }

    @Override
    public int getCount() {
        return datas.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
                ImageView imageView = new ImageView(mContext);
                imageView.setImageResource(datas[position]);
        container.addView(imageView);
        return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
}

ScalePageTransformer中的代码

public class ScalePageTransformer implements ViewPager.PageTransformer {
    private static final String TAG       = "ScalePageTransformer";
    public static final  float  MAX_SCALE = 1.0f;
    public static final  float  MIN_SCALE = 0.8f;

    @Override
    public void transformPage(View page, float position) {

        if (position < -1) {
            position = -1;
        } else if (position > 1) {
            position = 1;
        }

        float tempScale = position < 0 ? 1 + position : 1 - position;

        float slope = (MAX_SCALE - MIN_SCALE) / 1;
        //一个公式
        float scaleValue = MIN_SCALE + tempScale * slope;

        //设置缩放比例
        page.setScaleX(scaleValue);
        page.setScaleY(scaleValue);
        //设置透明度
        page.setAlpha(scaleValue);
    }
}

可以自己设置缩放比例及透明度  还有page之间的距离