# 【移动开发】Android中三种超实用的滑屏方式汇总（ViewPager、ViewFlipper、ViewFlow）

+关注继续查看

1.ViewPager 2.ViewFlipper 3.ViewFlow

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" /> 

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 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();         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();                 }         });     } }

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24  <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="点击我"         >                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

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

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

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

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" />                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

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  <set xmlns:android="http://schemas.android.com/apk/res/android" >           

push_left_out.xml:

 1 2 3 4 5 6 7 8 9 10 11  <set xmlns:android="http://schemas.android.com/apk/res/android" >           

2.2.2 动态加载重要

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" >      

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                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

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;     } }

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

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

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

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

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开源库代码：

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

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

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  <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"/>                  <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" />               

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  <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" >      <ImageView         android:id="@+id/imgView"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_gravity="center_vertical|center_horizontal" >      

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);     } }

 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;     } }

本文转自zhf651555765 51CTO博客，原文链接：http://blog.51cto.com/smallwoniu/1308959，如需转载请自行联系原作者

7289 0

25921 0

11066 0

11682 0
windows server 2008阿里云ECS服务器安全设置

8125 0

4451 0

5871 0

20973 0
+关注
21119

0

《Nacos架构&原理》

《看见新力量：二》电子书