Android——TabLayout 切換時，改變選項卡下字體的狀態（大小、加粗、默認被選中第一個）

一、前言

今天在寫 Android 程式的時候使用到了控制元件 TabLayout ,并想實作以下選項卡的效果，

通過百度搜索了很多篇博主的文章，也受益匪淺，但是總是有一些缺陷，在這里我來給大家整理一個完整的例子，供大家學習使用，如有不足，愿指出，
先附上我參考博主的鏈接：https://blog.csdn.net/lilihong0/article/details/80927136?utm_source=blogxgwz30

二、原始碼實體

1.選項卡所在的布局檔案 fragment_course_selection.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@drawable/main_background">

    <!--tabIndicatorColor：指示器的顏色-->
    <!--tabIndicatorHeight：指示器的高度，可設定為 0，相當于沒有指示器-->
    <!--tabTextColor：Tab未選中時字體的顏色-->
    <!--tabSelectedTextColor：Tab選中時字體的顏色-->
    <!--tabTextAppearance：Tab內文字的樣式，TabLayout沒有提供直接屬性設定文字大小，需通過該屬性指定style樣式從而改變文字大小-->
    <!--tabMode：Tab的顯示模式，默認為fixed（固定不能滑動，標簽很多時會被擠壓），可設定為scrollable（標簽很多時可向左滑動）-->
    <!--tabGravity：內容的顯示模式，可選 center（居中）和  fill（填充）-->

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/course_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        app:tabMode="scrollable"
        android:layout_marginTop="10dp"
        app:tabTextColor="@color/grey3"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorColor="#ffffff"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabSelectedTextColor="@color/black"
        />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/course_viewpager"
        android:layout_below="@+id/course_tab"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

2.選項卡所在類 CourseSelectionFragment.java

public class CourseSelectionFragment extends Fragment {
    private View view;
    List<Fragment> fragments = new ArrayList<>();
    private TabLayout course_tab;
    private ViewPager course_viewpager;
    String tabText[] = new String[2];

    @Nullable
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        view = inflater.inflate(R.layout.fragment_course_selection,container,false);
        initView();
        initData();
        initEvent();
        return view;

    }

    public void initView() {
        course_tab = view.findViewById(R.id.course_tab);
        course_viewpager = view.findViewById(R.id.course_viewpager);
    }

    public void initData() {
        // 添加選項卡
        FragmentPagerAdapter adapter;
        fragments.add(new PrimaryFragment1());
        fragments.add(new PrimaryFragment2());
        // 設定選項卡文字
        tabText[0] = "小學";
        tabText[1] = "初中";
        // 設定配接器
        adapter = new SelectCourseAdapter(getChildFragmentManager(),fragments, tabText);
        course_viewpager.setAdapter(adapter);
        course_tab.setupWithViewPager(course_viewpager);

        // 給選項卡添加自定義 View
        for (int i = 0; i < course_tab.getTabCount(); i++) {
            TabLayout.Tab tab = course_tab.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(getTabView(i));
            }
        }

        // 設定默認第一個被選中、加粗
        View view = course_tab.getTabAt(0).getCustomView();
        if (null != view && view instanceof TextView) {
            ((TextView) view).setTextSize(19);
            ((TextView) view).setTypeface(Typeface.DEFAULT_BOLD);
        }

    }

    // 自定義 Tab 的 View
    private View getTabView(int currentPosition) {
        View view = LayoutInflater.from(getContext()).inflate(R.layout.tablayout_item, null);
        TextView textView = view.findViewById(R.id.tab_item_textView);
        textView.setText(tabText[currentPosition]);
        return view;
    }


    public void initEvent() {
        //監聽事件
        course_tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //選中 tab 的邏輯
                course_viewpager.setCurrentItem(tab.getPosition());
                View view = tab.getCustomView();
                if (null != view && view instanceof TextView) {
                    ((TextView) view).setTextSize(19);
                    ((TextView) view).setTypeface(Typeface.DEFAULT_BOLD); // 加粗
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //未選中 tab 的邏輯
                View view = tab.getCustomView();
                if (null != view && view instanceof TextView) {
                    ((TextView) view).setTextSize(14);
                }
            }
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //再次選中 tab 的邏輯
            }
        });
    }
}

3.選項卡配接器 SelectCourseAdapter

//控制有幾個型別的欄目
public class SelectCourseAdapter extends FragmentPagerAdapter {
    private List<Fragment> list;
    private String[] titles;
    private Context context;

    public SelectCourseAdapter(FragmentManager mFragmentManager, List fragmentList, String[] title) {
        super(mFragmentManager);
        list = fragmentList;
        titles=title;
    }

    @Override
    public Fragment getItem(int i) {
        Fragment fragment = null;
        if (i < list.size()) {
            fragment = list.get(i);
        } else {
            fragment = list.get(0);
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        if (titles != null && titles.length > 0)
            return titles[position];
        return null;
    }
}

4.自定義選項卡字體樣式 View 布局 tablayout_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_item_textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:typeface="sans">
</TextView>

5.ViewPager 內容類 PrimaryFragment1

public class PrimaryFragment1 extends Fragment {
    private View view;
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        view = inflater.inflate(R.layout.fragment_primary1, container, false);
        return view;
    }
}

對應布局檔案：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".activity.MainActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="小學"
        android:gravity="center">
    </TextView>
</RelativeLayout>

6.ViewPager 內容類 PrimaryFragment2

public class PrimaryFragment2 extends Fragment {
    private View view;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        view = inflater.inflate(R.layout.fragment_primary2,container,false);
        return view;
    }
}

對應布局檔案：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".activity.MainActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="初中"
        android:gravity="center">
    </TextView>
</RelativeLayout>

7.最終效果圖如下：

如果復制黏貼代碼的時候報錯缺東西，請在評論區留言