Android ViewFlipper 翻转视图

Android ViewFlipper ( 翻转视图 ) 多页面管理控件,用于制作所有 APP 第一次启动时那种全屏幕可以滑动的引导页或者图片轮播


ViewFlipper 时一层一层的,每次只显示其中一层

ViewFlipper

使用 XML 创建 ViewFlipper 的代码很简单

<ViewFlipper
    android:id="@+id/guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent"  />

ViewFlipper 属性

属性 说明
android:autoStart 设置是否自动开始轮播
android:flipInterval 轮播时的时间间隔

ViewFlipper 方法

方法 说明
setInAnimation() 设置 View 进入屏幕时使用的动画
setOutAnimation() 设置 View 退出屏幕时使用的动画
showNext() 调用该方法来显示ViewFlipper里的下一个View
showPrevious() 调用该方法来显示ViewFlipper的上一个View
setFilpInterval() 设置View之间切换的时间间隔
setFlipping() 使用上面设置的时间间隔来开始切换所有的View,切换会循环进行
stopFlipping() 停止 View 切换

为 ViewFlipper 加入 View

我们说过 ViewFlipper 是一层一层的,每次只显示一层,而有没有 XML android:* 属性来设置,所以,我们现在来看看怎么加入一层

  1. 使用 <include layout=""> 在 XML 布局中静态导入

    <ViewFlipper
        android:id="@+id/guide"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <include layout="@layout/guide_one" />
        <include layout="@layout/guide_two" />
        <include layout="@layout/guide_three" />
        <include layout="@layout/guide_four" />
    
    </ViewFlipper>
    
  2. 使用 addView() 方法动态添加 View

    ViewFlipper guide = ( ViewFlipper ) findViewById ( R.id.guide );
    
    guide.add(v1);
    guide.add(v2);
    guide.add(v3);
    guide.add(v4);
    

范例: 使用静态导入方式实现 ViewFlipper 图片轮播


每个页面的布局都是一个简单的 ImageView

  1. 创建一个 空的 Android 项目 cn.twle.android.FlipperGuide

  2. 下载 /static/i/android/flipper_guide.zip,解压并把所有的图片拖到 res/drawable

  3. res 下新建一个目录 anim , 然后在 res/anim 下添加入场和离场动画

    right_in.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:duration="2000"
            android:fromXDelta="100%p"
            android:toXDelta="0" />
    </set>
    

    right_out.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android" >
        <translate
            android:duration="2000"
            android:fromXDelta="0"
            android:toXDelta="-100%p" />
    </set>
    
  4. 然后我们在 res/layout 目录下新建四个引导页 guide_one.xmlguide_two.xmlguide_three.xmlguide_four.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/guide_1"/>
    
    </LinearLayout>
    

    四个文件的布局一样,只是替换把 android:src="@drawable/guide_1|2|3|4"

  5. 修改 activity_main.xml 添加一个 AutoCompleteTextView

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <ViewFlipper
            android:id="@+id/guide"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inAnimation="@anim/right_in"
            android:outAnimation="@anim/right_out"
            android:autoStart = "true" 
            android:flipInterval="3000">
    
            <include layout="@layout/guide_one" />
            <include layout="@layout/guide_two" />
            <include layout="@layout/guide_three" />
            <include layout="@layout/guide_four" />
    
        </ViewFlipper>
    
    </RelativeLayout>
    

    设置 android:autoStart="true" 立即开始动画

    设置 android:flipInterval = 3000 ,即每隔 3000ms 切换一次

全屏

基本就这样了,如果要实现全屏,那么就修改 MainActivity.java

package cn.twle.android.flipperguide;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 无 title    
        requestWindowFeature(Window.FEATURE_NO_TITLE);    

        // 全屏    
        getWindow().setFlags(WindowManager.LayoutParams. FLAG_FULLSCREEN ,WindowManager.LayoutParams. FLAG_FULLSCREEN);   

        setContentView(R.layout.activity_main);
    }
}

注意

  1. 要继承自 Activity
  2. 设置全屏的代码必须在 setContentView(R.layout.main) 之前,不然会报错

参考文档

  1. Android ViewFlipper

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.