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代码：

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

<?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文件，加载上面新建的布局文件，具体代码如下：

[代码]java代码：

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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系列组件。

    今天就先到这里，如果有问题欢迎留言一起探讨，也欢迎加入Android零基础入门技术讨论微信群，共同成长！

原文链接：http://www.apkbus.com/blog-205190-72614.html