【Android】通过手势切换屏幕的几种方法 viewPager

第一种： ViewFlipper + GestureDetector

第二种： ActivityGroup +   GestureDetector

第三种： ViewPager  (Android3.0+)

第四种： ViewFlow (开源项目)  （示例： http://download.youkuaiyun.com/detail/feng88724/3812764）

前两种大家应该都知道，尤其是第一种，应该都用过了。( 第二种方式可参考此文：http://www.iteye.com/topic/1115953 )

本文重点要讲是第三种方式，Viewpager。 可能有人会说，这要Android 3.0以上才可以使用呢，现在市场上的手机根本没有基于这个Level的，基本都在2.0 - 2.3，怎么办呢？

没关系，google 在2011年3月时推出了Compatibility （   http://developer.android.com/guide/practices/compatibility.html ），这东西到底有什么用呢？

说白了，他得主要作用就是让低版本的Android支持Android3.0中的一些特性， Google将Android3.0中部分API抽取出来，打成一个Jar包，android-support-v4.jar，只要你在开发应用时引入这个包，那你就也能使用ViewPager、Fragment、Loader等这些API了。  这些我放一个网上找到的说明文档，其实只要导入v4的这个jar就可以开发，但还是有不清楚的朋友可以看看这个文档（http://download.youkuaiyun.com/detail/feng88724/3798731）。  

下面开始就讲下如何使用Viewpager实现屏幕内容切换。

发现已经有好几个朋友写过相关文章，我就不重复发明轮子了..

参考下面两篇吧：

http://my.oschina.net/kzhou/blog/29157

http://blog.youkuaiyun.com/billpig/article/details/6650097

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

转载至：http://blog.youkuaiyun.com/dawanganban/article/details/17297671

最近在研究如何做出仿微信，仿新浪等应用，第一次安装使用的使用展示应用程序的新特性和用法。

实现功能：左右手势滑屏

    底部小圆点随当前显示页跳动

    浮动按钮显示。当触屏事件发生显示，否则就渐渐消失

先转个文章：http://blog.youkuaiyun.com/feng88724/article/details/6973662

第一种： ViewFlipper + GestureDetector

第二种： ActivityGroup +   GestureDetector

第三种： ViewPager  (Android3.0+)

第四种： ViewFlow (开源项目)

话不多说，先放上效果图

向右滑动，或者点击按钮向右

怎么样，是不是很心动~~~！哈哈、

实现左右滑屏是需要一个叫做ViewPager的东西。具体ViewPager怎么用我就不赘述了。（PS注意导入ViewPager的兼容包)

接下来是代码：

首先在main.xml中声明ViewPager：

1. <LinearLayout  
2.    android:id="@+id/linearLayout01"  
3.    android:layout_width="match_parent"  
4.    android:layout_height="wrap_content"  
5.    android:orientation="vertical" >  
6. <android.support.v4.view.ViewPager  
7.     android:id="@+id/guidePages"  
8.     android:layout_width="fill_parent"  
9.     android:layout_height="fill_parent"/>  
10.   
11. lt;/LinearLayout>  

1. 和一个viewGroup放小圆点  

1. <LinearLayout    
2.     android:id="@+id/viewGroup"    
3.     android:layout_width="fill_parent"    
4.     android:layout_height="wrap_content"    
5.     android:layout_alignParentBottom="true"    
6.     android:layout_marginBottom="40dp"    
7.     android:gravity="center_horizontal"    
8.     android:orientation="horizontal" >    
9.       
10. </LinearLayout>  

接着在item01.xml等几个xml中放置要显示的图片,因为几个都一样，就不都贴上来了。

1. <ImageView  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="fill_parent"  
4.     android:background="@drawable/feature_guide_0" >  
5.   
6. </ImageView>  

接下来是核心代码：

1. public class GuideViewActivity extends Activity {  
2.       
3.   
4.     private ViewPager viewPager;    
5.      private ArrayList<View> pageViews;    
6.      private ImageView imageView;    
7.      private ImageView[] imageViews;   
8.     // 包裹滑动图片LinearLayout  
9.      private ViewGroup main;  
10.     // 包裹小圆点的LinearLayout  
11.      private ViewGroup group;  
12.      //左箭头按钮  
13.      private ImageView imageViewLeft;  
14.      //右箭头按钮  
15.      private ImageView imageViewRight;  
16.      //当前页码  
17.      private int currentIndex;  
18.        
19.      //ImageView的alpha值     
20.      private int mAlpha = 0;  
21.      private boolean isHide;  
22.        
23.           
24.     /** Called when the activity is first created. */  
25.     @Override  
26.     public void onCreate(Bundle savedInstanceState) {  
27.           
28.         super.onCreate(savedInstanceState);  
29.   
30.         //将要显示的图片放到ArrayList当中，存到适配器中  
31.         LayoutInflater inflater = getLayoutInflater();    
32.         pageViews = new ArrayList<View>();    
33.         pageViews.add(inflater.inflate(R.layout.item01, null));  

1. ...       

1.        imageViews = new ImageView[pageViews.size()];    
2.        main = (ViewGroup)inflater.inflate(R.layout.main, null);    
3.          
4.        group = (ViewGroup)main.findViewById(R.id.viewGroup);    
5.        viewPager = (ViewPager)main.findViewById(R.id.guidePages);    
6.        imageViewLeft = (ImageView)main.findViewById(R.id.imageView1);  
7.        imageViewRight = (ImageView)main.findViewById(R.id.imageView2);  
8.        imageViewLeft.setAlpha(0);  
9.        imageViewRight.setAlpha(0);  
10.          
11.        //将小圆点放到imageView数组当中  
12.        for (int i = 0; i < pageViews.size(); i++) {    
13.            imageView = new ImageView(GuideViewActivity.this);    
14.            imageView.setLayoutParams(new LayoutParams(20,20));    
15.            imageView.setPadding(20, 0, 20, 0);    
16.            imageViews[i] = imageView;    
17.              
18.            if (i == 0) {    
19.             //默认选中第一张图片  
20.                imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);    
21.            } else {    
22.                imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
23.            }    
24.              
25.            group.addView(imageViews[i]);    
26.        }    
27.          
28.        setContentView(main);  
29.          
30.        viewPager.setAdapter(new GuidePageAdapter());    
31.        viewPager.setOnPageChangeListener(new GuidePageChangeListener());  
32.        imageViewLeft.setOnClickListener(new ButtonListener());  
33.        imageViewRight.setOnClickListener(new ButtonListener());  
34.    }  
35.      
36.    //左右切换屏幕的按钮监听器  
37.    class ButtonListener implements OnClickListener{  
38.   
39.     @Override  
40.     public void onClick(View v) {  
41.         // TODO Auto-generated method stub  
42.         int showNext=0;  
43.         if(v.getId() == R.id.imageView1) {  
44.             System.out.println("点击了向左的按钮");  
45.             if(currentIndex ==0 )  
46.                 showNext = currentIndex;  
47.             else  
48.                 showNext = currentIndex-1;  
49.             viewPager.setCurrentItem(showNext);  
50.         }  
51.         if(v.getId() == R.id.imageView2){  
52.             System.out.println("点击了向右的按钮");  
53.             if(currentIndex == imageViews.length)  
54.                 showNext = currentIndex;  
55.             else  
56.                 showNext = currentIndex+1;  
57.             viewPager.setCurrentItem(showNext);  
58.         }  
59.             System.out.println("当前页码："+showNext);  
60.           
61.     }  
62.       
63.    }  
64.      
65.    /** 
66.     * 设置按钮渐显效果 
67.     */  
68.    private Handler mHandler = new Handler()  
69.    {  
70.        public void handleMessage(Message msg) {  
71.            if(msg.what==1 && mAlpha<255){             
72.                //通过设置不透明度设置按钮的渐显效果  
73.                mAlpha += 50;  
74.                  
75.                if(mAlpha>255)  
76.                    mAlpha=255;  
77.                  
78.                imageViewLeft.setAlpha(mAlpha);  
79.                imageViewLeft.invalidate();  
80.                imageViewRight.setAlpha(mAlpha);  
81.                imageViewRight.invalidate();  
82.                  
83.                if(!isHide && mAlpha<255)  
84.                    mHandler.sendEmptyMessageDelayed(1, 100);  
85.            }else if(msg.what==0 && mAlpha>0){  
86.                mAlpha -= 3;  
87.                  
88.                if(mAlpha<0)  
89.                    mAlpha=0;  
90.                imageViewLeft.setAlpha(mAlpha);  
91.                imageViewLeft.invalidate();  
92.                imageViewRight.setAlpha(mAlpha);  
93.                imageViewRight.invalidate();  
94.                  
95.                if(isHide && mAlpha>0)  
96.                    mHandler.sendEmptyMessageDelayed(0, 2);  
97.            }              
98.        }  
99.    };  
100.      
101.    private void showImageButtonView(){  
102.        isHide = false;  
103.        mHandler.sendEmptyMessage(1);  
104.    }  
105.      
106.    private void hideImageButtonView(){  
107.        new Thread(){  
108.            public void run() {  
109.                try {  
110.                    isHide = true;  
111.                    mHandler.sendEmptyMessage(0);  
112.                } catch (Exception e) {  
113.                    ;  
114.                }  
115.            }  
116.        }.start();  
117.    }  
118.      
119.   
120.   
121.   
122.   
123. @Override  
124. public boolean dispatchTouchEvent(MotionEvent ev) {  
125.     System.out.println("this is dispatch");  
126.     System.out.println("触碰屏幕");  
127.        switch (ev.getAction()) {  
128.            case MotionEvent.ACTION_MOVE:  
129.            case MotionEvent.ACTION_DOWN:  
130.                showImageButtonView();              
131.                break;  
132.            case MotionEvent.ACTION_UP:  
133.                hideImageButtonView();                  
134.                break;  
135.        }  
136.          
137.          
138.     return super.dispatchTouchEvent(ev);  
139. }  
140.   
141. // 指引页面数据适配器,实现适配器方法  
142.    class GuidePageAdapter extends PagerAdapter {    
143.         
144.        @Override    
145.        public int getCount() {    
146.            return pageViews.size();    
147.        }    
148.    
149.        @Override    
150.        public boolean isViewFromObject(View arg0, Object arg1) {    
151.            return arg0 == arg1;    
152.        }    
153.    
154.        @Override    
155.        public int getItemPosition(Object object) {    
156.            // TODO Auto-generated method stub    
157.            return super.getItemPosition(object);    
158.        }    
159.    
160.        @Override    
161.        public void destroyItem(View arg0, int arg1, Object arg2) {    
162.            // TODO Auto-generated method stub    
163.            ((ViewPager) arg0).removeView(pageViews.get(arg1));    
164.        }    
165.    
166.        @Override    
167.        public Object instantiateItem(View arg0, int arg1) {    
168.            // TODO Auto-generated method stub    
169.            ((ViewPager) arg0).addView(pageViews.get(arg1));    
170.            return pageViews.get(arg1);    
171.        }    
172.    
173.        @Override    
174.        public void restoreState(Parcelable arg0, ClassLoader arg1) {    
175.            // TODO Auto-generated method stub    
176.    
177.        }    
178.    
179.        @Override    
180.        public Parcelable saveState() {    
181.            // TODO Auto-generated method stub    
182.            return null;    
183.        }    
184.    
185.        @Override    
186.        public void startUpdate(View arg0) {    
187.            // TODO Auto-generated method stub    
188.    
189.        }    
190.    
191.        @Override    
192.        public void finishUpdate(View arg0) {    
193.            // TODO Auto-generated method stub    
194.    
195.        }    
196.    }   
197.      
198. // 指引页面更改事件监听器,左右滑动图片时候，小圆点变换显示当前图片位置  
199.    class GuidePageChangeListener implements OnPageChangeListener {    
200.         
201.        @Override    
202.        public void onPageScrollStateChanged(int arg0) {    
203.            // TODO Auto-generated method stub    
204.    
205.        }    
206.    
207.        @Override    
208.        public void onPageScrolled(int arg0, float arg1, int arg2) {    
209.            // TODO Auto-generated method stub    
210.    
211.        }    
212.    
213.        @Override    
214.        public void onPageSelected(int arg0) {    
215.         currentIndex = arg0;  
216.            for (int i = 0; i < imageViews.length; i++) {    
217.                imageViews[arg0].setBackgroundResource(R.drawable.page_indicator_focused);  
218.                  
219.                if (arg0 != i) {    
220.                    imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
221.                }    
222.            }  
223.        }    
224.    }    

啊~到这里就都实现了~