(转)【移动开发】Android中三种超实用的滑屏方式汇总(ViewPager、ViewFlipper、ViewFlow)
转自:
http://smallwoniu.blog.51cto.com/3911954/1308959
现如今主流的Android应用中,都少不了左右滑动滚屏这项功能,(貌似现在好多人使用智能机都习惯性的有事没事的左右滑屏,也不知道在干什么。。。 嘿嘿),由于前段时间项目的需要,所以也对其研究了一下,总的来说滑屏实现有三种方式:(至于其他的实现方式目前后还没碰到。。。)
嘿嘿),由于前段时间项目的需要,所以也对其研究了一下,总的来说滑屏实现有三种方式:(至于其他的实现方式目前后还没碰到。。。)
1.ViewPager 2.ViewFlipper 3.ViewFlow
一.ViewPager
官方文档介绍:http://developer.android.com/reference/android/support/v4/view/ViewPager.html

根据继承关系我们可以看出,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 | <RelativeLayoutxmlns: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 | packagecomzhf.android_viewpager;importjava.util.ArrayList;importjava.util.List;importandroid.os.Bundle;importandroid.app.Activity;importandroid.support.v4.view.ViewPager;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.widget.Button;importandroid.widget.TextView;importandroid.widget.Toast;/** * 主界面:ViewPagerViewPager不在android sdk 自带jar包中,来源google 的补充组件android-support-v4.jar */publicclassViewPagerActivity extendsActivity {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         privateViewPager mViewPager;    List<View> viewList;    @Override    protectedvoidonCreate(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 = newArrayList<View>();        viewList.add(v1);        viewList.add(v2);        viewList.add(v3);        //实例化适配器        mViewPager = (ViewPager) findViewById(R.id.viewpager);        mViewPager.setAdapter(newMyPagerAdapter(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(newOnClickListener() {            publicvoidonClick(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 | <?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns: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> | 
效果图:



补充说明:
1.这里我们用了Layout作为每个page的填充数据,其实官方文档说ViewPager+Fragment配合使用更好
2.每个页面的响应事件我们可以在OnPageChangeListener监听器类中进行捕获和处理对应事件。
二.ViewFlipper
官方文档:http://developer.android.com/reference/android/widget/ViewFlipper.html

2.1 介绍:ViewFilpper控件是系统自带控件之一,主要用于在同一个屏幕间的切换及设置动画效果、间隔时间,且可以自动播放。
顺便提及一下,View动画关系图:

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 | <RelativeLayoutxmlns: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 | packagecom.zhf.android_viewflipper_view;importandroid.os.Bundle;importandroid.app.Activity;importandroid.view.MotionEvent;importandroid.view.View;importandroid.view.View.OnTouchListener;importandroid.view.animation.AnimationUtils;importandroid.widget.ViewFlipper;/** * ViewFlipper 静态加载 * @author ZHF**/publicclassMainActivity extendsActivity implementsOnTouchListener{    privateViewFlipper viewFlipper;    privatefloat touchDownX;  // 手指按下的X坐标    privatefloat touchUpX;  //手指松开的X坐标                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        @Override    publicvoidonCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            viewFlipper = (ViewFlipper) findViewById(R.id.body_flipper);        viewFlipper.setOnTouchListener(this);    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        @Override    publicboolean onTouch(View v, MotionEvent event) {        if(event.getAction() == MotionEvent.ACTION_DOWN) {            // 取得左右滑动时手指按下的X坐标            touchDownX = event.getX();            returntrue;        } elseif(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            } elseif(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();            }            returntrue;        }        returnfalse;    }} | 
动画配置文件(右进右出同理,略):
push_left_in.xml:
| 1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0"encoding="utf-8"?><setxmlns: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"?><setxmlns: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> | 
效果:


向左滑屏 向右滑屏
补充:
上述的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 | <RelativeLayoutxmlns: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 | packagecom.zhf.android_viewflipper_view;importandroid.view.GestureDetector.SimpleOnGestureListener;importandroid.view.MotionEvent;/** * 自定义滑动事件监听器 * SimpleOnGestureListener已经实现了OnGestureListener接口和OnDoubleTapListener接口, * 可以有选择性的复写需要的方法,提供方法onFling()作为滑动事件的回调函数 * @author ZHF * */publicclassMyGestureListener extendsSimpleOnGestureListener{                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    privateOnFlingListener mOnFlingListener;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  /**用户按下触摸屏、快速移动后松开,由1个MotionEvent ACTION_DOWN, 多个ACTION_MOVE, 1个ACTION_UP触发 **/    @Override    publicfinalbooleanonFling(finalMotionEvent e1, finalMotionEvent e2,            finalfloatspeedX, finalfloatspeedY) {        if(mOnFlingListener == null) {            returnsuper.onFling(e1, e2, speedX, speedY);        }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      floatXFrom = e1.getX();  //按下坐标        floatXTo = e2.getX();        floatYFrom = e1.getY();        floatYTo = 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{            returnfalse;        }        returntrue;    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  /**自定义滑动的回调接口**/    publicinterfaceOnFlingListener {        voidflingToNext();  //滑动到下一页                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      voidflingToPrevious();  //滑动到上一页    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    publicOnFlingListener getOnFlingListener() {        returnmOnFlingListener;    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  publicvoidsetOnFlingListener(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 | packagecom.zhf.android_viewflipper_view;importandroid.content.Context;importandroid.util.AttributeSet;importandroid.view.GestureDetector;importandroid.view.MotionEvent;importandroid.view.View;importandroid.widget.ViewFlipper;importcom.zhf.android_viewflipper_view.MyGestureListener.OnFlingListener;/** * 自定义View滑动类:监听滑动事件,并做切换视图的处理。 * @author ZHF * */publicclassMyViewFlipper extendsViewFlipper implementsOnFlingListener {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        //手势监听类    privateGestureDetector mGestureDetector = null;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    privateOnViewFlipperListener mOnViewFlipperListener = null;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    publicMyViewFlipper(Context context) {        super(context);    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    publicMyViewFlipper(Context context, AttributeSet attrs) {        super(context, attrs);    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    publicvoidsetOnViewFlipperListener(OnViewFlipperListener mOnViewFlipperListener) {        this.mOnViewFlipperListener = mOnViewFlipperListener;        //初始化自定义滑动事件监听器        MyGestureListener myGestureListener = newMyGestureListener();        //绑定自定义的滑动监听器        myGestureListener.setOnFlingListener(this);        mGestureDetector = newGestureDetector(myGestureListener);    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    @Override    publicboolean onInterceptTouchEvent(MotionEvent ev) {        if(null!= mGestureDetector) {            returnmGestureDetector.onTouchEvent(ev);        } else{            returnsuper.onInterceptTouchEvent(ev);        }    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    /**向下一条滑动事件**/    @Override    publicvoidflingToNext() {        if(null!= mOnViewFlipperListener) {            intchildCnt = 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    publicvoidflingToPrevious() {        if(null!= mOnViewFlipperListener) {            intchildCnt = 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变化监听回调接口**/    publicinterfaceOnViewFlipperListener {        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 | packagecom.zhf.android_viewflipper_view;importcom.zhf.android_viewflipper_view.MyViewFlipper.OnViewFlipperListener;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.widget.ScrollView;importandroid.widget.TextView;/** * ViewFlipper 动态加载 * @author ZHF */publicclassMainActivity2 extendsActivity implementsOnViewFlipperListener{                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       privateMyViewFlipper myViewFlipper;      privateintcurrentNumber;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     @Override    protectedvoidonCreate(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    publicView getNextView() {        currentNumber = currentNumber == 10? 1: currentNumber + 1;        returncreateView(currentNumber);    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   /**获取上一页View**/    @Override    publicView getPreviousView() {        currentNumber = currentNumber == 1? 10: currentNumber - 1;        returncreateView(currentNumber);    }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   /**更换View数据:这里是根据页号来更换textView上的文字**/    privateView createView(intcurrentNumber) {        LayoutInflater layoutInflater = LayoutInflater.from(this);        ScrollView resultView = (ScrollView) layoutInflater.inflate(R.layout.flipper_view, null);        ((TextView) resultView.findViewById(R.id.textView)).setText(currentNumber + "");        returnresultView;    }} | 
效果图:
 --向左滑动(渐变过程不好截图)-->
--向左滑动(渐变过程不好截图)--> 
补充说明:
上述的三个类:
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

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

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

注:这里可能还需要一个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 | <?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns: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 | <?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns: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 | packagecom.zhf.android_viewflow;importandroid.os.Bundle;importandroid.app.Activity;importandroid.content.res.Configuration;publicclassMainActivity extendsActivity {    privateViewFlow viewFlow;    privateCircleFlowIndicator indic;  //页表指示器                                                                                                                                                                                                                 @Override    protectedvoidonCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                                                                                                                                                                                                                         viewFlow = (ViewFlow) findViewById(R.id.viewflow);        //为其绑定适配器        viewFlow.setAdapter(newImageAdapter(this),5); //初始位置5                                                                                                                                                                                                                     indic = (CircleFlowIndicator) findViewById(R.id.viewflowindic);        //为viewFlow绑定页表指示器        viewFlow.setFlowIndicator(indic);    }                                                                                                                                                                                                                 /**处理转屏操作**/    @Override    publicvoidonConfigurationChanged(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 | packagecom.zhf.android_viewflow;importcom.cjf.ui.R;importandroid.content.Context;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.BaseAdapter;importandroid.widget.ImageView;publicclassImageAdapter extendsBaseAdapter{                                                                                                                                                                                 privateLayoutInflater mInflater;    //图片资源的id    privatestaticfinalint[] 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};    publicImageAdapter(Context context) {        this.mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);    }    @Override    publicintgetCount() {        // TODO Auto-generated method stub        returnids == null? 0:ids.length;    }    @Override    publicObjectgetItem(intposition) {        // TODO Auto-generated method stub        returnposition;    }    @Override    publiclong getItemId(intposition) {        // TODO Auto-generated method stub        returnposition;    }    @Override    publicView getView(intposition, View convertView, ViewGroup parent) {                                                                                                                                                                                         if(convertView == null) {            convertView = mInflater.inflate(R.layout.image_item, null);        }        ((ImageView) convertView.findViewById(R.id.imgView)).setImageResource(ids[position]);        returnconvertView;    }} | 
运行一下吧!效果图:
 转屏后
转屏后 
恩,终于写完了! 希望这篇博客能帮助到大家!好累~~
三个例子的源码我已总结好(独立的三个项目,压缩在一个zip里了)
下载地址:http://down.51cto.com/data/976370
(转)【移动开发】Android中三种超实用的滑屏方式汇总(ViewPager、ViewFlipper、ViewFlow)的更多相关文章
- Android中三种超实用的滑屏方式汇总(转载)
		Android中三种超实用的滑屏方式汇总 现如今主流的Android应用中,都少不了左右滑动滚屏这项功能,(貌似现在好多人使用智能机都习惯性的有事没事的左右滑屏,也不知道在干什么...嘿嘿),由于 ... 
- Java Web开发Tomcat中三种部署项目的方法
		第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加: <Context path="/hello" docBase ... 
- Android中三种计时器Timer、CountDownTimer、handler.postDelayed的使用
		在android开发中,我们常常需要用到计时器,倒计时多少秒后再执行相应的功能,下面我就分别来讲讲这三种常用的计时的方法. 一.CountDownTimer 该类是个抽象类,如果要使用这个类中的方法, ... 
- Android 中三种启用线程的方法
		在多线程编程这块,我们经常要使用Handler(处理),Thread(线程)和Runnable这三个类,那么他们之间的关系你是否弄清楚了呢? 首先说明Android的CPU分配的最小单元是线程,Han ... 
- Android中三种onClick事件的实现与对比
		方式一:在activity的onCreate()方法中,嵌入如下代码: Button button = (Button)findViewById(R.id.button1); button.setOn ... 
- iOS开发UI篇—iOS开发中三种简单的动画设置
		iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ... 
- 转-Web Service中三种发送接受协议SOAP、http get、http post
		原文链接:web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 一.web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 在web服务中,有三种可供选择的发 ... 
- Spring中三种配置Bean的方式
		Spring中三种配置Bean的方式分别是: 基于XML的配置方式 基于注解的配置方式 基于Java类的配置方式 一.基于XML的配置 这个很简单,所以如何使用就略掉. 二.基于注解的配置 Sprin ... 
- 深入浅出spring IOC中三种依赖注入方式
		深入浅出spring IOC中三种依赖注入方式 spring的核心思想是IOC和AOP,IOC-控制反转,是一个重要的面向对象编程的法则来消减计算机程序的耦合问题,控制反转一般分为两种类型,依赖注入和 ... 
随机推荐
- How to Notify Command to evaluate in mvvmlight
			How to Raize Command to evalituate in mvvm In mvvmlight, we bind our control to the relaycommand obj ... 
- 2.Modelsim打开时出现的Error
			Modelsim之error “unable to check out a viewer license necessary for use of the modelsim graph.Vsim is ... 
- oracle odbc配置
			oracle odbc配置 Win7 64位 下安装oracle odbc 不能使用控制面板中 “管理工具”->“数据源(OBDC)”中安装数据源. 而要在“ 运行” 中输入 C:\Windo ... 
- Kinect帮助文档翻译之二 手势
			使用或创建手势 有两种方法可以将手势识别添加到你的unity项目中.第一种:找到KinectManager组件,在例子中它被附在MainCamera上.在组件中有两个列表的属性“Player1 Ges ... 
- ionic:Build mobile apps faster with the web technologies you know and love
			http://ionicframework.com/getting-started/ 5 Ionic Framework App Development Tips and Tricks http:// ... 
- Redis基础教程
			说明:本文中涉及的代码是c#所写,连接redis的第三方驱动为ServiceStack.Redis.连接redis的客户端软件为redis-desktop-manager. 一.Redis是什么 Re ... 
- windows和linux环境下制作U盘启动盘
			新笔记本上,要装xp的系统,100%会破坏原有的Linux系统,因为安装xp的时候会自动覆盖硬盘的主引导扇区,这个扇区一旦被重写,那么原有的linux根本就启动不了. 要想玩linux和xp双系统,一 ... 
- hive搭建配置
			下载cd /data0/software/hivewget http://mirror.bit.edu.cn/apache/hive/hive-0.12.0/hive-0.12.0-bin.tar.g ... 
- Node.js 学习(三) NPM 使用介绍
			NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并 ... 
- MySQL中求年龄
			时间函数: 1.curdate() --- 当前系统日期 调取: select curdate() 2.curtime() --- 当前系统时间 调取: select curtime() 3.now( ... 
