博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
MaterialDesign系列文章(八)TabLayout的使用
阅读量:6859 次
发布时间:2019-06-26

本文共 3510 字,大约阅读时间需要 11 分钟。

今天是母亲节,希望所有在外漂泊的程序员,动动手给母亲打个电话,告诉她我们长大了,谢谢你这么多年的照顾!让她们在这个简单而又不平凡的日子里,增添一缕欣慰!

谨以此献给在外漂泊和奋斗的程序员!!!

游子吟

作者:孟郊慈母手中线,游子身上衣。临行密密缝,意恐迟迟归。谁言寸草心,报得三春晖。复制代码

今天我们来说说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...

转载地址:http://unxyl.baihongyu.com/

你可能感兴趣的文章
phpmyadmin 自动登录的办法
查看>>
苹果各版本手机更换电池的视频
查看>>
在Centos7.x中安装psutil模块
查看>>
深度学习的异构加速技术(二):螺狮壳里做道场
查看>>
html5--1.10绝对路径和相对路径
查看>>
运维监控系统+堡垒机
查看>>
30岁的思考
查看>>
【转】Linux mysql停止失败的解决办法 Stopping MySQL database server mysqld [fail]
查看>>
tomcat8配置tomcat-users.xml不生效
查看>>
splay树入门(带3个例题)
查看>>
CentOS 6.9使用iptables搭建网关服务器(转)
查看>>
MySQL学习笔记(二)
查看>>
Kafka的生产者和消费者代码解析
查看>>
Intellij Idea编译项目下的.java文件时的编码问题
查看>>
【深度学习系列】PaddlePaddle可视化之VisualDL
查看>>
[离散时间信号处理学习笔记] 11. 连续时间信号的采样与重构
查看>>
python os.system()和os.popen()
查看>>
Tensorflow1.4 高级接口使用(estimator, data, keras, layers)
查看>>
Unix环境高级编程(四)数据系统文件和信息
查看>>
孟晓阳:IT运行监控系统设计与使用心得
查看>>