Android TabLayout切换时,改变选中状态下字体大小颜色

需求:TabLayout和ViewPager实现左右切换联动,选中状态下字体变大,黑色  非选中状态下小字

先看一段腾讯视频效果图:

 

思路:

TabLayout没有什么属性可供满足需求,所以只能想办法给选中tab定制TextView,再根据监听TabLayout的选中状态设置该TextView的显示样式。

 

1.注解 BindView
@BindView(R.id.toolbar_tab)
TabLayout toolbarTab;
@BindView(R.id.view_pager)
ViewPager viewPager;

 

2. TabLayout + viewPager

 

if(!isAdded()){
    return;
}
adapter = new TabPagerAdapter(getChildFragmentManager(),tabList);  //tabList,自己的数据
viewPager.setAdapter(adapter);
viewPager.setCurrentItem(1);
viewPager.setOffscreenPageLimit(3);
toolbarTab.setupWithViewPager(viewPager);
for (int i = 0; i < toolbarTab.g
### 如何设置 Android TabLayout选中项字体样式Android 开发中,可以通过自定义 `TabLayout` 来实现选中项的字体样式的动态变化。以下是具体方法: #### 方法一:通过 XML 配置默认字体样式 可以在 XML 文件中配置默认的字体大小风格。例如,在 `styles.xml` 中创建一个名为 `TabLayoutTextSize_two` 的样式[^1]: ```xml <style name="TabLayoutTextSize_two"> <item name="android:textSize">@dimen/font16</item> <item name="android:textStyle">normal</item> </style> ``` 此样式设置选中字体大小为 `font16` 并保持正常风格。 #### 方法二:通过自定义 View 实现选中态的变化 为了实现在切换改变字体大小或加粗的效果,可以使用自定义视图的方式。以下是一个完整的解决方案][^[^23]: ##### 自定义 Tab 布局文件 (`custom_tab_view.xml`) ```xml <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"/> ``` ##### 动态设置字体样式逻辑 (Java/Kotlin) 当用户点击某个标签页,可以根据当前选中的位置更新对应的 TextView 属性。下面是一段 Java 代码示例[^4]: ```java public class MainActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout = findViewById(R.id.tab_layout); viewPager = findViewById(R.id.view_pager); // 设置适配器并绑定数据 MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); // 将 TabLayout ViewPager 关联起来 tabLayout.setupWithViewPager(viewPager); // 添加监听事件处理字体样式变更 tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { // 当前选中状态下的操作 setCustomFont(tab, true); } @Override public void onTabUnselected(TabLayout.Tab tab) { // 取消选中状态的操作 setCustomFont(tab, false); } @Override public void onTabReselected(TabLayout.Tab tab) {} }); } /** * 更新指定 Tab 的字体样式 */ private void setCustomFont(TabLayout.Tab tab, boolean isSelected) { View view = tab.getCustomView(); if (view != null && view instanceof TextView) { TextView textView = (TextView) view; if (isSelected) { textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18); // 改变文字大小 textView.setTypeface(null, Typeface.BOLD); // 加粗显示 } else { textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14); // 还原文字大小 textView.setTypeface(null, Typeface.NORMAL); // 正常显示 } } } } ``` 上述代码实现了如下功能: - 使用 `setCustomFont()` 函数调整选中与非选中状态下字体的大小以及是否加粗。 - 结合 `addOnTabSelectedListener()` 接口捕获用户的交互行为,并实修改对应 Tab 的外观特性。 --- ### 总结 以上介绍了两种方式来定制化 `TabLayout` 的字体表现形式——一种是静态设定全局属性;另一种则是借助程序控制机制完成更灵活多样的视觉反馈设计。开发者可根据实际需求选取适合自己的方案加以应用。
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值