Android零基础入门第56节：翻转视图ViewFlipper打造引导页和轮播图

原文:Android零基础入门第56节：翻转视图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="&lt;"
        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="&gt;"
        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切换组件的关键代码。

运行程序，点击“<”和“>”两个按钮时可以看到下图所示图片切换效果。