Android ViewPager 垂直滑动 纵向滑动 VerticalViewPager

转载自：http://blog.csdn.net/tiantianshangcha/article/details/50804954

项目里头需要用到一个在垂直方向滑动页签的效果， 这可难道宝宝了，不过google 还是强大的 ， 在stackoverflow 找到了人生的真谛。

具体链接 传送门

特么的里面居然出现了四五种方案，选择困难症啊。。。。。。

实验了其中的两种，效果上均可行，另外两种均是github的项目，没细看，有兴趣的可以去做对比

地址 VerticalViewPager       VerticalViewPager2

再详细看下我实验过的两种方案， 

方案一：

旋转 viewpager  旋转viewpager的Item （高能～～～～～～～）

[java]  view plain  copy

 

1. 1、onInstantiateItem() of PagerAdapter, create the view and rotate it by -90:  
2. view.setrotation(-90f)  

[java]  view plain  copy

 

1. </pre><pre code_snippet_id="1597557" snippet_file_name="blog_20160304_3_7176190" name="code" class="java">If you are using FragmentPagerAdapter, then:  
2. objFragment.getView().setRoration(-90)  

[java]  view plain  copy

 

1. 2、Rotate ViewPager view by 90 degree:  
2. objViewPager.setRotation(90)  

方案二：

You can use a ViewPager.PageTransformer to give the illusion of a vertical ViewPager. To achieve scrolling with a vertical instead of a horizontal drag you will have to override ViewPager's default touch events and swap the coordinates of MotionEvents prior to handling them, e.g.:

[java]  view plain  copy

 

1. /** 
2.  * Uses a combination of a PageTransformer and swapping X & Y coordinates 
3.  * of touch events to create the illusion of a vertically scrolling ViewPager.  
4.  *  
5.  * Requires API 11+ 
6.  *  
7.  */  
8. public class VerticalViewPager extends ViewPager {  
9.   
10.     public VerticalViewPager(Context context) {  
11.         super(context);  
12.         init();  
13.     }  
14.   
15.     public VerticalViewPager(Context context, AttributeSet attrs) {  
16.         super(context, attrs);  
17.         init();  
18.     }  
19.   
20.     private void init() {  
21.         // The majority of the magic happens here  
22.         setPageTransformer(true, new VerticalPageTransformer());  
23.         // The easiest way to get rid of the overscroll drawing that happens on the left and right  
24.         setOverScrollMode(OVER_SCROLL_NEVER);  
25.     }  
26.   
27.     private class VerticalPageTransformer implements ViewPager.PageTransformer {  
28.   
29.         @Override  
30.         public void transformPage(View view, float position) {  
31.   
32.             if (position < -1) { // [-Infinity,-1)  
33.                 // This page is way off-screen to the left.  
34.                 view.setAlpha(0);  
35.   
36.             } else if (position <= 1) { // [-1,1]  
37.                 view.setAlpha(1);  
38.   
39.                 // Counteract the default slide transition  
40.                 view.setTranslationX(view.getWidth() * -position);  
41.   
42.                 //set Y position to swipe in from top  
43.                 float yPosition = position * view.getHeight();  
44.                 view.setTranslationY(yPosition);  
45.   
46.             } else { // (1,+Infinity]  
47.                 // This page is way off-screen to the right.  
48.                 view.setAlpha(0);  
49.             }  
50.         }  
51.     }  
52.   
53.     /** 
54.      * Swaps the X and Y coordinates of your touch event. 
55.      */  
56.     private MotionEvent swapXY(MotionEvent ev) {  
57.         float width = getWidth();  
58.         float height = getHeight();  
59.   
60.         float newX = (ev.getY() / height) * width;  
61.         float newY = (ev.getX() / width) * height;  
62.   
63.         ev.setLocation(newX, newY);  
64.   
65.         return ev;  
66.     }  
67.   
68.     @Override  
69.     public boolean onInterceptTouchEvent(MotionEvent ev){  
70.         boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));  
71.         swapXY(ev); // return touch coordinates to original reference frame for any child views  
72.         return intercepted;  
73.     }  
74.   
75.     @Override  
76.     public boolean onTouchEvent(MotionEvent ev) {  
77.         return super.onTouchEvent(swapXY(ev));  
78.     }  
79.   
80. }  

这两种方法基本效果都OK，接下来是我们举一反三的阶段了，我要封装一个支持横向纵向都可以滑动的ViewPager，基本思路就是自定义一个属性，来选择代码到底走垂直ViewPager代码还是水平ViewPager代码 

[java]  view plain  copy

 

1. package com.xiaowu.banner.demo;  
2.   
3. import android.content.Context;  
4. import android.content.res.TypedArray;  
5. import android.support.v4.view.ViewPager;  
6. import android.util.AttributeSet;  
7. import android.view.MotionEvent;  
8. import android.view.View;  
9.   
10. public class HorizonVerticalViewPager extends MyViewPager{  
11.     private boolean isVertical = false;  
12.       
13.     public HorizonVerticalViewPager(Context context) {  
14.         super(context);  
15.         init();  
16.     }  
17.   
18.     public HorizonVerticalViewPager(Context context, AttributeSet attrs) {  
19.         super(context, attrs);  
20.         initIsVertical(attrs, 0);  
21.         init();  
22.     }  
23.       
24.     public HorizonVerticalViewPager(Context context, AttributeSet attrs, int defStyle) {  
25.         super(context, attrs);  
26.         initIsVertical(attrs, defStyle);  
27.         init();  
28.     }  
29.       
30.     private void initIsVertical(AttributeSet attrs, int defStyle){  
31.         final TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.MyViewPager, defStyle, 0);  
32.         isVertical = a.getBoolean(R.styleable.MyViewPager_isVertical, false);  
33.         System.out.println("isVertical=>" + isVertical);  
34.         a.recycle();  
35.     }  
36.       
37.   
38.     private void init() {  
39.         if(isVertical){  
40.             // The majority of the magic happens here  
41.             setPageTransformer(true, new VerticalPageTransformer());  
42.             // The easiest way to get rid of the overscroll drawing that happens on the left and right  
43.             setOverScrollMode(OVER_SCROLL_NEVER);  
44.         }  
45.     }  
46.   
47.     private class VerticalPageTransformer implements ViewPager.PageTransformer {  
48.   
49.         @Override  
50.         public void transformPage(View view, float position) {  
51.   
52.             if (position < -1) { // [-Infinity,-1)  
53.                 // This page is way off-screen to the left.  
54.                 view.setAlpha(0);  
55.   
56.             } else if (position <= 1) { // [-1,1]  
57.                 view.setAlpha(1);  
58.   
59.                 // Counteract the default slide transition  
60.                 view.setTranslationX(view.getWidth() * -position);  
61.   
62.                 //set Y position to swipe in from top  
63.                 float yPosition = position * view.getHeight();  
64.                 view.setTranslationY(yPosition);  
65.   
66.             } else { // (1,+Infinity]  
67.                 // This page is way off-screen to the right.  
68.                 view.setAlpha(0);  
69.             }  
70.         }  
71.     }  
72.   
73.     /** 
74.      * Swaps the X and Y coordinates of your touch event. 
75.      */  
76.     private MotionEvent swapXY(MotionEvent ev) {  
77.         float width = getWidth();  
78.         float height = getHeight();  
79.   
80.         float newX = (ev.getY() / height) * width;  
81.         float newY = (ev.getX() / width) * height;  
82.   
83.         ev.setLocation(newX, newY);  
84.   
85.         return ev;  
86.     }  
87.   
88.     @Override  
89.     public boolean onInterceptTouchEvent(MotionEvent ev){  
90.         if (isVertical) {  
91.             boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));  
92.             swapXY(ev); // return touch coordinates to original reference frame for any child views  
93.             return intercepted;  
94.         }else {  
95.             return super.onInterceptTouchEvent(ev);  
96.         }  
97.     }  
98.   
99.     @Override  
100.     public boolean onTouchEvent(MotionEvent ev) {  
101.         if (isVertical) {  
102.             return super.onTouchEvent(swapXY(ev));  
103.         }else {  
104.             return super.onTouchEvent(ev);  
105.         }  
106.     }  
107. }  

自定义属性定义在res/values/attr.xml中 ， 具体如下：

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <declare-styleable name="MyViewPager">  
4.         <attr name="isVertical" format="boolean" />  
5.     </declare-styleable>  
6. </resources>  

使用代码如下

[html]  view plain  copy

 

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     <span style="color:#ff0000;">xmlns:app="http://schemas.android.com/apk/res-auto"</span>  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.     <com.xiaowu.banner.demo.HorizonVerticalViewPager  
7.         android:id="@+id/vp"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="fill_parent"   
10.         <span style="color:#ff0000;">app:isVertical="false"</span>  
11.         />  
12.     <xxxxx  
13.         />  
14. </LinearLayout>  

看官们估计又要有疑问了，那个MyViewPager是个什么鬼，大概解释一下，这个MyViewPager是为了解决ViewPager不能响应onTouchListener的问题

主要是复写了其中的dispatchTouchEvent函数，然后在分发之前，先自己做点事情，具体代码见传送门。

源码已上传 地址 源码