本頁面由 Cloud Translation API 翻譯而成。

使用 ViewPager2 以滑動方式切換內容片段

畫面滑動是指從一個完整畫面轉換到另一個畫面，常見於設定精靈和投影片等 UI。本主題說明如何使用 ViewPager2 物件進行螢幕投影片放映。ViewPager2 物件可自動為螢幕投影片製作動畫。以下範例顯示螢幕投影片從一個內容畫面轉換到下一個畫面：

圖 1. 螢幕滑動動畫。

如要搶先查看完整範例，請前往 GitHub 查看這個範例應用程式。

注意：如果應用程式已使用 ViewPager，請參閱「從 ViewPager 遷移至 ViewPager2」。

如要使用 ViewPager2，請在專案中新增一些 AndroidX 依附元件。然後按照下列各節的步驟操作。

建立檢視畫面

建立版面配置檔案，稍後用於片段內容。您也需要定義片段內容的字串。以下範例包含顯示部分文字的文字檢視區塊：

<!-- fragment_screen_slide_page.xml -->
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView style="?android:textAppearanceMedium"
        android:padding="16dp"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/lorem_ipsum" />
</ScrollView>

建立片段

建立 Fragment 類別，傳回在 onCreateView() 方法中建立的版面配置。然後，每當需要向使用者顯示新頁面時，您可以在父項活動中建立這個片段的例項：

Kotlin

import androidx.fragment.app.Fragment

class ScreenSlidePageFragment : Fragment() {

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_screen_slide_page, container, false)
}

Java

import androidx.fragment.app.Fragment;
...
public class ScreenSlidePageFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return (ViewGroup) inflater.inflate(
                R.layout.fragment_screen_slide_page, container, false);
    }
}

新增 ViewPager2

ViewPager2 物件內建滑動手勢，可切換頁面，且預設會顯示螢幕滑動動畫，因此您不必自行建立動畫。ViewPager2 會使用 FragmentStateAdapter 物件做為要顯示新網頁的供應項目，因此 FragmentStateAdapter 會使用您建立的片段類別。

首先，請建立包含 ViewPager2 物件的版面配置：

<!-- activity_screen_slide.xml -->
<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

建立可執行下列操作的活動：

將內容檢視區塊設為具有 ViewPager2 的版面配置。
建立擴充 FragmentStateAdapter 抽象類別的類別，並實作 createFragment() 方法，以提供 ScreenSlidePageFragment 例項做為新頁面。您必須為呼叫器轉接器實作 getItemCount() 方法，該方法會傳回轉接器建立的頁面數量。範例中共有五個。
將 FragmentStateAdapter 連結至 ViewPager2 物件。

Kotlin

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
...
/**
 * The number of pages (wizard steps) to show in this demo.
 */
private const val NUM_PAGES = 5

class ScreenSlidePagerActivity : FragmentActivity() {

    /**
     * The pager widget, which handles animation and allows swiping horizontally
     * to access previous and next wizard steps.
     */
    private lateinit var viewPager: ViewPager2

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_screen_slide)

        // Instantiate a ViewPager2 and a PagerAdapter.
        viewPager = findViewById(R.id.pager)

        // The pager adapter, which provides the pages to the view pager widget.
        val pagerAdapter = ScreenSlidePagerAdapter(this)
        viewPager.adapter = pagerAdapter
    }

    override fun onBackPressed() {
        if (viewPager.currentItem == 0) {
            // If the user is currently looking at the first step, allow the system to handle
            // the Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed()
        } else {
            // Otherwise, select the previous step.
            viewPager.currentItem = viewPager.currentItem - 1
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private inner class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
        override fun getItemCount(): Int = NUM_PAGES

        override fun createFragment(position: Int): Fragment = ScreenSlidePageFragment()
    }
}

Java

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
...
public class ScreenSlidePagerActivity extends FragmentActivity {
    /**
     * The number of pages (wizard steps) to show in this demo.
     */
    private static final int NUM_PAGES = 5;

    /**
     * The pager widget, which handles animation and allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private ViewPager2 viewPager;

    /**
     * The pager adapter, which provides the pages to the view pager widget.
     */
    private FragmentStateAdapter pagerAdapter;

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

        // Instantiate a ViewPager2 and a PagerAdapter.
        viewPager = findViewById(R.id.pager);
        pagerAdapter = new ScreenSlidePagerAdapter(this);
        viewPager.setAdapter(pagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if (viewPager.getCurrentItem() == 0) {
            // If the user is currently looking at the first step, allow the system to handle the
            // Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private class ScreenSlidePagerAdapter extends FragmentStateAdapter {
        public ScreenSlidePagerAdapter(FragmentActivity fa) {
            super(fa);
        }

        @Override
        public Fragment createFragment(int position) {
            return new ScreenSlidePageFragment();
        }

        @Override
        public int getItemCount() {
            return NUM_PAGES;
        }
    }
}

使用 PageTransformer 自訂動畫

如要顯示與預設螢幕投影片動畫不同的動畫，請實作 ViewPager2.PageTransformer 介面，並提供給 ViewPager2 物件。這個介面會公開單一方法 transformPage()。在畫面轉換的每個時間點，系統會為每個可見頁面 (通常只有一個可見頁面) 和畫面外的相鄰頁面呼叫這個方法一次。舉例來說，如果使用者看到第三頁，並將頁面拖曳至第四頁，則在手勢的每個步驟中，系統都會為第二、三和四頁呼叫 transformPage()。

在 transformPage() 的實作中，您可以根據網頁在畫面上的位置，判斷需要轉換的網頁，然後建立自訂的滑動動畫。從 transformPage() 方法的 position 參數取得網頁位置。

position 參數會指出特定網頁相對於畫面中央的位置。這個參數是動態屬性，會隨著使用者捲動一系列網頁而變更。如果網頁填滿螢幕，位置值為 0。如果網頁繪製在螢幕右側，位置值為 1。如果使用者捲動到第一頁和第二頁之間的位置，第一頁的位置為 -0.5，第二頁的位置為 0.5。您可以根據網頁在畫面上的位置，使用 setAlpha()、setTranslationX() 或 setScaleY() 等方法設定網頁屬性，建立自訂的投影片動畫。

導入 PageTransformer 後，請呼叫 setPageTransformer() 並套用自訂動畫。舉例來說，如果您有名為 ZoomOutPageTransformer 的 PageTransformer，可以按照下列方式設定自訂動畫：

Kotlin

val viewPager: ViewPager2 = findViewById(R.id.pager)
...
viewPager.setPageTransformer(ZoomOutPageTransformer())

Java

ViewPager2 viewPager = findViewById(R.id.pager);
...
viewPager.setPageTransformer(new ZoomOutPageTransformer());

如需 PageTransformer 範例，請參閱「縮小頁面轉換器」和「深度頁面轉換器」一節。

縮小頁面轉換器

這個頁面轉換器會在捲動相鄰頁面時，縮小並淡出頁面。當頁面靠近中心時，會恢復正常大小並淡入。

圖 2. ZoomOutPageTransformer 範例。

Kotlin

private const val MIN_SCALE = 0.85f
private const val MIN_ALPHA = 0.5f

class ZoomOutPageTransformer : ViewPager2.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            val pageHeight = height
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 1 -> { // [-1,1]
                    // Modify the default slide transition to shrink the page as well.
                    val scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position))
                    val vertMargin = pageHeight * (1 - scaleFactor) / 2
                    val horzMargin = pageWidth * (1 - scaleFactor) / 2
                    translationX = if (position < 0) {
                        horzMargin - vertMargin / 2
                    } else {
                        horzMargin + vertMargin / 2
                    }

                    // Scale the page down (between MIN_SCALE and 1).
                    scaleX = scaleFactor
                    scaleY = scaleFactor

                    // Fade the page relative to its size.
                    alpha = (MIN_ALPHA +
                            (((scaleFactor - MIN_SCALE) / (1 - MIN_SCALE)) * (1 - MIN_ALPHA)))
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

Java

public class ZoomOutPageTransformer implements ViewPager2.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well.
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1).
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

深度頁面轉換器

這個頁面轉換器會使用預設的滑動動畫，將頁面滑動至左側，同時使用「深度」動畫，將頁面滑動至右側。這項深度動畫會讓網頁淡出，並以線性方式縮小。

圖 3. DepthPageTransformer 範例。

在深度動畫期間，預設動畫 (螢幕滑動) 仍會發生，因此您必須使用負 X 轉換來抵銷螢幕滑動。例如：

Kotlin

view.translationX = -1 * view.width * position

Java

view.setTranslationX(-1 * view.getWidth() * position);

以下範例說明如何在運作中的頁面轉換器中，抵銷預設的螢幕滑動動畫：

Kotlin

private const val MIN_SCALE = 0.75f

@RequiresApi(21)
class DepthPageTransformer : ViewPager2.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 0 -> { // [-1,0]
                    // Use the default slide transition when moving to the left page.
                    alpha = 1f
                    translationX = 0f
                    translationZ = 0f
                    scaleX = 1f
                    scaleY = 1f
                }
                position <= 1 -> { // (0,1]
                    // Fade the page out.
                    alpha = 1 - position

                    // Counteract the default slide transition.
                    translationX = pageWidth * -position
                    // Move it behind the left page.
                    translationZ = -1f

                    // Scale the page down (between MIN_SCALE and 1).
                    val scaleFactor = (MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

Java

@RequiresApi(21)
public class DepthPageTransformer implements ViewPager2.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page.
            view.setAlpha(1f);
            view.setTranslationX(0f);
            view.setTranslationZ(0f);
            view.setScaleX(1f);
            view.setScaleY(1f);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition.
            view.setTranslationX(pageWidth * -position);
            // Move it behind the left page
            view.setTranslationZ(-1f);

            // Scale the page down (between MIN_SCALE and 1).
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

其他資源

如要進一步瞭解 ViewPager2，請參閱下列其他資源：

範例

GitHub 上的 ViewPager2 範例。

影片

翻頁：遷移至 ViewPager2 (2019 年 Android 開發人員高峰會)

使用 ViewPager2 以滑動方式切換內容片段 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

建立檢視畫面

建立片段

Kotlin

Java

新增 ViewPager2

Kotlin

Java

使用 PageTransformer 自訂動畫

Kotlin

Java

縮小頁面轉換器

Kotlin

Java

深度頁面轉換器

Kotlin

Java

Kotlin

Java

其他資源

範例

影片

使用 ViewPager2 以滑動方式切換內容片段