ViewFlipper實現(xiàn)文字輪播效果

更新時間：2019年08月22日 09:18:47 作者：敲代碼的鳥

這篇文章主要為大家詳細介紹了ViewFlipper實現(xiàn)文字輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

ViewFlipper實現(xiàn)文字輪播(仿淘寶頭條垂直滾動廣告)，供大家參考，具體內(nèi)容如下

廣告條目可以單獨寫成布局文件，然后在布局文件或者代碼中添加到總布局中

從源碼可以看出，其實ViewFlipper間接的繼承了FrameLayout，也可以說ViewFlipper其實就是個FrameLayout，只不過在內(nèi)部封裝了動畫實現(xiàn)和Handler實現(xiàn)一個循環(huán)而已。

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <!--android:autoStart：設置自動加載下一個View-->
 <!--android:flipInterval：設置View之間切換的時間間隔-->
 <!--android:inAnimation：設置切換View的進入動畫-->
 <!--android:outAnimation：設置切換View的退出動畫-->
 <ViewFlipper

  android:id="@+id/view_flipper"
  android:layout_width="match_parent"
  android:layout_height="100dp"
  android:layout_centerInParent="true"
  android:autoStart="true"
  android:background="#808080"
  android:flipInterval="2000"
  android:inAnimation="@anim/slide_in_down"
  android:outAnimation="@anim/slide_out_up">

  <TextView
   android:id="@+id/first"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:text="白日依山盡"
   android:textColor="#FF00FF"
   android:textSize="50sp" />

  <TextView
   android:id="@+id/second"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:text="黃河入海流"
   android:textColor="#FF00FF"
   android:textSize="50sp" />

  <TextView
   android:id="@+id/third"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:text="欲窮千里目"
   android:textColor="#FF00FF"
   android:textSize="50sp" />

  <TextView
   android:id="@+id/forth"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:text="更上一層樓"
   android:textColor="#FF00FF"
   android:textSize="50sp" />
 </ViewFlipper>
</RelativeLayout>

這里介紹ViewFlipper用到的屬性，這些屬性其實都可以使用代碼實現(xiàn)，只不過這里為了代碼看上去美觀，才放在布局里的

android:autoStart : 設置自動加載下一個View
android:flipInterval : 設置View之間切換的時間間隔
android:inAnimation : 設置切換View的進入動畫
android:outAnimation : 設置切換View的退出動畫

下面是ViewFlipper常用的方法介紹，除了可以設置上面的屬性之外，還提供了其他方法

isFlipping : 判斷View切換是否正在進行
setFlipInterval : 設置View之間切換的時間間隔
startFlipping : 開始View的切換，而且默認會循環(huán)進行
stopFlippiing : 停止View的切換
setOutAnimation : 設置切換View的退出動畫
setInAnimation : 設置切換View的進入動畫
showNext : 顯示ViewFlipper里的下一個View
showPrevious : 顯示ViewFlipper里的上一個View

這里還涉及到兩個動畫其實就是一個平移的動畫，它們都保存在anim文件夾中

slide_in_down.xml 進入動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <translate
  android:duration="@android:integer/config_mediumAnimTime"
  android:fromYDelta="100%"
  android:toYDelta="0"/>
</set>

slide_out_up.xml 退出動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
 android:duration="@android:integer/config_mediumAnimTime"
 android:fromYDelta="0"
 android:toYDelta="-100%"/>
</set>

MainActivity

package com.nrf.mydemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

 }

}

運行之后，效果圖