今天來介紹TabLayout跟ViewPager的應用，開始ㄅ:)

什麼是TabLayout跟ViewPager ?

許多應用程式中，我們都能看到可以左右滑動切換內容的分頁介面，這種常見UI模式，主要是透過今天介紹的這兩個元件實現的

• ViewPager2：允許使用者透過左右滑動手勢來翻閱不同的頁面。每一頁通常是一個獨立的 Fragment
• TabLayout：水平排列的頁面標籤列。當使用者點擊某項標籤時，ViewPager2 會切換到對應的頁面；反之，當使用者滑動 ViewPager2 時，TabLayout 上對應的頁籤也會被自動選中

核心組成元件

多個Fragment：每個Fragment代表一個獨立的頁面，擁有自己的佈局和邏輯

FragmentStateAdapter: 一個轉接器，負責為 ViewPager2 提供 Fragment 頁面。它是連接你要顯示的 Fragment 列表和 ViewPager2 的橋樑

TabLayoutMediator: 輔助類別，負責將兩者同步起來，包括設定頁籤的標題

範例

建立每個分頁的 Fragment，這邊就列出一個範本

fragment_xxx.xml

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="第x個分頁" />

</FrameLayout>

xxxFragment.java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;

public class xxxFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //將XML轉換成View物件並回傳
        return inflater.inflate(R.layout.fragment_xxx, container, false);
    }
}

然後建立ViewPagerAdapter.java

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerAdapter extends FragmentStateAdapter {

    public ViewPagerAdapter(FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @Override
    public Fragment createFragment(int position) {
        //根據頁面位置決定要顯示哪個Fragment
        switch (position) {
            case 1:
                return new SecondFragment();
            case 2:
                return new ThirdFragment();
            default:
                return new FirstFragment();
        }
    }

    @Override
    public int getItemCount() {
        //告訴ViewPager2總共有幾個頁面
        return 3;
    }
}

activity_main.xml 裡面放TabLayout 和 ViewPager2

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout_main_tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <!-- 如果希望每個標籤寬度相等可以加上下面這三行
		     app:tabMaxWidth="0dp"
         app:tabIndicatorFullWidth="true"
         app:tabMode="fixed" -->
    <!-- 如果你的分頁數量較多，可以加上以下這行就可以滑動了
				 app:tabMode="scrollable" -->

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager_main_vp2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

建立MainActivity.java

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 {

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

        TabLayout tabLayout = findViewById(R.id.tablayout_main_tl);
        ViewPager2 viewPager = findViewById(R.id.viewpager_main_vp2);

        //建立adapter並連接到ViewPager2
        ViewPagerAdapter adapter = new ViewPagerAdapter(this);
        viewPager.setAdapter(adapter);

        //TabLayoutMediator會自動使用這些標籤連結 TabLayout 和 ViewPager2
        new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
            switch (position) {
                case 0:
                    tab.setText("1");
                    break;
                case 1:
                    tab.setText("2");
                    break;
                case 2:
                    tab.setText("3");
                    break;
            }
        }).attach();

    }
}

今天就先介紹到這裡，明天會來介紹Thead，明天見 o౪o