Android ViewFlipper 完全指南：實現圖片輪播、動畫切換與手動控制

ViewFlipper 核心機制

ViewFlipper 繼承 ViewAnimator → FrameLayout。它內部維護一組子 View，同一時刻只顯示一個，支持：

• 自動輪播： setFlipInterval(ms) + startFlipping()。
• 動畫切換： setInAnimation() / setOutAnimation() 設置進出動畫。
• 手動翻頁： showNext() / showPrevious()。

XML 佈局：自動輪播圖片庫

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:padding="16dp">

    <ViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" android:layout_marginTop="50dp"
        android:flipInterval="2000"> <!-- 2秒切換一次 -->

        <ImageView android:layout_width="200dp" android:layout_height="200dp"
            android:src="@drawable/bomb10" android:scaleType="centerCrop"/>
        <ImageView android:layout_width="200dp" android:layout_height="200dp"
            android:src="@drawable/bomb11" android:scaleType="centerCrop"/>
        <ImageView android:layout_width="200dp" android:layout_height="200dp"
            android:src="@drawable/bomb12" android:scaleType="centerCrop"/>
    </ViewFlipper>

    <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_below="@id/viewFlipper" android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" android:orientation="horizontal">

        <Button android:id="@+id/btnPrev" android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="< 上一張" android:onClick="onPrevClick"/>
        <Button android:id="@+id/btnAuto" android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="自動播放" android:onClick="onAutoClick"/>
        <Button android:id="@+id/btnNext" android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="下一張 >" android:onClick="onNextClick"/>
    </LinearLayout>
</RelativeLayout>

動畫資源文件 (res/anim/)

slide_in_right.xml (從右側滑入)

<set xmlns:android="https://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_out_left.xml (向左側滑出)

<set xmlns:android="https://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_in_left.xml / slide_out_right.xml 同理相反方向。

Activity 代碼：動態設置動畫與控制邏輯

public class MainActivity extends AppCompatActivity {
    private ViewFlipper viewFlipper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper = findViewById(R.id.viewFlipper);
        // 默認啟動自動輪播
        viewFlipper.startFlipping();
    }

    public void onPrevClick(View v) {
        viewFlipper.setInAnimation(this, R.anim.slide_in_left);
        viewFlipper.setOutAnimation(this, R.anim.slide_out_right);
        viewFlipper.showPrevious();
        viewFlipper.stopFlipping(); // 手動操作後停止自動播放
    }

    public void onAutoClick(View v) {
        viewFlipper.setInAnimation(this, R.anim.slide_in_right);
        viewFlipper.setOutAnimation(this, R.anim.slide_out_left);
        viewFlipper.startFlipping();
    }

    public void onNextClick(View v) {
        viewFlipper.setInAnimation(this, R.anim.slide_in_right);
        viewFlipper.setOutAnimation(this, R.anim.slide_out_left);
        viewFlipper.showNext();
        viewFlipper.stopFlipping();
    }

    @Override
    protected void onPause() {
        super.onPause();
        viewFlipper.stopFlipping(); // 生命周期保護
    }

    @Override
    protected void onResume() {
        super.onResume();
        viewFlipper.startFlipping();
    }
}

進階：動態添加 View (代碼中構建)

ViewFlipper flipper = findViewById(R.id.viewFlipper);
String[] imageUrls = {"url1", "url2", "url3"};
for (String url : imageUrls) {
    ImageView iv = new ImageView(this);
    iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
    Glide.with(this).load(url).into(iv); // 使用圖片加載庫
    flipper.addView(iv);
}

ViewFlipper vs ViewPager 對比

總結

ViewFlipper 輕量簡單，適合「無需手勢滑動、頁面固定、自動輪播」的場景。若需交互式滑動、動態數據源、複雜頁面生命周期管理，請直接使用 ViewPager2 (基於 RecyclerView，官方推薦)。