Android 中的 ViewPager2 示例


在 Android 應用開發領域,建立互動式和直觀的 UI 對於提供引人入勝的使用者體驗至關重要。ViewPager2 元件就是 Android 開發人員工具包中用於實現此目的的工具之一。本文將作為 Android 中 ViewPager2 實現的全面指南,並輔以實際示例。

ViewPager2 簡介

ViewPager2 是對原始 ViewPager 庫的重大改進。它提供了更靈活的方向支援、從右到左 (RTL) 佈局支援以及更好的滑動功能,使其成為建立可滑動或可滾動使用者介面的首選工具。

設定 ViewPager2:分步指南

讓我們深入瞭解如何建立一個使用 ViewPager2 和 Fragment 的 Android 應用程式的細節。

步驟 1 - 專案設定

首先建立一個新的 Android Studio 專案。選擇“空活動”模板並將語言設定為 Java。

步驟 2 - 新增依賴項

接下來,我們需要在 build.gradle (Module) 檔案中包含 ViewPager2 依賴項。

dependencies {
   implementation 'androidx.viewpager2:viewpager2:1.1.0-alpha01'
}

新增依賴項後,不要忘記同步專案。

步驟 3 - 建立 Fragment

在本指南中,我們將建立三個 Fragment(FirstFragment、SecondFragment 和 ThirdFragment)。每個 Fragment 將代表 ViewPager 中的唯一頁面。

以下是如何建立 FirstFragment 的示例:

public class FirstFragment extends Fragment {
   @Nullable
   @Override
   public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup
   container, @Nullable Bundle savedInstanceState) {
      return inflater.inflate(R.layout.fragment_first, container, false);
   }
}

請記住為這些 Fragment 建立相應的 XML 佈局檔案。

步驟 4 - 建立介面卡

下一步涉及建立 FragmentStateAdapter。介面卡管理 Fragment,並在需要時將其提供給 ViewPager。

public class ViewPagerAdapter extends FragmentStateAdapter {
   public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
      super(fragmentActivity);
   }
   @NonNull
   @Override
   public Fragment createFragment(int position) {
      switch (position) {
         case 0:
            return new FirstFragment();
         case 1:
            return new SecondFragment();
         case 2:
            return new ThirdFragment();
         }
         return new FirstFragment();
      }
      @Override
      public int getItemCount() {
         return 3;
   }
}

步驟 5 - 在 Activity 中實現 ViewPager

最後,在您的 MainActivity 中,初始化 ViewPager 並設定介面卡。

public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      ViewPager2 viewPager = findViewById(R.id.viewPager);
      viewPager.setAdapter(new ViewPagerAdapter(this));
   }
}

確保您的 activity_main.xml 佈局檔案中包含 ViewPager2。

<androidx.viewpager2.widget.ViewPager2
   android:id="@+id/viewPager"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

完成這些步驟後,您應該能夠在不同的 Fragment 之間滑動,向用戶展示新的螢幕。

增強 ViewPager2 體驗

此時,ViewPager2 的基本實現已完成。但是,您可以新增一些其他功能來增強使用者互動和功能。

新增頁面轉換

頁面轉換提供在使用者在頁面之間滑動時出現的視覺效果。ViewPager2 包含一個 setPageTransformer() 方法,允許在滑動期間進行自定義動畫。以下是如何使用深度頁面轉換的簡單示例:

viewPager.setPageTransformer(new ViewPager2.PageTransformer() {
   @Override
   public void transformPage(@NonNull View page, float position) {
      final float MIN_SCALE = 0.75f;
     int pageWidth = page.getWidth();
   if (position < -1) {
         page.setAlpha(0f);
      } else if (position <= 0) {
         page.setAlpha(1f);
         page.setTranslationX(0f);
         page.setScaleX(1f);
         page.setScaleY(1f);
      } else if (position <= 1) {
         page.setAlpha(1 - position);
         page.setTranslationX(pageWidth * -position);
         float scaleFactor = MIN_SCALE
            + (1 - MIN_SCALE) * (1 - Math.abs(position));
         page.setScaleX(scaleFactor);
         page.setScaleY(scaleFactor);
      } else {
         page.setAlpha(0f);
      }
   }
});   

將 TabLayout 與 ViewPager2 整合

將 ViewPager2 與 TabLayout 配合使用是一種流行的 UI 設計。這提供了一種更直觀和更具視覺吸引力的導航體驗。在您的 MainActivity 中將 TabLayout 與 ViewPager2 關聯:

TabLayout tabLayout = findViewById(R.id.tab_layout);
TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(
   tabLayout, viewPager, true, new TabLayoutMediator.TabConfigurationStrategy() {
      @Override
      public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
         tab.setText("Tab " + (position + 1));
      }
   });
tabLayoutMediator.attach();

請記住將 TabLayout 依賴項新增到您的 build.gradle 檔案中:

implementation 'com.google.android.material:material:1.3.0'

結論

ViewPager2 元件與 Fragment 一起,提供了一種在 Android 應用程式中建立可滑動檢視的好方法。其無縫瀏覽體驗是現代 Android 應用開發的關鍵。藉助本指南提供的基礎,您可以進一步自定義和探索 ViewPager2 的功能。可能性是無限的——新增動畫、過渡並修改其行為以適應應用程式的需求。

更新於: 2023-07-19

3K+ 閱讀量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告