我的Android进阶之旅------>Android使用ViewFlipper实现滑动翻页

屏幕切换指的是在同一个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 的使用，其他的使用方式是类似的。详细信息可以参考文档：

http://androidappdocs-staging.appspot.com/reference/android/widget/ViewAnimator.html

 

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

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

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

说明：

  • 使用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

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

 step4:AndroidManifest.xml

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

 

 step5:运行效果

               

                         

 

 ==================================下面看一个gif动画===========================================

                       

附注：通过手势来切换

package cn.roco.gesture;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.MotionEvent;
import android.widget.ViewFlipper;
/**
 * 通过手势切换图片
 */
public class GestureFlipActivity extends Activity implements OnGestureListener{
	private ViewFlipper viewFlipper;
	//定义手势检测器实例
	GestureDetector detector;
	//定义动画
	private Animation enter_left_to_right;
	private Animation exit_left_to_right;

	private Animation enter_right_to_left;
	private Animation exit_right_to_left;
	//定义手势动作两点之间的最小距离
	final int FLIP_DISTANCE=50;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		//创建手势检测器
		detector=new GestureDetector(this);
		//获得ViewFlipper实例
		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 onDown(MotionEvent e) {
		return false;
	}

	@Override
	public void onShowPress(MotionEvent e) {

	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		return false;
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		return false;
	}

	@Override
	public void onLongPress(MotionEvent e) {

	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// 将该Activity上的触碰时间交个 GestureDetector处理
		return detector.onTouchEvent(event);
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		/**
		 * 如果第1个触点事件的x坐标大于第2个触点事件的x坐标超过 FLIP_DISTANCE
		 * 也就是手势从右向左滑动
		 */
		if (e1.getX()-e2.getX()>FLIP_DISTANCE) {
			showPreviousView();
			return true;
		}
		/**
		 * 如果第2个触点事件的x坐标大于第1个触点事件的x坐标超过 FLIP_DISTANCE
		 * 也就是手势从左向右滑动
		 */
		else if (e2.getX()-e1.getX()>FLIP_DISTANCE) {
			showNextView();
			return true;
		}

		return false;
	}

	/**
	 * 显示前一页
	 */
	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();
	}
}

==================================================================================================

  作者：欧阳鹏  欢迎转载，与人分享是进步的源泉！

  转载请保留原文地址：http://blog.csdn.net/ouyang_peng

==================================================================================================

 

时间： 2024-03-17 01:05:04

我的Android进阶之旅------&gt;Android使用ViewFlipper实现滑动翻页的相关文章

我的Android进阶之旅------&amp;gt;Android利用温度传感器实现带动画效果的电子温度计

     要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight属性的合理运用,关于android:layout_weight属性的讲解,可以参考:<我的Android进阶之旅------>关于android:layout_weight属性的一个面试题> 地址为:http://blog.csdn.net/ouyang_peng/article/

我的Android进阶之旅------&amp;gt;Android疯狂连连看游戏的实现之状态数据模型(三)

对于游戏玩家而言,游戏界面上看到的"元素"千变万化:但是对于游戏开发者而言,游戏界面上的元素在底层都是一些数据,不同数据所绘制的图片有所差异而已.因此建立游戏的状态数据模型是实现游戏逻辑的重要步骤. 1.定义数据模型 连连看的界面是一个NxM的"网格",每个网格上显示一张图片.而这个网格只需要一个二维数组来定义即可,而每个网格上所显示的图片,对于底层数据模型来说,不同的图片对于着不同的数值即可. 对于上图所示的数据模型,只要让数值为0的网格上不绘制图片,其他数值的网

我的Android进阶之旅------&amp;gt;Android疯狂连连看游戏的实现之开发游戏界面(二)

连连看的游戏界面十分简单,大致可以分为两个区域: 游戏主界面区 控制按钮和数据显示区 1.开发界面布局 本程序使用一个RelativeLayout作为整体的界面布局元素,界面布局上面是一个自定义组件,下面是一个水平排列的LinearLayout. 下面是本程序的布局文件:/res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=

我的Android进阶之旅------&amp;gt;Android疯狂连连看游戏的实现之加载界面图片和实现游戏Activity(四)

正如在<我的Android进阶之旅------>Android疯狂连连看游戏的实现之状态数据模型(三)>一文中看到的,在AbstractBoard的代码中,当程序需要创建N个Piece对象时,程序会直接调用ImageUtil的getPlayImages()方法去获取图片,该方法会随机从res/drawable目录中取得N张图片. 下面是res/drawable目录视图: 为了让getPlayImages()方法能随机从res/drawable目录中取得N张图片,具体实现分为以下几步: 通

我的Android进阶之旅------&amp;gt; Android为TextView组件中显示的文本添加背景色

通过上一篇文章 我的Android进阶之旅------> Android在TextView中显示图片方法 (地址:http://blog.csdn.net/ouyang_peng/article/details/46916963)      我们学会了在TextView中显示图片的方法,现在我们来学习如何为TextView组件中显示的文本添加背景色.要求完成的样子如图所示: 首先来学习使用BackgroundColorSpan对象设置文字背景色,代码如下: TextView textView=(

我的Android进阶之旅------&amp;gt;Android权限参考大全

访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permission.ACCESS_COARSE_LOCATION,通过WiFi或移动基站的方式获取用户错略的经纬度信息,定位精度大概误差在30~1500米 获取精确位置 android.permission.ACCESS_FINE_LOCATION,通过GPS芯片接收卫星的定位信息,定位精度达10米以内 访问定

我的Android进阶之旅------&amp;gt;Android颜色值（#AARRGGBB）透明度百分比和十六进制对应关系以及计算方法

我的Android进阶之旅-->Android颜色值(RGB)所支持的四种常见形式 透明度百分比和十六进制对应关系表格 透明度 十六进制 100% FF 99% FC 98% FA 97% F7 96% F5 95% F2 94% F0 93% ED 92% EB 91% E8 90% E6 89% E3 88% E0 87% DE 86% DB 85% D9 84% D6 83% D4 82% D1 81% CF 80% CC 79% C9 78% C7 77% C4 76% C2 75% B

我的Android进阶之旅------&amp;gt;Android颜色值(RGB)所支持的四种常见形式

Android中颜色值是通过红(Red).绿(Green).蓝(Blue)三原色,以及一个透明度(Alpha)值来表示的,颜色值总是以井号(#)开头,接下来就是Alpha-Red-Green-Blue的形式.其中Alpha值可以省略,如果省略了Alpha的值,那么该颜色默认是完全不透明的. Android的颜色值支持常见的四种形式如下所示: #RGB:分别指定红.绿.蓝三原色的值(只支持0~f这16级颜色)来代表颜色. #ARGB:分别指定红.绿.蓝三原色的值(只支持0~f这16级颜色)及透明度

我的Android进阶之旅------&amp;gt;Android疯狂连连看游戏的实现之游戏效果预览(一)

今天看完了李刚老师的<疯狂Android讲义>一书中的第18章<疯狂连连看>,从而学会了如何编写一个简单的Android疯狂连连看游戏.      开发这个流行的小游戏,难度适中,而且能充分激发学习热情,适合Android初学者来说是一个不错的选择.对于该游戏的开发,需要重点掌握单机游戏的界面分析和数据建模能力:游戏玩家严重看到的是游戏界面,但是在开发者眼中看到的应该是数据模型.除此之外,单机游戏通常需要一个比较美观的界面,需要通过自定义View来实现游戏主界面.      开发连

我的Android进阶之旅------&amp;gt;Android疯狂连连看游戏的实现之实现游戏逻辑(五)

在上一篇<我的Android进阶之旅------>Android疯狂连连看游戏的实现之加载界面图片和实现游戏Activity(四)>中提到的两个类: GameConf:负责管理游戏的初始化设置信息. GameService:负责游戏的逻辑实现. 其中GameConf的代码如下:cn\oyp\link\utils\GameConf.java package cn.oyp.link.utils; import android.content.Context; /** * 保存游戏配置的对象