ViewFlipper是安卓自帶的控制元件，很多人可能很少知道這個控制元件，這個控制元件很簡單，也很好理解，能不能用上實戰就看你們的本事了。下面是淘寶頭條廣告的原效果

下面是我們今天要實現的效果，圖片是Gif，執行效果是很流暢的，由於這個圖片反應有點慢，會浪費大家點時間，所以我把它調快了，大家可以掏出手機開啟淘寶看，一模一樣的

從原始碼可以看出，其實ViewFlipper間接的繼承了FrameLayout，也可以說ViewFlipper其實就是個FrameLayout，只不過在內部封裝了動畫實現和Handler實現一個迴圈而已

一、ViewFlipper的佈局實現

<?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/vf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:autoStart="true"
        android:background="#fff"
        android:flipInterval="3000"
        android:inAnimation="@anim/anim_marquee_in"
        android:outAnimation="@anim/anim_marquee_out"
        android:paddingLeft="30dp" />
</RelativeLayout>
 

1. android:autoStart：設定自動載入下一個View
2. android:flipInterval：設定View之間切換的時間間隔
3. android:inAnimation：設定切換View的進入動畫
4. android:outAnimation：設定切換View的退出動畫

1. isFlipping： 判斷View切換是否正在進行
2. setFilpInterval：設定View之間切換的時間間隔
3. startFlipping：開始View的切換，而且會迴圈進行
4. stopFlipping：停止View的切換
5. setOutAnimation：設定切換View的退出動畫
6. setInAnimation：設定切換View的進入動畫
7. showNext： 顯示ViewFlipper裡的下一個View
8. showPrevious：顯示ViewFlipper裡的上一個View

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

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

二、自定義ViewFlipper的廣告條

<?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:padding="8dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/marqueeview_bg"
            android:text="熱議"
            android:textColor="#F14C00"
            android:textSize="12sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:padding="3dp"
            android:singleLine="true"
            android:text="小米6來了：曉龍835+8G運存！"
            android:textColor="#333"
            android:textSize="14sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/marqueeview_bg"
            android:text="熱議"
            android:textColor="#F14C00"
            android:textSize="12sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:padding="3dp"
            android:singleLine="true"
            android:text="227斤的胖MM，掀起上衣後，美爆全場！"
            android:textColor="#333"
            android:textSize="14sp" />
    </LinearLayout>
</LinearLayout>

三、程式碼為ViewFlipper新增廣告條

所有的準備條件都準備好了，該開始使用程式碼將準備好的東西黏在一起了，程式碼很簡單，這裡就不多解釋了

public class MainActivity extends AppCompatActivity {

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

        ViewFlipper vf = (ViewFlipper) findViewById(R.id.vf);

        vf.addView(View.inflate(this, R.layout.view_advertisement01, null));
        vf.addView(View.inflate(this, R.layout.view_advertisement02, null));
        vf.addView(View.inflate(this, R.layout.view_advertisement03, null));
    }
}

原文作者:Hensen_

地址: http://blog.csdn.net/qq_30379689/article/details/54174838