（ViewPager画廊效果）仿淘票票影院影片选择

• 先上效果图

  
  

  效果图

• demo地址：https://github.com/chenhao520/TaoPiaoPiaoDemo

• 最近有个需求，在我们平台上写个卖电影票的功能与第三方卖座对接，其中影院进去就会有这样的效果，看一看淘票票效果。

  
  

  淘票票效果

参照淘票票效果，用viewPager实现，不说了上代码。

viewPager的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="130dp"
    android:clipChildren="false"
    android:gravity="center_horizontal"
    android:layerType="software"
    android:orientation="horizontal">

    <com.example.administrator.helloworld.cunpiao.ClipViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"></com.example.administrator.helloworld.cunpiao.ClipViewPager>
</LinearLayout>

主要关键点是** Android:clipChildren=”false” **这个属性
1、配置ViewPager 和其父布局的 android:clipChildren属性为”false”. (android:clipChildren表示是否限制子View在其范围内，默认为true. 代码设置setClipChildren(false)) 因为如果clipChildren属性设置为true,就表明我们要将children给clip掉，就是说对于子元素来说，超出当前view的部分都会被切掉，那我们在这里把它设置成false，就表明超出view的部分，不要切掉，依然显示。

注意：setClipChildren(false)在3.0以上版本中，开启了硬件加速后将不能正常工作，所以需要将其设置为软件加速。设置软硬件加速使用 setLayerType(View.LAYER_TYPE_SOFTWARE, null); 也可以在布局文件中添加 android:layerType=”software”

2、设置幕后item的缓存数目。如果一屏展示的pager数目多的话就需要设置此项。

mViewPager.setOffscreenPageLimit(8);//设置缓存数量

3、设置页与页之间的间距

mViewPager.setPageMargin(15);//设置间距

4、设置滑动，点击事件
如果只是简单的实现滑动，可以用设置viewPager父控件的onTouch监听到ViewPager的监听上

ll.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return mViewPager.dispatchTouchEvent(event);
            }
        });

以上四个步骤基本完成item 一屏显示的功能，但是放大的功能还需要以下代码才能实现.

viewPager的一个方法设置滑动效果mViewPager.setPageTransformer()，所有以我们需要定义一个类实现ViewPager.PageTransformer这个接口

class ZoomOutPageTransformer implements ViewPager.PageTransformer {
        private static final float MIN_SCALE = 0.9f;
        private static final float MIN_ALPHA = 0.5f;

        private float defaultScale = 0.9f;

        public void transformPage(View view, float position) {
            int pageWidth = view.getWidth();
            int pageHeight = view.getHeight();

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
//                view.setAlpha(0);
                view.setScaleX(defaultScale);
                view.setScaleY(defaultScale);
            } else if (position <= 1) { // [-1,1]
                // Modify the default slide transition to shrink the page as well
                float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
                float vertMargin = pageHeight * (1 - scaleFactor) / 2;
                float horzMargin = pageWidth * (1 - scaleFactor) / 2;
                if (position < 0) {
                    view.setTranslationX(horzMargin - vertMargin / 2);
                } else {
                    view.setTranslationX(-horzMargin + vertMargin / 2);
                }

                // Scale the page down (between MIN_SCALE and 1)
                view.setScaleX(scaleFactor);
                view.setScaleY(scaleFactor);

                // Fade the page relative to its size.
//                view.setAlpha(MIN_ALPHA +
//                        (scaleFactor - MIN_SCALE) /
//                                (1 - MIN_SCALE) * (1 - MIN_ALPHA));

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
//                view.setAlpha(0);
                view.setScaleX(defaultScale);
                view.setScaleY(defaultScale);
            }
        }
    }

接下来是点击滑动效果
这就需要自定义viewPager，所以我们就继承ViewPager

/**
 * Created by Administrator on 2017/6/14.
 * 点击滑动的viewpager
 */

public class ClipViewPager extends ViewPager {
    public ClipViewPager(Context context) {
        super(context);
    }

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

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_UP) {
            View view = viewoOfClickOnScreen(ev);
            if (view != null) {
                int index = indexOfChild(view);
                if (getCurrentItem() != index) {
                    setCurrentItem(indexOfChild(view));
                }
            }
        }
        return super.dispatchTouchEvent(ev);
    }

    /**
     * @param ev
     * @return
     */
    private View viewoOfClickOnScreen(MotionEvent ev) {
        int childCount = getChildCount();
        int[] location = new int[2];
        for (int i = 0; i < childCount; i++) {
            View v = getChildAt(i);
            v.getLocationOnScreen(location);

            int minX = location[0];
            int minY = getTop();

            int maxX = location[0] + v.getWidth();
            int maxY = getBottom();

            float x = ev.getX();
            float y = ev.getY();

            if ((x > minX && x < maxX) && (y > minY && y < maxY)) {
                return v;
            }
        }
        return null;
    }
}

Ok，以上代码基本完成效果。。
第一次写，格式很烂，希望我爬过的坑不让别人爬。。谢谢！！！