Android中三种超实用的滑屏方式汇总（ViewPager、ViewFlipper、ViewFlow）

最新推荐文章于 2024-04-13 10:00:00 发布
最新推荐文章于 2024-04-13 10:00:00 发布
阅读量553 收藏 1
点赞数
分类专栏： 安卓 文章标签： android

现如今主流的Android应用中，都少不了左右滑动滚屏这项功能，（貌似现在好多人使用智能机都习惯性的有事没事的左右滑屏，也不知道在干什么。。。j_0059.gif嘿嘿），由于前段时间项目的需要，所以也对其研究了一下，总的来说滑屏实现有三种方式：（至于其他的实现方式目前后还没碰到。。。）

1.ViewPager 2.ViewFlipper 3.ViewFlow


一.ViewPager


官方文档介绍：http://developer.android.com/reference/android/support/v4/view/ViewPager.html

175956838.png


根据继承关系我们可以看出，ViewPager不在android sdk 自带jar包中，来源google 的补充组件android-support-v4.jar中，所以我们在3.0以前的版本中使用就需要导入该jar包了。


1.1 介绍：该类是一个布局管理器,它允许用户通过滑动左、右页的数据。你必须要一个实现了PagerAdapter接口从而生成的页面视图。


1.2 使用：

activity_main.xml

1
2
3
4
5
6
7
8
9
10
< 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"  >
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
     < android.support.v4.view.ViewPager
         android:id = "@+id/viewpager"
         android:layout_width = "fill_parent"
         android:layout_height = "fill_parent"  />
</ RelativeLayout >


MainActivity类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package  comzhf.android_viewpager;
import  java.util.ArrayList;
import  java.util.List;
import  android.os.Bundle;
import  android.app.Activity;
import  android.support.v4.view.ViewPager;
import  android.view.LayoutInflater;
import  android.view.View;
import  android.view.View.OnClickListener;
import  android.widget.Button;
import  android.widget.TextView;
import  android.widget.Toast;
/**
  * 主界面：ViewPagerViewPager不在android sdk 自带jar包中，来源google 的补充组件android-support-v4.jar
  */
public  class  ViewPagerActivity  extends  Activity {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
     private  ViewPager mViewPager;
     List<View> viewList;
     @Override
     protected  void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
         LayoutInflater mInflater = getLayoutInflater().from( this );
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
         View v1 = mInflater.inflate(R.layout.layout1,  null );
         View v2 = mInflater.inflate(R.layout.layout2,  null );
         View v3 = mInflater.inflate(R.layout.layout3,  null );
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
         //添加页面数据
         viewList =  new  ArrayList<View>();
         viewList.add(v1);
         viewList.add(v2);
         viewList.add(v3);
         //实例化适配器
         mViewPager = (ViewPager) findViewById(R.id.viewpager);
         mViewPager.setAdapter( new  MyPagerAdapter(viewList));
         mViewPager.setCurrentItem( 0 );  //设置默认当前页
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
         View view = viewList.get( 0 );
         TextView textView = (TextView) view.findViewById(R.id.text_1);
         textView.setText( "我是第一页" );
         Button button = (Button) view.findViewById(R.id.button_1);
         button.setOnClickListener( new  OnClickListener() {
             public  void  onClick(View v) {
                 // TODO Auto-generated method stub
                 Toast.makeText(getApplicationContext(),  "你点击了按钮" , Toast.LENGTH_SHORT).show();
                 }
         });
     }
}


这里还有三个布局文件：layout1.xml (其余两个类似，略)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<? xml  version = "1.0"  encoding = "utf-8" ?>
< LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"
     android:layout_width = "fill_parent"
     android:layout_height = "fill_parent"
     android:orientation = "vertical"
     android:background = "@drawable/guide01"  >
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
     < TextView
         android:id = "@+id/text_1"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:layout_gravity = "center_horizontal"
         android:text = "叶片一"
         android:textSize = "25sp"  />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
     < Button
         android:id = "@+id/button_1"
         android:layout_width = "fill_parent"
         android:layout_height = "wrap_content"
         android:text = "点击我"
         >
     </ Button >
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
</ LinearLayout >


效果图：

183843192.png 183843821.png 183845132.png

补充说明：

1.这里我们用了Layout作为每个page的填充数据，其实官方文档说ViewPager+Fragment配合使用更好

2.每个页面的响应事件我们可以在OnPageChangeListener监听器类中进行捕获和处理对应事件。


二.ViewFlipper


官方文档：http://developer.android.com/reference/android/widget/ViewFlipper.html

190300918.png

2.1 介绍：ViewFilpper控件是系统自带控件之一，主要用于在同一个屏幕间的切换及设置动画效果、间隔时间，且可以自动播放。

顺便提及一下，View动画关系图：

195450865.png

2.2 使用：

2.2.1 静态加载：

activity_main.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< 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"  >
     < ViewFlipper
         android:id = "@+id/body_flipper"
         android:layout_width = "fill_parent"
         android:layout_height = "fill_parent"
         android:background = "#f0f0f0"  >
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
          < include
             android:id = "@+id/layout01"
             layout = "@layout/page1"  />
         < include
             android:id = "@+id/layout02"
             layout = "@layout/page2"  />
         < include
             android:id = "@+id/layout02"
             layout = "@layout/page3"  />
         < include
             android:id = "@+id/layout02"
             layout = "@layout/page4"  />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
     </ ViewFlipper >
</ RelativeLayout >

MainActivity类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package  com.zhf.android_viewflipper_view;
import  android.os.Bundle;
import  android.app.Activity;
import  android.view.MotionEvent;
import  android.view.View;
import  android.view.View.OnTouchListener;
import  android.view.animation.AnimationUtils;
import  android.widget.ViewFlipper;
/**
  * ViewFlipper 静态加载
  * @author ZHF
**/
public  class  MainActivity  extends  Activity  implements  OnTouchListener{
     private  ViewFlipper viewFlipper;
     private  float touchDownX;   // 手指按下的X坐标
     private  float touchUpX;   //手指松开的X坐标
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
     @Override
     public  void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
         viewFlipper = (ViewFlipper) findViewById(R.id.body_flipper);
         viewFlipper.setOnTouchListener( this );
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
     @Override
     public  boolean onTouch(View v, MotionEvent event) {
         if  (event.getAction() == MotionEvent.ACTION_DOWN) {
             // 取得左右滑动时手指按下的X坐标
             touchDownX = event.getX();
             return  true ;
         }  else  if  (event.getAction() == MotionEvent.ACTION_UP) {
             // 取得左右滑动时手指松开的X坐标
             touchUpX = event.getX();
             // 从左往右，看前一个View
             if  (touchUpX - touchDownX >  100 ) {
                 // 显示上一屏动画
                 viewFlipper.setInAnimation(AnimationUtils.loadAnimation( this ,
                        R.anim.push_right_in));
                 viewFlipper.setOutAnimation(AnimationUtils.loadAnimation( this ,
                         R.anim.push_right_out));
                 // 显示上一屏的View
                 viewFlipper.showPrevious();
                 // 从右往左，看后一个View
             }  else  if  (touchDownX - touchUpX >  100 ) {
                 //显示下一屏的动画
                 viewFlipper.setInAnimation(AnimationUtils.loadAnimation( this ,
                         R.anim.push_left_in));
                 viewFlipper.setOutAnimation(AnimationUtils.loadAnimation( this ,
                         R.anim.push_left_out));
                 // 显示下一屏的View
                 viewFlipper.showNext();
             }
             return  true ;
         }
         return  false ;
     }
}

动画配置文件(右进右出同理，略)：

push_left_in.xml:

1
2
3
4
5
6
7
8
9
10
11
<?xml version= "1.0"  encoding= "utf-8" ?>
< set  xmlns:android= "http://schemas.android.com/apk/res/android"  >
     <translate
         android:duration= "500"
         android:fromXDelta= "100.0%p"
         android:toXDelta= "0.0"  />
     <alpha
         android:duration= "500"
         android:fromAlpha= "0.1"
         android:toAlpha= "1.0"  />
</ set >

push_left_out.xml:

1
2
3
4
5
6
7
8
9
10
11
<?xml version= "1.0"  encoding= "utf-8" ?>
< set  xmlns:android= "http://schemas.android.com/apk/res/android"  >
     <translate
         android:duration= "500"
         android:fromXDelta= "0.0"
         android:toXDelta= "-100.0%p"  />
     <alpha
         android:duration= "500"
         android:fromAlpha= "1.0"
         android:toAlpha= "0.1"  />
</ set >

效果：

204143396.png 204144556.png

向左滑屏 向右滑屏

补充：

上述的page只有4个，而真实项目中的page页面个数是不确定的，所以下面这种方式是项目中经常用到的。


2.2.2 动态加载（重要）

参考文章：http://blog.csdn.net/yuzhiboyi/article/details/7702953

activity_main2.xml

1
2
3
4
5
6
7
8
9
10
11
< 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.zhf.android_viewflipper_view.MyViewFlipper
         android:id = "@+id/body_flipper"
         android:layout_width = "fill_parent"
         android:layout_height = "fill_parent"
         android:background = "#f0f0f0"  >
     </ com.zhf.android_viewflipper_view.MyViewFlipper >
</ RelativeLayout >

flipper_view.xml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?xml version= "1.0"  encoding= "utf-8" ?>
<ScrollView xmlns:android= "http://schemas.android.com/apk/res/android"
     android:layout_width= "fill_parent"
     android:layout_height= "fill_parent"
     android:scrollbars= "none"  >
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     <LinearLayout
         android:layout_width= "fill_parent"
         android:layout_height= "wrap_content"
         android:gravity= "center"
         android:orientation= "vertical"  >
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
         <ImageView
             android:layout_width= "wrap_content"
             android:layout_height= "wrap_content"
             android:src= "@drawable/ic_launcher"  />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
         <TextView
             android:id= "@+id/textView"
             android:textSize= "100dip"
             android:layout_width= "wrap_content"
             android:layout_height= "wrap_content"  />
     </LinearLayout>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
</ScrollView>

注：这里并不是所有的View都能有onFling回调函数,外部需要加ScrollView !

MyGestureListener类：自定义滑动事件监听器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package  com.zhf.android_viewflipper_view;
import  android.view.GestureDetector.SimpleOnGestureListener;
import  android.view.MotionEvent;
/**
  * 自定义滑动事件监听器
  * SimpleOnGestureListener已经实现了OnGestureListener接口和OnDoubleTapListener接口，
  * 可以有选择性的复写需要的方法，提供方法onFling()作为滑动事件的回调函数
  * @author ZHF
  *
  */
public  class  MyGestureListener  extends  SimpleOnGestureListener{
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     private  OnFlingListener mOnFlingListener;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
     /**用户按下触摸屏、快速移动后松开，由1个MotionEvent ACTION_DOWN, 多个ACTION_MOVE, 1个ACTION_UP触发 **/
     @Override
     public  final  boolean  onFling( final  MotionEvent e1,  final  MotionEvent e2,
             final  float  speedX,  final  float  speedY) {
         if  (mOnFlingListener ==  null ) {
             return  super .onFling(e1, e2, speedX, speedY);
         }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
         float  XFrom = e1.getX();   //按下坐标
         float  XTo = e2.getX();
         float  YFrom = e1.getY();
         float  YTo = e2.getY();
         // 左右滑动的X轴幅度大于100，并且X轴方向的速度大于100
         if  (Math.abs(XFrom - XTo) >  100 .0f && Math.abs(speedX) >  100 .0f) {
             // X轴幅度大于Y轴的幅度
             if  (Math.abs(XFrom - XTo) >= Math.abs(YFrom - YTo)) {
                 if  (XFrom > XTo) {
                     // 下一个
                     mOnFlingListener.flingToNext();
                 }  else  {
                     // 上一个
                     mOnFlingListener.flingToPrevious();
                 }
             }
         }  else  {
             return  false ;
         }
         return  true ;
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
     /**自定义滑动的回调接口**/
     public  interface  OnFlingListener {
         void  flingToNext();   //滑动到下一页
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
         void  flingToPrevious();   //滑动到上一页
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     public  OnFlingListener getOnFlingListener() {
         return  mOnFlingListener;
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
     public  void  setOnFlingListener(OnFlingListener mOnFlingListener) {
         this .mOnFlingListener = mOnFlingListener;
     }
}


MyViewFlipper类：自定义View滑动类：监听滑动事件，并做切换视图的处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
package  com.zhf.android_viewflipper_view;
import  android.content.Context;
import  android.util.AttributeSet;
import  android.view.GestureDetector;
import  android.view.MotionEvent;
import  android.view.View;
import  android.widget.ViewFlipper;
import  com.zhf.android_viewflipper_view.MyGestureListener.OnFlingListener;
/**
  * 自定义View滑动类：监听滑动事件，并做切换视图的处理。
  * @author ZHF
  *
  */
public  class  MyViewFlipper  extends  ViewFlipper  implements  OnFlingListener {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
     //手势监听类
     private  GestureDetector mGestureDetector =  null ;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     private  OnViewFlipperListener mOnViewFlipperListener =  null ;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     public  MyViewFlipper(Context context) {
         super (context);
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     public  MyViewFlipper(Context context, AttributeSet attrs) {
         super (context, attrs);
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     public  void  setOnViewFlipperListener(OnViewFlipperListener mOnViewFlipperListener) {
         this .mOnViewFlipperListener = mOnViewFlipperListener;
         //初始化自定义滑动事件监听器
         MyGestureListener myGestureListener =  new  MyGestureListener();
         //绑定自定义的滑动监听器
         myGestureListener.setOnFlingListener( this );
         mGestureDetector =  new  GestureDetector(myGestureListener);
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     @Override
     public  boolean onInterceptTouchEvent(MotionEvent ev) {
         if  ( null  != mGestureDetector) {
             return  mGestureDetector.onTouchEvent(ev);
         }  else  {
             return  super .onInterceptTouchEvent(ev);
         }
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     /**向下一条滑动事件**/
     @Override
     public  void  flingToNext() {
         if  ( null  != mOnViewFlipperListener) {
             int  childCnt = getChildCount();
             if  (childCnt ==  2 ) {
                 removeViewAt( 1 );
             }
             addView(mOnViewFlipperListener.getNextView(),  0 );
             if  ( 0  != childCnt) {
                 setInAnimation(getContext(), R.anim.push_left_in);
                 setOutAnimation(getContext(), R.anim.push_left_out);
                 setDisplayedChild( 0 );
             }
         }
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     /**向上一条滑动事件**/
     @Override
     public  void  flingToPrevious() {
         if  ( null  != mOnViewFlipperListener) {
             int  childCnt = getChildCount();
             if  (childCnt ==  2 ) {
                 removeViewAt( 1 );
             }
             addView(mOnViewFlipperListener.getPreviousView(),  0 );
             if  ( 0  != childCnt) {
                 setInAnimation(getContext(), R.anim.push_right_in);
                 setOutAnimation(getContext(), R.anim.push_right_out);
                 setDisplayedChild( 0 );
             }
         }
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
     /**自定义View变化监听回调接口**/
     public  interface  OnViewFlipperListener {
         View getNextView();    //获取下一页View
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
         View getPreviousView();   //获取上一页View
     }
}

MainActivity2类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package  com.zhf.android_viewflipper_view;
import  com.zhf.android_viewflipper_view.MyViewFlipper.OnViewFlipperListener;
import  android.app.Activity;
import  android.os.Bundle;
import  android.view.LayoutInflater;
import  android.view.View;
import  android.widget.ScrollView;
import  android.widget.TextView;
/**
  * ViewFlipper 动态加载
  * @author ZHF
  */
public  class  MainActivity2  extends  Activity  implements  OnViewFlipperListener{
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
       private  MyViewFlipper myViewFlipper;
       private  int  currentNumber;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
     @Override
     protected  void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main2);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
         currentNumber =  1 ;   //默认页号
         myViewFlipper = (MyViewFlipper) findViewById(R.id.body_flipper);
         //给ViewFlipper绑定自定义的滑动监听器
         myViewFlipper.setOnViewFlipperListener( this );
         //初始化页面数据，即View
         myViewFlipper.addView(createView(currentNumber));
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
     }
     /**获取下一页View**/
     @Override
     public  View getNextView() {
         currentNumber = currentNumber ==  10  ?  1  : currentNumber +  1 ;
         return  createView(currentNumber);
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
     /**获取上一页View**/
     @Override
     public  View getPreviousView() {
         currentNumber = currentNumber ==  1  ?  10  : currentNumber -  1 ;
         return  createView(currentNumber);
     }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
     /**更换View数据：这里是根据页号来更换textView上的文字**/
     private  View createView( int  currentNumber) {
         LayoutInflater layoutInflater = LayoutInflater.from( this );
         ScrollView resultView = (ScrollView) layoutInflater.inflate(R.layout.flipper_view,  null );
         ((TextView) resultView.findViewById(R.id.textView)).setText(currentNumber +  "" );
         return  resultView;
     }
}

效果图：

132603593.png--向左滑动（渐变过程不好截图）--> 132604221.png

补充说明：

上述的三个类：

MyGestureListener：继承了SimpleGestureListener手势监听类， 复写了该类onFling()方法，用于监听用户按下滑动事件的处理；还自定义了滑动的回调接口OnFlingListener（包含了两个抽象方法flingToNext()，flingToPrevious）。


MyViewFlipper：是一个自定义ViewFlipper，该类首先实现和绑定了上一个类中的滑动的回调接口OnFlingListener，完成了接口中两个重要的方法。同时定义了一个View变化监听回调接口OnViewFlipperListener（包含了两个抽象方法getNextView(),getPreviousView()）。


MainActivity2：加载布局，实现监听，统一处理页面数据View和滑动事件的绑定。


三.ViewFlow类


3.1介绍：

ViewFlow不是google官方的api，它是gethub上的一个开源项目，利用ViewFlow可以产生视图切换的效果。ViewFlow 相当于 Android UI 部件提供水平滚动的 ViewGroup，使用 Adapter 进行条目绑定，例如ViewPager或是ViewFlipper。它提供了三个组件ViewFlow、FlowIndicator和TitleFlowIndicator,一般情况下，当你需要做一个滑动然而不确定view的数目时，可以考虑使用ViewFlow。如果你的view数目确定，使用Fragments 或兼容库里的ViewPager比较好 。


3.2使用:

A.首先下载ViewFlow开源库代码：

官方文档：https://github.com/pakerfeldt/android-viewflow

201334458.png

B.下载之后我们解压打开viewflow文件夹：

201922983.png

C.建项目将这三个类直接复制过来放项目中使用即可。

202404410.png







注：这里可能还需要一个styleable文件，直接将value文件夹下的attrs.xml拷入即可。

activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<? xml  version = "1.0"  encoding = "utf-8" ?>
< LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"
     xmlns:app = "http://schemas.android.com/apk/res/com.zhf.android_viewflow"
     android:layout_width = "fill_parent"
     android:layout_height = "fill_parent"
     android:orientation = "vertical"  >
     < FrameLayout
         android:layout_width = "fill_parent"
         android:layout_height = "fill_parent"
         android:orientation = "vertical"  >
         < RelativeLayout
             android:layout_width = "fill_parent"
             android:layout_height = "135dp"
             android:orientation = "vertical"  >
                                                                                                                                                                                                                                                                                                 
             < com.zhf.android_viewflow.ViewFlow
                 android:id = "@+id/viewflow"
                 android:layout_width = "fill_parent"
                 android:layout_height = "fill_parent"
                 app:sidebuffer = "3" />
         </ RelativeLayout >
         < com.zhf.android_viewflow.CircleFlowIndicator
             android:id = "@+id/viewflowindic"
             android:layout_width = "wrap_content"
             android:layout_height = "140dp"
             android:layout_alignParentBottom = "true"
             android:layout_gravity = "center_horizontal"
             app:fadeOut = "0"
             app:inactiveType = "fill"
             android:paddingTop = "125dp"  />
         <!--圆点指示器还支持activeColor、inactiveColor、activeType(填充或描边)、
             inactiveType(填充或描边)、
             fadeOut(设置圆点自动隐藏的秒数，若为0则不会自动隐藏)、
             radius(圆点的半径)等。
         -->
     </ FrameLayout >
</ LinearLayout >

注：这里需要强调一下，因为使用第三方的库组件，所以要在使用之前引入：

xmlns:app="http://schemas.android.com/apk/res/com.zhf.android_viewflow"


main_item.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<? xml  version = "1.0"  encoding = "utf-8" ?>
< LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"
     android:layout_width = "fill_parent"
     android:layout_height = "fill_parent"
     android:isScrollContainer = "true"
     android:scrollbarAlwaysDrawVerticalTrack = "true"
     android:scrollbars = "vertical"  >
<!-- isScrollContainer   设置当前View为滚动容器
     scrollbarAlwaysDrawVerticalTrack      设置是否始终显示垂直滚动条-->
     < ImageView
         android:id = "@+id/imgView"
         android:layout_width = "fill_parent"
         android:layout_height = "wrap_content"
         android:layout_gravity = "center_vertical|center_horizontal"  >
     </ ImageView >
</ LinearLayout >

MainActivity类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package  com.zhf.android_viewflow;
import  android.os.Bundle;
import  android.app.Activity;
import  android.content.res.Configuration;
public  class  MainActivity  extends  Activity {
     private  ViewFlow viewFlow;
     private  CircleFlowIndicator indic;   //页表指示器
                                                                                                                                                                                                              
     @Override
     protected  void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
                                                                                                                                                                                                                  
         viewFlow = (ViewFlow) findViewById(R.id.viewflow);
         //为其绑定适配器
         viewFlow.setAdapter( new  ImageAdapter( this ), 5 );  //初始位置5
                                                                                                                                                                                                              
         indic = (CircleFlowIndicator) findViewById(R.id.viewflowindic);
         //为viewFlow绑定页表指示器
         viewFlow.setFlowIndicator(indic);
     }
                                                                                                                                                                                                              
     /**处理转屏操作**/
     @Override
     public  void  onConfigurationChanged(Configuration newConfig) {
         super .onConfigurationChanged(newConfig);
         viewFlow.onConfigurationChanged(newConfig);
     }
}


这里还有一个图片适配器：ImageAdapter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package  com.zhf.android_viewflow;
import  com.cjf.ui.R;
import  android.content.Context;
import  android.view.LayoutInflater;
import  android.view.View;
import  android.view.ViewGroup;
import  android.widget.BaseAdapter;
import  android.widget.ImageView;
public  class  ImageAdapter  extends  BaseAdapter{
                                                                                                                                                                              
     private  LayoutInflater mInflater;
     //图片资源的id
     private  static  final  int [] ids = { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d,
         R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h};
     public  ImageAdapter(Context context) {
         this .mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     }
     @Override
     public  int  getCount() {
         // TODO Auto-generated method stub
         return  ids ==  null  ?  0  :ids.length;
     }
     @Override
     public  Object  getItem( int  position) {
         // TODO Auto-generated method stub
         return  position;
     }
     @Override
     public  long getItemId( int  position) {
         // TODO Auto-generated method stub
         return  position;
     }
     @Override
     public  View getView( int  position, View convertView, ViewGroup parent) {
                                                                                                                                                                                  
         if  (convertView ==  null ) {
             convertView = mInflater.inflate(R.layout.image_item,  null );
         }
         ((ImageView) convertView.findViewById(R.id.imgView)).setImageResource(ids[position]);
         return  convertView;
     }
}


运行一下吧！效果图：

222917441.jpg转屏后 222954776.jpg


恩，终于写完了！ 希望这篇博客能帮助到大家！好累~~j_0068.gif

三个例子的源码我已总结好（独立的三个项目，压缩在一个zip里了）

下载地址：http://down.51cto.com/data/976370

无法懂你
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android入门第31天-Android里的ViewFlipper翻转视图的使用
lifetragedy的专栏
11-18 1050
本篇给大家带了的是ViewFlipper，它是Android自带的一个多页面管理控件，且可以自动播放！ 和ViewPager不同，ViewPager是一页页的，而ViewFlipper则是一层层的，和ViewPager一样，很多时候， 用来实现进入应用后的引导页，或者用于图片轮播，本篇我们我们会使用两个例子：一个自动播放首页轮播页一个手动可左右滑动道页的轮播页来说透这个组件的使用。
安卓开发：滚动面板的使用
qubeleyZ的博客
05-10 868
手机屏幕是有限的，为了让有限的屏幕输出更多的信息，只需要用手指往上一滑就行了，那这滚动面板是如何做出来的呢？ 其实是用了ScrollView， 方法如下 <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" >
【移动开发】Android中三种超实用的滑屏方式汇总（ViewPager、ViewFlipper、ViewFlow）...
weixin_34283445的博客
10-14 230
现如今主流的Android应用中，都少不了左右滑动滚屏这项功能，（貌似现在好多人使用智能机都习惯性的有事没事的左右滑屏，也不知道在干什么。。。嘿嘿），由于前段时间项目的需要，所以也对其研究了一下，总的来说滑屏实现有三种方式：（至于其他的实现方式目前后还没碰到。。。）1.ViewPager 2.ViewFlipper 3.ViewFlow一.ViewPager官方文...
23. 【Android教程】轮播滚动视图：ViewFlipper
最新发布
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
04-13 1455
轮播视图 ViewFlipper 是 Android 从第一个版本就开始提供的 UI 控件，它能够承载多个 View，但一个时机只会有一个 View 展示在屏幕上。通过 ViewFlipper 我们可以实现很多常见的带有展示类型的功能，类似 Gallery、轮播图、导航栏、广告banner等功能，我们可以通过左右滑动、也可以设置定时自动滚动来切换 View。
android滑屏设计,安卓设计如何实现滑动屏幕出现如图的效果
weixin_34079177的博客
06-07 95
该楼层疑似违规已被系统折叠隐藏此楼查看此楼import java.util.ArrayList;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graph...
Android实现滑动的七种方法实践
diaotai的博客
08-16 6550
在讲解滑动之前，要先熟悉一下安卓的坐标系。安卓视图有两个坐标系，一个是Android坐标系，一个是视图坐标系。前者以屏幕的最左上角为原点，向右为X轴正方向，向下为Y轴正方向。后者以父视图的左上角为原点，其它与前者一致。 而获取坐标的方法也可以分为两类，View提供的获得坐标的方法和MotionEvent提高的方法。View提供的方法有getTop(),getLeft(),getBottom(),getRight()，而MotionEvent提供的方法有getX（），getY（），getRawX()，ge
比较实用的三种滑屏方式
08-28
Android中三种超实用的滑屏方式汇总（ViewPager、ViewFlipper、ViewFlow）
Android ViewFlipper/ViewSwitcher/ViewPager/VerticalViewPager/ViewFlow用法案例实现
04-19
Android ViewFlipper/ViewSwitcher/ViewPager/VerticalViewPager/ViewFlow用法案例实现 博客地址：　http://blog.csdn.net/yelangjueqi/article/details/70239345
Android viewPager的三种使用方式
12-13
Android viewPager的三种使用方式：常规左右滑动viewPager、上下滑动viewPager结合网格布局recyclerview实现电商分类入口、无需滑动viewPager结合Fragment使用RadioGroup实现单选按钮展示不同View
android实现ViewPager懒加载的三种方法
01-04
在项目中ViewPager和Fragment接口框架已经是处处可见，但是在使用中，我们肯定不希望用户在当前页面时就在前后页面的数据，...以下三种方法是我在学习和项目中尝试过的，需求实现了，但各有千秋，可结合不同场景使用
Android基于ViewPager+Fragment实现左右滑屏效果的方法
08-30
Android 滑屏效果是移动应用程序中常见的交互方式之一，实现滑屏效果的方法有多种，本文主要介绍了基于ViewPager+Fragment实现左右滑屏效果的方法。 一、ViewPager概述 ViewPager 是 Android 支持库中提供的一个...
FlipViewPager 非常酷炫的可翻动的item的Viewpager自定义控件
10-13
FlipViewPager 非常酷炫的可翻动的item的Viewpager自定义控件
最新简单挂黑链代码视频教程
12-13
最新简单挂黑链代码视频教程
Android使用ViewFlipper实现左右滑动效果面
12-04
Android使用ViewFlipper实现左右滑动效果面.
安卓自动点击器
04-11
自动点击器安卓版是一款非常好用的免root屏幕自动点击器软件，将以您选择的任何时间间隔可靠地点击或滑动您在屏幕上定位的任何位置。 　　自动点击器不需要root权限，并可用于全屏应用程序。 　　如果您需要保持游戏处于活跃状态，请反复点击相同的按钮，或者尽可能快地点击任何地方…我们将囊括所有。
实现android左右滑动效果：ViewFlipper、ViewPager、HorizontalScrollView
07-26 2401
ViewFlipper 本例来源:www.ideasandroid.com 原文: http://www.ideasandroid.com/archives/414 使用ViewFlipper来将您要来回拖动的View装在一起，然后与GestureDetector手势识别类来联动，确定要显示哪个View，加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个View，手指向右快速
android-viewpager setCurrentItem和滑动切换fragment的区别
u014385442的专栏
09-28 1819
　　　在不缓存的viewpager里面有两个fragment1,fragment2;当滑动切换的时候， 　　　fragment1滑动到fragment２生命周期是：fragment1.onstop()-&gt;fragment2.onResume(); 　　　但是当使用setCurrentItem(1)的时候，生命周期是：fragment2.onResume()-&gt;fragment1.o...
Android滑动页面ViewPager的详细总结
热门推荐
wenzhi的博客
12-12 1万+
ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它，我们可以做很多事情，从最简单的导航，到页面菜单等等。
AndroidX对ViewPager懒加载的影响及解决方案
m0_61331491的博客
03-15 964
最后的代码修改对比也是来自大神的文章，建议先看一下再过来看本文。
在Android Studio中如何设置部分区域滑屏
12-07
在Android Studio中，可以通过使用ViewPager2来实现部分区域滑屏的效果。具体步骤如下： 1.在布局文件中添加ViewPager2组件，并设置其高度和宽度。 2.创建一个Fragment列表，用于存储每个页面的内容。 3.创建一个FragmentStateAdapter适配器，并将其与ViewPager2组件关联。 4.在FragmentStateAdapter适配器中实现getItemCount()方法，返回Fragment列表的大小。 5.在FragmentStateAdapter适配器中实现createFragment()方法，返回指定位置的Fragment。 6.在Fragment中添加需要滑动的控件，并设置其高度和宽度。 7.在Fragment中实现onCreateView()方法，返回该Fragment的布局文件。 8.在Activity中获取ViewPager2组件，并将其与FragmentStateAdapter适配器关联。 9.在Activity中设置ViewPager2组件的方向和页面切换的动画效果。 10.运行程序，查看部分区域滑屏的效果。 下面是一个示例代码，演示如何在Android Studio中设置部分区域滑屏： ```xml <androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2" android:layout_width="match_parent" android:layout_height="200dp" /> ``` ```java List<Fragment> fragmentList = new ArrayList<>(); fragmentList.add(new Fragment1()); fragmentList.add(new Fragment2()); fragmentList.add(new Fragment3()); ViewPager2 viewPager2 = findViewById(R.id.viewPager2); viewPager2.setAdapter(new MyFragmentStateAdapter(this, fragmentList)); viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL); viewPager2.setPageTransformer(new ZoomOutPageTransformer()); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值