文章目錄

• • 一、前言
  • 二、源碼實例
  • • 1.選項卡所在的布局文件 `fragment_course_selection.xml`
    • 2.選項卡所在類 `CourseSelectionFragment.java`
    • 3.選項卡適配器 `SelectCourseAdapter`
    • 4.自定義選項卡字體樣式 View 布局 `tablayout_item.xml`
    • 5.ViewPager 內容類 `PrimaryFragment1`
    • 6.ViewPager 內容類 `PrimaryFragment2`
    • 7.最終效果圖如下：

一、前言

今天在寫 Android 程序的時候使用到了控件 TabLayout ,并想實現(xiàn)以下選項卡的效果。

通過百度搜索了很多篇博主的文章，也受益匪淺，但是總是有一些缺陷，在這里我來給大家整理一個完整的例子，供大家學習使用，如有不足，愿指出。
先附上我參考博主的鏈接：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.TabLayoutandroid: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.ViewPagerandroid: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];@Nullablepublic 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);// 給選項卡添加自定義 Viewfor (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 的 Viewprivate 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() {//監(jiān)聽事件course_tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic 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); // 加粗}}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {//未選中 tab 的邏輯View view = tab.getCustomView();if (null != view && view instanceof TextView) {((TextView) view).setTextSize(14);}}@Overridepublic 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;}@Overridepublic Fragment getItem(int i) {Fragment fragment = null;if (i < list.size()) {fragment = list.get(i);} else {fragment = list.get(0);}return fragment;}@Overridepublic int getCount() {return list.size();}@Overridepublic 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@Overridepublic 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"><TextViewandroid: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@Overridepublic 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"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="初中"android:gravity="center"></TextView> </RelativeLayout>

7.最終效果圖如下：

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

總結

以上是生活随笔為你收集整理的Android --- TabLayout 切换时，改变选项卡下字体的状态（大小、加粗、默认被选中第一个）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。