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

转载自【移动开发】Android中三种超实用的滑屏方式汇总（ViewPager、ViewFlipper、ViewFlow）-狂奔的蜗牛-51CTO博客

现如今主流的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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent" >

android:id="@+id/viewpager"

android:layout_width="fill_parent"

android:layout_height="fill_parent" />

MainActivity类：

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

}

});

}

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical"

android:background="@drawable/guide01" >

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

android:id="@+id/button_1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="点击我"

效果图：

补充说明：

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:

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent" >

android:id="@+id/body_flipper"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#f0f0f0" >

android:id="@+id/layout01"

layout="@layout/page1" />

android:id="@+id/layout02"

layout="@layout/page2" />

android:id="@+id/layout02"

layout="@layout/page3" />

android:id="@+id/layout02"

layout="@layout/page4" />

MainActivity类：

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:

android:duration="500"

android:fromXDelta="100.0%p"

android:toXDelta="0.0" />

android:duration="500"

android:fromAlpha="0.1"

android:toAlpha="1.0" />

push_left_out.xml:

android:duration="500"

android:fromXDelta="0.0"

android:toXDelta="-100.0%p" />

android:duration="500"

android:fromAlpha="1.0"

android:toAlpha="0.1" />

效果：

向左滑屏向右滑屏

补充：

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

2.2.2 动态加载（重要）

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

activity_main2.xml

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent" >

android:id="@+id/body_flipper"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#f0f0f0" >

flipper_view.xml：

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:scrollbars="none" >

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:orientation="vertical" >

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_launcher" />

android:id="@+id/textView"

android:textSize="100dip"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

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

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

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滑动类：监听滑动事件，并做切换视图的处理。

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类：

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和滑动事件的绑定。

三.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

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:layout_width="fill_parent"

android:layout_height="135dp"

android:orientation="vertical" >

android:id="@+id/viewflow"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

app:sidebuffer="3"/>

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

inactiveType(填充或描边)、

fadeOut(设置圆点自动隐藏的秒数，若为0则不会自动隐藏)、

radius(圆点的半径)等。

-->

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

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

main_item.xml

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:isScrollContainer="true"

android:scrollbarAlwaysDrawVerticalTrack="true"

android:scrollbars="vertical" >

scrollbarAlwaysDrawVerticalTrack 设置是否始终显示垂直滚动条-->

android:id="@+id/imgView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical|center_horizontal" >

MainActivity类

package com.zhf.android_viewflow;

import android.os.Bundle;

import android.app.Activity;

import android.content.res.Configuration;

public class MainActivity extends Activity {

private ViewFlow viewFlow;

private CircleFlowIndicator indic; //页表指示器

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

viewFlow = (ViewFlow) findViewById(R.id.viewflow);

//为其绑定适配器

viewFlow.setAdapter(new ImageAdapter(this),5); //初始位置5

indic = (CircleFlowIndicator) findViewById(R.id.viewflowindic);

//为viewFlow绑定页表指示器

viewFlow.setFlowIndicator(indic);

}

/**处理转屏操作**/

@Override

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

viewFlow.onConfigurationChanged(newConfig);

}

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

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;

}

运行一下吧！效果图：

转屏后

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,393评论 5赞 467
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,790评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,391评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,703评论 1赞 270
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,613评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,003评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,507评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,158评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,300评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,256评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,274评论 1赞 328
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,984评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,569评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,662评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,899评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,268评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,840评论 2赞 339

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

推荐阅读更多精彩内容