Android 实现滑动翻页---使用ViewFlipper

最新推荐文章于 2013-05-11 16:46:00 发布
最新推荐文章于 2013-05-11 16:46:00 发布
阅读量111 收藏
点赞数
文章标签： 移动开发 ui java

屏幕切换指的是在同一个Activity内屏幕见的切换，最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。


通过查看OPhone API文档可以发现，有个android.widget.ViewAnimator类继承至FrameLayout，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。该类有如下几个和动画相关的函数：
l setInAnimation：设置View进入屏幕时候使用的动画，该函数有两个版本，一个接受单个参数，类型为android.view.animation.Animation；一个接受两个参数，类型为Context和int，分别为Context对象和定义Animation的resourceID。
  • setOutAnimation: 设置View退出屏幕时候使用的动画，参数setInAnimation函数一样。
  • showNext： 调用该函数来显示FrameLayout里面的下一个View。
  • showPrevious： 调用该函数来显示FrameLayout里面的上一个View。
一般不直接使用ViewAnimator而是使用它的两个子类ViewFlipper和ViewSwitcher。ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果，可以一次指定也可以每次切换的时候都指定单独的效果。该类额外提供了如下几个函数：
  • isFlipping： 用来判断View切换是否正在进行
  • setFilpInterval：设置View之间切换的时间间隔
  • startFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行
  • stopFlipping: 停止View切换
ViewSwitcher 顾名思义Switcher特指在两个View之间切换。可以通过该类指定一个ViewSwitcher.ViewFactory 工程类来创建这两个View。该类也具有两个子类ImageSwitcher、TextSwitcher分别用于图片和文本切换。
在教程中通过示例介绍ViewFlipper 的使用，其他的使用方式是类似的。详细信息可以参考文档：

现在我就来写一个使用ViewFlipper来实现页面切换的功能新建一个项目，如下图：


step1:设计程序的UI界面 main.xml

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ViewFlipper android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="@+id/viewFipper">
<!-- 第1页 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第1页"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


<!-- 第2页 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#FFFFFF"
android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第2页"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


<!-- 第3页 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#00FF00"
android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第3页"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


<!-- 第4页 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#FF0000"
android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第4页"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


<!-- 第5页 -->
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#FFFF00"
android:gravity="center">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="第5页"
android:textSize="60dip" android:gravity="center"/>
</LinearLayout>


</ViewFlipper>
</LinearLayout>
</span>

说明：

  • 使用RelativeLayout做父容器，添加按钮在ViewFlipper顶部；
  • ViewFlipper的每个子页面并列于该View内；
  • ViewFlipper的每个子页面显示一个TextView；
step2:设置好页面切换的时候的动画效果，在切换动画/res/anim/目录下的动画文件

enter_left_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:duration="500"
/>
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.1"
/>
</set>

enter_right_to_left.xmlenter_right_to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="100%p"
android:toXDelta="0"
android:duration="500"
/>
<alpha
android:duration="500"
android:fromAlpha="0.1"
android:toAlpha="1.0"
/>
</set>

exit_left_to_right.xmlexit_left_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="500"
/>
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.1"
/>
</set>

exit_right_to_left.xmlexit_right_to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="0" android:toXDelta="-100%p"
android:duration="500" />
<alpha android:duration="500" android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>

step3:MainActivity.java

<span style="font-size:12px;">package cn.roco.animation;


import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;


public class MainActivity extends Activity {


private ViewFlipper viewFlipper;
/** 用于记录按下屏幕时刻的x坐标 */
private float startX;
/** 用于记录离开屏幕时刻的x坐标 */
private float endX;


private Animation enter_left_to_right;
private Animation exit_left_to_right;


private Animation enter_right_to_left;
private Animation exit_right_to_left;


/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);


getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN); //请求全屏
getWindow().requestFeature(Window.FEATURE_NO_TITLE); //请求没有标题栏


setContentView(R.layout.main);


viewFlipper = (ViewFlipper) this.findViewById(R.id.viewFipper);
/** 从左到右的两个动画 */
enter_left_to_right = AnimationUtils.loadAnimation(this,
R.anim.enter_left_to_right);
exit_left_to_right = AnimationUtils.loadAnimation(this,
R.anim.exit_left_to_right);
/** 从右到左的两个动画 */
enter_right_to_left = AnimationUtils.loadAnimation(this,
R.anim.enter_right_to_left);
exit_right_to_left = AnimationUtils.loadAnimation(this,
R.anim.exit_right_to_left);
}


@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
startX = event.getX();
break;
}
case MotionEvent.ACTION_UP: {
endX = event.getX();
if (endX > startX) {// 表示向右滑动
showNextView();
} else if (endX < startX) {// 表示向左滑动
showPreviousView();
}
break;
}
}
return super.onTouchEvent(event);
}


/**
* 显示前一页
*/
private void showPreviousView() {
// 动画效果
viewFlipper.setInAnimation(enter_right_to_left);
viewFlipper.setOutAnimation(exit_right_to_left);
viewFlipper.showPrevious();
}



/**
* 显示下一页
*/
private void showNextView() {
// 动画效果
viewFlipper.setInAnimation(enter_left_to_right);
viewFlipper.setOutAnimation(exit_left_to_right);
viewFlipper.showNext();
}
}</span>

step4:AndroidManifest.xml

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cn.roco.animation" android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="8" />

<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity" android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest></span>

step5:运行效果



iteye_18800
关注
TabHost + ViewFlipper实现滑动翻页
06-18
使用TabHost与ViewFlipper结合实现滑动翻页效果，支持tab背景图片自动切换，最简化的代码
我的Android进阶之旅------>Android 实现滑动翻页---使用ViewFlipper
移动编程
04-12 171
屏幕切换指的是在同一个Activity内屏幕见的切换，最长见的情况就是在一个FrameLayout内有多个页面，比如一个系统设置页面；一个个性化设置页面。 通过查看OPhone API文档可以发现，有个android.widget.ViewAnimator类继承至FrameLayout，ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。该类有如下几...
【Android 界面效果2】ViewFlipper实现滑动翻页
weixin_30430169的博客
05-11 276
ViewFlippe 原文：http://www.cnblogs.com/lea-fu/p/3298827.html 　　1）View切换的控件—ViewFlipper介绍 　　　　ViewFilpper类继承于ViewAnimator类。而ViewAnimator类继承于FrameLayout。 　　　　查看ViewAnimator类的源码可以看出此类的作用主要是...
使用ViewFlipper + gridview 实现滑动翻页
810364804
04-30 223
1.添加viewFlipper控件，实现OnGestureDetector接口 2.viewFlipper.addView() 3.重载onFling()进行手势判断4.重载activity和viewFlipper中子view的OnTouchEvent()事件 gridview中item能监听触摸事件： GridView gridview = new GridView(HomeActi...
Android中实现滑动翻页—使用ViewFlipper
jingwenjingwen的专栏
02-10 411
有一些场景，我们需要向用户展示一系列的页面。比如我们正在开发一个看漫画的应用，可能就需要向用户展示一张一张的漫画图片，用户使用手指滑动屏幕，可以在前一幅漫画和后一幅漫画之间切换。这个时候ViewFlipper就是一个很好的选择。 1）View切换的控件—ViewFlipper介绍 ViewFilpper类继承于ViewAnimator类。而ViewAnimator类继承于FrameLayout...
解析Android中实现滑动翻页之ViewFlipper的使用详解
09-05
在这种情况下，`ViewFlipper`是一个非常实用的控件，它提供了方便的视图切换功能，并且可以配合手势识别来实现平滑的滑动翻页体验。 `ViewFlipper`类是`ViewAnimator`的子类，而`ViewAnimator`又继承自`FrameLayout...
android中使用ViewFlipper实现滑动翻页示例
09-04
在Android开发中，ViewFlipper是一个非常有用的布局控件，它允许我们轻松地实现滑动翻页的效果。这个示例将向我们展示如何在应用程序中使用ViewFlipper来创建一个动态翻页界面，使得用户可以通过手势或编程方式切换...
Android使用ViewFlipper实现图片切换功能
08-29
"Android 使用 ViewFlipper 实现图片切换功能" Android 使用 ViewFlipper 实现图片切换功能是 Android 应用程序开发中的一种常见需求。ViewFlipper 是 Android 中的一个控件，能够实现图片的滑动切换功能。下面将...
Android源码-使用ViewFlipper+GestureDetector实现划动翻页
05-17
这些代码为我们展示了如何结合使用`ViewFlipper`和`GestureDetector`来处理不同的手势事件，实现划动翻页的功能。通过对这些代码的学习和理解，开发者可以进一步提升自己在Android手势识别和视图切换方面的技能。
Android ViewFlipper实现页面的滑动切换
04-08
NULL 博文链接：https://topmanopensource.iteye.com/blog/1596067
android 左右滑动翻页
01-16
android 左右滑动翻页
Android 滑动效果 华丽翻页效果
04-22
Android 滑动效果 华丽翻页效果 Pager
android滑动翻页主界面
04-09
android左右滑动翻页主界面，为什么非要20个字以上描述啊
android 上下平滑滑动翻页
09-18
实现手势滑动平滑翻页，和ViewFlipper不同，能显示出拖动时的过渡效果。
android 界面开发： 图片、界面滑动翻页效果(ViewPager)
k
08-07 5994
我们见过各种软件在打开的时候都会有几页图片要滚动， 如微信。 这种效果其实可以用ViewPager来实现。   首先我们要先载入一个android-support-v4.jar 的包.   这个包是谷歌放出的特殊包。好像是在2.1以后才能使用的。   下载地址： http://download.csdn.net/detail/knowheart/4483482   实现这个效果我们需要
ViewFlipper翻页效果
09-11
ViewFlipper加上动画效果实现数字的简单翻页效果
android左右滑动翻页查看图片
10-31
基于android手势监控接口，实现左右滑动查看图片
ViewFlipper简单实现横屏滑动
12-09
ViewFlipper简单实现横屏滑动 屏幕局部滑动
Android手势滑动切换ViewFlipper页面实现
"Android屏幕切换涉及到在同一个Activity内切换不同的视图，通常用于实现滑动翻页效果。此技术主要通过GestureDetector和OnGestureListener监听滑动事件，结合ViewFlipper等组件来完成。" 在Android开发中，屏幕...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值