在上一篇文章中，我們介紹了如何基本結合 TabLayout 和 ViewPager，並使用 FragmentPagerAdapter 來管理 Fragment。今天，我們將深入探討這兩個元件的進階應用，尤其是如何與 Fragment 進行更高級的交互。

1. TabLayout 與 Fragment 的互動

在進階的應用中，TabLayout 和 ViewPager 通常會與 Fragment 進行密切的互動。這使得我們能夠在不同的頁面中顯示不同的內容，並實現更複雜的用戶體驗。

Fragment 之間的數據傳遞

當你在不同的 Tab 中顯示不同的 Fragment 時，有時需要在這些 Fragment 之間傳遞數據。這可以通過以下步驟實現：

1.創建一個接口：在你的 Fragment 中創建一個接口來定義數據傳遞的方法。例如：

public interface OnDataPass {
    void onDataPass(String data);
}

2.在 Fragment 中實現接口：讓你的 Fragment 實現這個接口，以便接收數據。

public class FragmentA extends Fragment {
    OnDataPass dataPasser;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        dataPasser = (OnDataPass) context;
    }

    // 呼叫接口來傳遞數據
    private void passData(String data) {
        dataPasser.onDataPass(data);
    }
}

3.在 Activity 中實現接口：讓你的 Activity 實現這個接口，以便在不同的 Fragment 之間傳遞數據。

public class MainActivity extends AppCompatActivity implements FragmentA.OnDataPass {
    @Override
    public void onDataPass(String data) {
        // 接收並處理數據
    }
}

更新 Fragment 的 UI

有時，你可能需要在 Fragment 中更新 UI。例如，當用戶在 Tab 中進行操作時，更新其他 Tab 的內容。這可以通過對 Fragment 進行引用來實現：

public class MainActivity extends AppCompatActivity {
    private FragmentA fragmentA;

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

        // 初始化 ViewPager 和 TabLayout
        ViewPager viewPager = findViewById(R.id.viewPager);
        TabLayout tabLayout = findViewById(R.id.tabLayout);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);

        // 獲取 FragmentA 的實例
        fragmentA = (FragmentA) adapter.getItem(0);
    }

    // 從其他方法更新 FragmentA 的 UI
    private void updateFragmentA() {
        if (fragmentA != null) {
            fragmentA.updateUI();
        }
    }
}

2. 使用動畫效果

為了提升用戶體驗，我們可以為 TabLayout 和 ViewPager 添加動畫效果。例如，我們可以使用自定義的動畫來平滑過渡 Tab 切換：

tabLayout.setTabMode(TabLayout.MODE_FIXED); // 設置 Tab 模式 固定模式，Tab 的數量會在 TabLayout 中佔用等分的空間。
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); // 設置 Tab 重力 （填滿）來使 Tab 在 TabLayout 中等寬顯示

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 自定義動畫效果
    }

    @Override
    public void onPageSelected(int position) {
        // 當頁面選擇時的操作
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        // 當頁面滾動狀態變化時的操作
    }
});

總結

在本篇文章中，我們深入探討了 TabLayout 和 ViewPager 的進階應用，包括如何與 Fragment 進行互動，如何動態更新 Fragment 的 UI。掌握這些技巧後，你可以創建更加靈活和吸引人的使用者界面，提高應用的使用體驗。