Android利用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">

 <!-- 布局中添加自定义控件-->
 <com.mahao.alex.customviewdemo.viewpager.CoverFlowViewPager
 android:id="@+id/cover"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />

</RelativeLayout>

public class MainActivity extends AppCompatActivity {

 private CoverFlowViewPager mCover;

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

 mCover = (CoverFlowViewPager) findViewById(R.id.cover);

 // 初始化数据
 List<View> list = new ArrayList<>();
 for(int i = 0;i<10;i++){
  ImageView img = new ImageView(this);
  img.setBackgroundColor(Color.parseColor("#"+getRandColorCode()));
  list.add(img);
 }
 //设置显示的数据
 mCover.setViewList(list);
 // 设置滑动的监听，该监听为当前页面滑动到中央时的索引
 mCover.setOnPageSelectListener(new OnPageSelectListener() {
  @Override
  public void select(int position) {
  Toast.makeText(getApplicationContext(),position+"",Toast.LENGTH_SHORT).show();
  }
 });
 }


 /**
 * 获取随机颜色，便于区分
 * @return
 */
 public static String getRandColorCode(){
 String r,g,b;
 Random random = new Random();
 r = Integer.toHexString(random.nextInt(256)).toUpperCase();
 g = Integer.toHexString(random.nextInt(256)).toUpperCase();
 b = Integer.toHexString(random.nextInt(256)).toUpperCase();

 r = r.length()==1 ? "0" + r : r ;
 g = g.length()==1 ? "0" + g : g ;
 b = b.length()==1 ? "0" + b : b ;

 return r+g+b;
 }
}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:clipChildren="false">

 <android.support.v4.view.ViewPager
 android:id="@+id/vp_conver_flow"
 android:layout_width="180dp"
 android:layout_height="260dp"
 android:layout_centerHorizontal="true"
 android:clipChildren="false" />

</RelativeLayout>

/**
 *
 * 实现封面浏览
 * Created by alex_mahao on 2016/8/25.
 */
public class CoverFlowViewPager extends RelativeLayout implements OnPageSelectListener {
 /**
 * 用于左右滚动
 */
 private ViewPager mViewPager;

 public CoverFlowViewPager(Context context, AttributeSet attrs) {
 super(context, attrs);
 inflate(context, R.layout.widget_cover_flow,this);
 mViewPager = (ViewPager) findViewById(R.id.vp_conver_flow);
 //init();
 }

/**
 * 滚动的适配器
 * Created by alex_mahao on 2016/8/25.
 */
public class CoverFlowAdapter extends PagerAdapter implements ViewPager.OnPageChangeListener {

 /**
 * 默认缩小的padding值
 */
 public static int sWidthPadding;

 public static int sHeightPadding;

 /**
 * 子元素的集合
 */
 private List<View> mViewList;

 /**
 * 滑动监听的回调接口
 */
 private OnPageSelectListener listener;

 /**
 * 上下文对象
 */
 private Context mContext;

 public CoverFlowAdapter(List<View> mImageViewList, Context context) {
 this.mViewList = mImageViewList;
 mContext = context;
 // 设置padding值
 sWidthPadding = dp2px(24);
 sHeightPadding = dp2px(32);
 }

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

 @Override
 public Object instantiateItem(ViewGroup container, int position) {
 View view = mViewList.get(position);
 container.addView(view);

 return view;
 }

 @Override
 public int getCount() {
 return mViewList == null ? 0 : mViewList.size();
 }

 @Override
 public boolean isViewFromObject(View view, Object object) {
 return view == object;
 }

 @Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 // 该方法回调ViewPager 的滑动偏移量
 if (mViewList.size() > 0 && position < mViewList.size()) {
  //当前手指触摸滑动的页面,从0页滑动到1页 offset越来越大，padding越来越大
  Log.i("info", "重新设置padding");
  int outHeightPadding = (int) (positionOffset * sHeightPadding);
  int outWidthPadding = (int) (positionOffset * sWidthPadding);
  // 从0滑动到一时，此时position = 0，其应该是缩小的，符合
  mViewList.get(position).setPadding(outWidthPadding, outHeightPadding, outWidthPadding, outHeightPadding);

  // position+1 为即将显示的页面，越来越大
  if (position < mViewList.size() - 1) {
  int inWidthPadding = (int) ((1 - positionOffset) * sWidthPadding);
  int inHeightPadding = (int) ((1 - positionOffset) * sHeightPadding);
  mViewList.get(position + 1).setPadding(inWidthPadding, inHeightPadding, inWidthPadding, inHeightPadding);
  }
 }

 }

 @Override
 public void onPageSelected(int position) {
 // 回调选择的接口
 if (listener != null) {
  listener.select(position);
 }
 }

 @Override
 public void onPageScrollStateChanged(int state) {

 }

 /**
 * 当将某一个作为最中央时的回调
 *
 * @param listener
 */
 public void setOnPageSelectListener(OnPageSelectListener listener) {
 this.listener = listener;
 }


 /**
 * dp 转 px
 *
 * @param dp
 * @return
 */
 public int dp2px(int dp) {
 int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, mContext.getResources().getDisplayMetrics());

 return px;
 }

}

 /**
 * 初始化方法
 */
 private void init() {
 // 构造适配器，传入数据源
 mAdapter = new CoverFlowAdapter(mViewList,getContext());
 // 设置选中的回调
 mAdapter.setOnPageSelectListener(this);
 // 设置适配器
 mViewPager.setAdapter(mAdapter);
 // 设置滑动的监听，因为adpter实现了滑动回调的接口，所以这里直接设置adpter
 mViewPager.addOnPageChangeListener(mAdapter);
 // 自己百度
 mViewPager.setOffscreenPageLimit(5);

 // 设置触摸事件的分发
 setOnTouchListener(new OnTouchListener() {
  @Override
  public boolean onTouch(View v, MotionEvent event) {
  // 传递给ViewPager 进行滑动处理
  return mViewPager.dispatchTouchEvent(event);
  }
 });
 }

 /**
 * 设置显示的数据，进行一层封装
 * @param lists
 */
 public void setViewList(List<View> lists){
 if(lists==null){
  return;
 }
 mViewList.clear();
 for(View view:lists){

  FrameLayout layout = new FrameLayout(getContext());
  // 设置padding 值，默认缩小
  layout.setPadding(CoverFlowAdapter.sWidthPadding,CoverFlowAdapter.sHeightPadding,CoverFlowAdapter.sWidthPadding,CoverFlowAdapter.sHeightPadding);
  layout.addView(view);
  mViewList.add(layout);
 }
 // 刷新数据
 mAdapter.notifyDataSetChanged();
 }

public interface OnPageSelectListener {

 void select(int position);
}

 @Override
 public void onPageSelected(int position) {
 // 回调选择的接口
 if (listener != null) {
  listener.select(position);
 }
 }

 // 显示的回调
 @Override
 public void select(int position) {
 if(listener!=null){
  listener.select(position);
 }
 }