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

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

ViewFlipper

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

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

ViewFlipper 属性

ViewFlipper 方法

为 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.xml 、 guide_two.xml 、 guide_three.xml 、 guide_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