Day16 - ViewPager2 + TabLayout - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 16

Mobile Development

Android studio使用過程與開發說明系列第 16 篇

Day16 - ViewPager2 + TabLayout

15th鐵人賽

aa30742030

團隊nutc_imac_function

2023-09-26 13:25:10

662 瀏覽

分享至

前言
Android Studio 提供了許多強大的工具和元件，讓開發者能夠建立出各種豐富多樣的應用程式界面。其中，ViewPager2 與 TabLayout 是一對經典的組合，可以讓你輕鬆實現可滑動分頁介面，提供更好的用戶體驗。

功能
這裡會讓TabLayout和ViewPager2連動起來，當ViewPager滑動或是TabLayout被點選後都可以讓跟著切換想要的畫面

步驟如下

建立Fragment:這裡我們建立3個Fragment

結果圖

創建新的PageAdapter Class

package com.example.viewpagerandtablayoutdemo;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class PageAdapter extends FragmentStateAdapter {

    FragmentA fragmentA;
    FragmentB fragmentB;
    FragmentC fragmentC;

    public PageAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }


    @NonNull
    @Override
    public Fragment createFragment(int position) {
        //position當前ViewPage編號
        switch (position) {
            case 0:
                fragmentA = new FragmentA();
                return fragmentA;
            case 1:
                fragmentB = new FragmentB();
                return fragmentB;
            case 2:
                fragmentC = new FragmentC();
                return fragmentC;
            default:
                return null;
        }
    }

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

在MainActivity Class

package com.example.viewpagerandtablayoutdemo;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager2 viewPager;
    private String[] tab_title = {"Home","Post","Message"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ById();//綁定元件
        viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(),getLifecycle()));

        new TabLayoutMediator(tabLayout, viewPager, true, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                viewPager.setCurrentItem(tab.getPosition());
                tab.setText(tab_title[position]); //設定Tab標籤文字
            }
        }).attach();
    }
    //綁定元件
    private void ById(){
        tabLayout = findViewById(R.id.tabLayout);
        viewPager = findViewById(R.id.viewpager);
    }
}

PageAdapter介紹

PageAdapter():建構元用來做FragmentManager資料管理的初始設定和Lifecycle的初始設定

    public PageAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

createFragment(int position):重寫createFragment的方法，用他來拿去TabLayout和ViewPager2他們點變化時的位置，這裡的Switch是用來選擇生成的畫面，當我畫面滑動時或是TabLayout裡的TabItem某一個被點擊時，它會變換當前position的資料畫面。

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        //position當前ViewPage編號
        switch (position) {
            case 0:
                fragmentA = new FragmentA();
                return fragmentA;
            case 1:
                fragmentB = new FragmentB();
                return fragmentB;
            case 2:
                fragmentC = new FragmentC();
                return fragmentC;
            default:
                return null;
        }
    }

getItemCount():重寫getItemCount的資料，它會回傳你有幾個Fragment的畫面，因為我這裡是3個Fragment畫面，所以需要回傳3個。

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

MainActivity介紹

ById():綁定元建，這裡我們用來綁定tabLayout和ViewPager你的(layout)部局裡的元件ID。

    //綁定元件
    private void ById(){
        tabLayout = findViewById(R.id.tabLayout);
        viewPager = findViewById(R.id.viewpager);
    }

設定ViewPager和TabLayout的連動

        viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(),getLifecycle()));

        new TabLayoutMediator(tabLayout, viewPager, true, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                viewPager.setCurrentItem(tab.getPosition());
                tab.setText(tab_title[position]); //設定Tab標籤文字
            }
        }).attach();
    }

viewPager.setAdapter(new PageAdapter(getSupportFragmentManager(), getLifecycle()));

這一行程式碼是設置ViewPager的適配器（Adapter）。ViewPager需要一個適配器來管理其內容頁面。在這裡，你使用了自定義的PageAdapter（假設這是你自己實現的適配器），並傳入getSupportFragmentManager()和getLifecycle()。

getSupportFragmentManager()用於獲取Fragment的FragmentManager，它用於管理Fragment的生命週期。
getLifecycle()用於獲取Fragment的生命週期。這是Android生命週期庫的一部分，用於確保Fragment的生命週期正確管理。

new TabLayoutMediator(tabLayout, viewPager, true, new TabLayoutMediator.TabConfigurationStrategy() {...}).attach();

這一行程式碼是設置TabLayout和ViewPager之間的連動。TabLayout用於顯示選項卡，而ViewPager用於顯示不同的內容頁面。這個連動的設置是通過TabLayoutMediator類來實現的。

tabLayout是你的TabLayout實例。
viewPager是你的ViewPager實例。
true表示是否將TabLayout和ViewPager的滑動同步。如果設置為true，則TabLayout中的選項卡會跟隨ViewPager的滑動而變化。
TabLayoutMediator.TabConfigurationStrategy是一個介面，用於配置每個選項卡的標籤文字和其他屬性。

onConfigureTab(@NonNull TabLayout.Tab tab, int position) {...}
這是一個TabConfigurationStrategy的實現，用於配置每個選項卡的內容。在這個方法中，你可以設定選項卡的標籤文字，並根據position參數設定不同的內容。

tab是當前要配置的選項卡對象。
position是選項卡的位置，你可以根據位置來設定不同的標籤文字。

Layout部局需要的部分

如圖

---main_activity---

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="128dp">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday"
            tools:layout_editor_absoluteX="35dp"
            tools:layout_editor_absoluteY="2dp" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </com.google.android.material.tabs.TabLayout>
https://ithelp.ithome.com.tw/users/20161502/articles
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="9" />
</LinearLayout>

Fragment.html的部分

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragmentA">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>