竖直滚动的ViewPager--VerticalViewPag

VerticalViewPager 一个竖直滚动的ViewPager

继承于ViewPager,与ViewPager完全一样的用法,包括适配器，监听都是一样的，只是滑动方向不同。

偶尔我们会发现viewpager想要竖直滑动，但是官方又没有提供方法，在stackoverflow上发现了这个，可以完美实现我们的需求，在这里做一下记录

实现的东西，说不定就会遇到.

VerticalViewPager github获取

来源于网络的动图

下面是具体的实现:

如下所示，其实就是使用setPageTransformer来改变每一个item的显示效果，加上setOverScrollMode(OVER_SCROLL_NEVER)

具体的可以见代码，拷贝之后可以直接使用

    /**
     * Created by yukun on 17-12-12.
     */
    
    public class VerticalViewPager extends ViewPager {
        public VerticalViewPager(Context context) {
            super(context);
            init();
        }
    
        public VerticalViewPager(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }
    
        private void init() {
            // The majority of the magic happens here
            //设置setPageTransformer来实现竖直滑动
            setPageTransformer(true, new VerticalPageTransformer());
            // The easiest way to get rid of the overscroll drawing that happens on the left and right
            setOverScrollMode(OVER_SCROLL_NEVER);
        }
    
        private class VerticalPageTransformer implements ViewPager.PageTransformer {
    
            @Override
            public void transformPage(View view, float position) {
    
                if (position < -1) { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    view.setAlpha(0);
    
                } else if (position <= 1) { // [-1,1]
                    view.setAlpha(1);
    
                    // Counteract the default slide transition
                    view.setTranslationX(view.getWidth() * -position);
    
                    //set Y position to swipe in from top
                    float yPosition = position * view.getHeight();
                    view.setTranslationY(yPosition);
    
                } else { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    view.setAlpha(0);
                }
            }
        }
    
        /**
         * Swaps the X and Y coordinates of your touch event.
         */
        private MotionEvent swapXY(MotionEvent ev) {
            float width = getWidth();
            float height = getHeight();
    
            float newX = (ev.getY() / height) * width;
            float newY = (ev.getX() / width) * height;
    
            ev.setLocation(newX, newY);
    
            return ev;
        }
    
        @Override
        public boolean onInterceptTouchEvent(MotionEvent ev){
            boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
            swapXY(ev); // return touch coordinates to original reference frame for any child views
            return intercepted;
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent ev) {
            return super.onTouchEvent(swapXY(ev));
        }
    }

主要是下面这个方法，在这里可以实现各种item的效果，包括透明，缩小等等

    private class VerticalPageTransformer implements ViewPager.PageTransformer {
            
                    @Override
                    public void transformPage(View view, float position) {
            
                        if (position < -1) { // [-Infinity,-1)
                            // This page is way off-screen to the left.
                            view.setAlpha(0);
            
                        } else if (position <= 1) { // [-1,1]
                            view.setAlpha(1);
            
                            // Counteract the default slide transition
                            view.setTranslationX(view.getWidth() * -position);
            
                            //set Y position to swipe in from top
                            float yPosition = position * view.getHeight();
                            view.setTranslationY(yPosition);
            
                        } else { // (1,+Infinity]
                            // This page is way off-screen to the right.
                            view.setAlpha(0);
                        }
                    }
                }

这里有一个缩小的viewpager动画

和下面这个图片效果差不多可以看看效果,可以加深对PageTransformer的理解。

来源于简书

用法很简单，拷贝直接使用：

 <com.yk.myselfview.views.VerticalViewPager 
        android:layout_width="match_parent"
        android:layout_centerInParent="true"
        android:id="@+id/vertical_viewpager"
        android:layout_height="240dp">
 </com.yk.myselfview.views.VerticalViewPager>

代码：

mVerticalViewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager);
//适配器
VerticalViewpagerAdapter verticalViewpagerAdapter=new VerticalViewpagerAdapter(this,mList);
        mVerticalViewPager.setAdapter(verticalViewpagerAdapter);

        mVerticalViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                Toast.makeText(VerticalViewPagerActivity.this, "position:"+position, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

适配器

    /**
     * Created by yukun on 17-12-12.
     */
    
    public class VerticalViewpagerAdapter extends PagerAdapter {
    
        private Context mContext;
        private List<Integer> mList;
    
        public VerticalViewpagerAdapter(Context mContext, List<Integer> list) {
            this.mContext = mContext;
            mList = list;
        }
    
        @Override
        public int getCount() {
            return mList.size();
        }
    
        @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.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setImageResource(mList.get(position));
            container.addView(imageView);
            return imageView;
        }
    
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View)object);
        }
    }