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之间的距离