Android零基礎入門第56節：翻轉視圖ViewFlipper打造引導頁和輪播圖

時間 2019-11-30

標籤 android 零基礎入門翻轉視圖 viewflipper 打造引導欄目 Android 简体版

原文原文鏈接

原文: Android零基礎入門第56節：翻轉視圖ViewFlipper打造引導頁和輪播圖

前面兩期學習了 ViewAnimator及其子類ViewSwitcher的使用，以及ViewSwitcher的子類ImageSwitcher和TextSwitcher的使用，你都掌握了嗎？本期咱們一塊兒來學習ViewAnimator另外一個子類 ViewFlipper組件的使用。html

1、ViewFlipper概述

ViewFlipper組件繼承了 ViewAnimator，它可調用addView(View v)添加多個組件，一旦向 ViewFlipper中添加了多個組件以後，ViewFlipper就可以使用動畫控制多個組件之間的切換效果。java

ViewFlipper與前面介紹的AdapterViewFlipper有較大的類似性，它們能夠控制組件切換的動畫效果。它們的區別是：ViewFlipper須要開發者經過addView(View v)添加多個View，而 AdapterViewFlipper則只要傳入一個Adapter，Adapter將會負責提供多個View。所以ViewFlipper 能夠指定與 AdapterViewFlipper 相同的 XML 屬性。android

ViewFlipper組件的一些經常使用方法以下：c#

setInAnimation：設置View進入屏幕時使用的動畫。微信
setOutAnimation：設置View退出屏幕時使用的動畫。架構
showNext：調用該方法來顯示ViewFlipper裏的下一個View。app
showPrevious：調用該方法來顯示ViewFlipper的上一個View。ide
setFilpInterval：設置View之間切換的時間間隔。佈局
setFlipping：使用上面設置的時間間隔來開始切換全部的View，切換會循環進行。學習
stopFlipping：中止View切換。

2、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();
    }
}