谨以此献给在外漂泊和奋斗的程序员!!!
游子吟
作者:孟郊慈母手中线,游子身上衣。临行密密缝,意恐迟迟归。谁言寸草心,报得三春晖。复制代码
今天我们来说说TabLayout在开发中的一些使用集锦!
本文知识点:
- TabLayout是什么?
- TabLayout的一下常见设置;
- TabLayout的基本使用;
- TabLayout的一些特殊配置;
- TabLayout的一些常见案例。
1. TabLayout是什么?
TabLayout提供了一个水平布局来显示选项卡。之前我们在使用选项卡的时候都是使用RadioGroup和RadioButton实现的,也有使用三方框架的。其实最主要的是没有TabLayout的动画效果,代码还很复杂!
2. TabLayout的一些常见设置
2.1 基本的属性设置
- app:tabBackground 设置背景
- app:tabGravity 设置填充类型的
- fill 全部填充 默认的
- center 居中,但是这个是包裹内容的
- tabIndicatorColor 设置选项卡底部横线的颜色
- tabIndicatorHeight 设置选项可底部横线的高度
- tabMaxWidth 设置最大宽度
- tabMinWidth 设置最小宽度
- tabMode 设置模式
- MODE_FIXED 固定选项卡,可以显示所有选项卡,但是多的话不建议使用
- MODE_SCROLLABLE 可以滑动的选项卡,这里涉及到上面的最大宽度,可以自行设置
- app:tabPadding 设置padding 可以分别设置左上右下的padding距离
- app:tabSelectedTextColor 设置选择的文字颜色
- app:tabTextAppearance 设置文字的样式
- app:tabTextColor 设置默认的文字的颜色
- TabItem 内部维护的标签
- android:icon 设置图标的
基本的设置就这么多,上一张基本设置的效果图
代码是这样滴
复制代码
2.2 关联ViewPager的操作
这应该是最常见的操作了。一般由TabLayout都会关联ViewPager,但是由很多APP是通过
FragmentTransaction
进行替换的。这里先不去说关于这种方法的实现,感兴趣的同学可以自己研究一下!
2.2.1 当你在布局文件中设置了相应的标签
对于这种情况,基本上是标签固定的情况的设置,直接通多代码关联一下就可以了!
- setupWithViewPager(@Nullable ViewPager viewPager)
- setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh)
由两个相应的重载方法,这个autoRefreshsh是是否需要布局更新的,也就是说你TabLayout的标签增加的时候,是否需要更新(但是如果你新增了标签的话,需要更改相应的ViewPager的适配器中的条目)!如果你想选择一个指定的条目,可以通过mTb.getTabAt(i).select();
进行相应的选择!!!
2.2.2 当你的标签是从服务器过来的时候
很多APP的标签内容是通过服务器过来的,那么就存在一个动态改变的操作了,往往是通过代码去实现条目的,放心。也很简单,像这样!!!
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));复制代码
就可以动态的添加tab了。
坑
你在布局文件或者动态设置的标签文字的时候,发现文字不见了?what???我明明设置了。。。这里你只需要重写一下ViewPager适配器中的getPageTitle(int position)
方法,把标题设置进去就好了。其实这个只是针对于标签固定的内容设置的,但是一般我们的标签都是不确定个数的,所以一般都是这样设置的。
3. TabLayout的一些特殊配置
3.1 更改TabLayout显示的文字
许多挑剔的产品或者美工,会提出各种各样的关于文字显示方面的内容,每次我都觉得一个字体就影响用户体验了?所以当时我的想法是酱紫的。。。
其实是可以改的,但是真的就影响用户体验吗?你可以这样改!
复制代码
然后通过app:tabTextAppearance="@style/TabLayoutStyle"
设置进去就好了。这里说明一下,其实TabLayout里面默认由三种文字状态
- TextAppearance.Large
- TextAppearance.Medium
- TextAppearance.Small 感兴趣的同学可以设置看看效果!
3.2 关于TabLayot图标的问题
默认情况下,你设置的图标是在上边的,但是产品跑过来说,放在左边把!这样好看一点,好看个大头鬼啊!天天就改改改的.....我的终极绝招是通过代码把里面的内容全部自定义,其实很简答的啊!TabLayout给我们提供了一个方法,这个方法是Tab的
setCustomView()
设置你想要的布局的,但是一下几点内容需要注意的!也是我踩了很久的坑。。。
- getCustomView(); 空指针异常的问题。 起初我还以为我哪里写错了,网上各种找,各种对比,后来我发现了一个问题,如果你在
setupWithViewPager();
之前调用添加自定义view的方法(也就是setCustomView())的时候,那么后面不管你怎么取都会是空,然后我就在像之前的标题没有出现的问题,我有了一个大胆的假设,其实你的Tab生成的时机应该是关联ViewPager之后,所以在这之前你设置的标题才不显示的,但是你传入标题的时候,设置标题,因为ViewPager认为标题是固定的,所以这种方式的时候,才会有标题,大家注意一下这里就好了!!!顺序问题。。。 - 设置自定义后的文字显示问题。 当你设置了自定义View的时候,文字的变色问题就很明显了,这个时候你只要写一个selector就可以解决问题了!
这样无论图标的问题就不是问题了,你想放在哪里都可以了。对于美工不能怂。
3.3 关于TabLayout的选中背景
在相应的样式中设置 **@drawable/tab_background**这个样式也是一个状态选择器,自己写喜欢的就好了!
3.4 关于TabLayout的监听问题
有的时候会有监听点击了那么TabLayout的操作,关于TabLayout的监听,这里就有必要说明一下了!
- addOnTabSelectedListener(@NonNull OnTabSelectedListener listener)
TabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { //选择的Tab } @Override public void onTabUnselected(TabLayout.Tab tab) { //推出选中的Tab } @Override public void onTabReselected(TabLayout.Tab tab) { //重新选中Tab的操作 } });复制代码
所有的回调都是针对于一个Tab进行操作的。想怎么改变在相应的回调红进行处理就好了!
这里上两张效果图,小伙伴们自己想想怎么实现的,如果你不知道怎么实现的话,可以去 上看看怎么实现的。今天的内容就这么多了,别忘了给自己的母亲打个电话!!!see you...