翻转视图ViewFlipper快速打造引导页和轮播图
前面两期学习了 ViewAnimator及其子类ViewSwitcher的使用，以及ViewSwitcher的子类ImageSwitcher和TextSwitcher的使用，你都掌握了吗？本期我们一起来学习ViewAnimator另一个子类 ViewFlipper组件的使用。
一、ViewFlipper概述
ViewFlipper组件继承了 ViewAnimator，它可调用addView(View v)添加多个组件，一旦向 ViewFlipper中添加了多个组件之后，ViewFlipper就可使用动画控制多个组件之间的切换效果。
ViewFlipper与前面介绍的AdapterViewFlipper有较大的相似性，它们可以控制组件切换的动画效果。它们的区别是：ViewFlipper需要开发者通过addView(View v)添加多个View，而 AdapterViewFlipper则只要传入一个Adapter，Adapter将会负责提供多个View。因此ViewFlipper 可以指定与 AdapterViewFlipper 相同的 XML 属性。
ViewFlipper组件的一些常用方法如下：
- setInAnimation：设置View进入屏幕时使用的动画。
- setOutAnimation：设置View退出屏幕时使用的动画。
- showNext：调用该方法来显示ViewFlipper里的下一个View。
- showPrevious：调用该方法来显示ViewFlipper的上一个View。
- setFilpInterval：设置View之间切换的时间间隔。
- setFlipping：使用上面设置的时间间隔来开始切换所有的View，切换会循环进行。
- stopFlipping：停止View切换。
二、ViewFlipper示例
接下来通过一个简单的示例程序来学习ViewFlipper的使用。
继续使用WidgetSample工程的advancedviewsample模块，在app/main/res/layout/目录下创建viewflipper_layout.xml文件，在其中填充如下代码片段：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ViewFlipper
android:id="@+id/details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:flipInterval="1000">
<ImageView
android:src="@drawable/image_01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY">
</ImageView>
<ImageView
android:src="@drawable/image_02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY">
</ImageView>
<ImageView
android:src="@drawable/image_03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY">
</ImageView>
</ViewFlipper>
<Button
android:text="<"
android:onClick="prev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:onClick="auto"
android:text="自动播放"/>
<Button
android:text=">"
android:onClick="next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>上面的界面布局文件中定义了一个ViewFlipper，并在该ViewFlipper中定义了三个 ImageView，这意味着该ViewFlipper包含了三个子组件。
接下来在Activity代码中即可调用 ViewFlipper 的 showPrevious()、showNext()等方法控制 ViewFlipper 显示上一个、下一个子组件。为了控制组件切换时的动画效果，还需要调用ViewFlipper的setlnAnimation()、setOutAnimation() 方法设置动画效果。新建ViewFlipperActivity.java文件，加载上面新建的布局文件，具体代码如下：
package com.jinyu.cqkxzsxy.android.advancedviewsample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ViewFlipper;
/**
* @创建者 鑫鱻
* @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
*/
public class ViewFlipperActivity extends AppCompatActivity {
private ViewFlipper mViewFlipper = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewflipper_layout);
mViewFlipper = (ViewFlipper) findViewById(R.id.details);
}
// 上一个
public void prev(View source) {
mViewFlipper.setInAnimation(this, R.anim.slide_in_right);
mViewFlipper.setOutAnimation(this, R.anim.slide_out_left);
// 显示上一个组件
mViewFlipper.showPrevious();
// 停止自动播放
mViewFlipper.stopFlipping();
}
// 下一个
public void next(View source) {
mViewFlipper.setInAnimation(this, android.R.anim.slide_in_left);
mViewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);
// 显示下一个组件
mViewFlipper.showNext();
// 停止自动播放
mViewFlipper.stopFlipping();
}
// 自动播放
public void auto(View source) {
mViewFlipper.setInAnimation(this, android.R.anim.slide_in_left);
mViewFlipper.setOutAnimation(this, android.R.anim.slide_out_right);
// 开始自动播放
mViewFlipper.startFlipping();
}
}上面程序中的代码就是控制ViewFlipper切换组件的动画效果，以及控制ViewFlipper切换组件的关键代码。
运行程序，点击“<”和“>”两个按钮时可以看到下图所示图片切换效果。
当点击自动播放按钮后，ViewFlipper则开始自动轮播图片。
在该例子中使用了静态导入ViewFlipper组件页面，实际开发中也可以通过addView动态添加。如果加入手势左右滑动操作，就打造出了应用程序启动的时候经常用到的引导页面；如果同该例子一样使用自动播放，那么就非常容易实现如图片轮播等行为。
关于ViewAnimator系列组件学习完毕，下期一起来学习Picker系列组件。