Android——TabLayout 切换时，改变选项卡下字体的状态（大小、加粗、默认被选中第一个）
文章目录
-
- 一、前言
- 二、源码实例
-
- 1.选项卡所在的布局文件 `fragment_course_selection.xml`
- 2.选项卡所在类 `CourseSelectionFragment.java`
- 3.选项卡适配器 `SelectCourseAdapter`
- 4.自定义选项卡字体样式 View 布局 `tablayout_item.xml`
- 5.ViewPager 内容类 `PrimaryFragment1`
- 6.ViewPager 内容类 `PrimaryFragment2`
- 7.最终效果图如下：
一、前言
今天在写 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.最终效果图如下：
如果复制黏贴代码的时候报错缺东西，请在评论区留言