为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Android零基础入门第56节：翻转视图ViewFl...

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

标签：
Android

前面两期学习了 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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/image_01"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:scaleType="fitXY">

        </ImageView>

        <ImageView

            android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/image_02"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:scaleType="fitXY">

        </ImageView>

        <ImageView

            android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@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

点击查看更多内容
发表于 2018.09.07 18:32， 共 1738 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

Cats萌萌

手记
篇
粉丝
50
获赞与收藏
304

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消