这次故事主人翁还是tablayout,在github看官方demo的时候https://github.com/googlesamples/android-media-controller,效果图有一个指示器效果,于是我点进去看了代码,手贱改了一点东西发现了一点问题

1. 官方demo ViewPage指示器效果图

AAffA0nNPuCLAAAAAElFTkSuQmCC

实现原理也很简单 使用tablayout,核心代码片段如下

代码中绑定tablayout和viewpager

final TabLayout pageIndicator = findViewById(R.id.page_indicator);

pageIndicator.setupWithViewPager(mViewPager);

android:id="@+id/page_indicator"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:background="@android:color/transparent"

app:tabBackground="@drawable/tab_indicator"

app:tabGravity="center"

app:tabIndicatorHeight="0dp" />

tabBackground属性就是指示器单个圆的样式,drawable/tab_indicator代码如下

android:innerRadius="0dp"

android:shape="ring"

android:thickness="3dp"

android:useLevel="false">

android:innerRadius="0dp"

android:shape="ring"

android:thickness="3dp"

android:useLevel="false">

以上代码就能实现简单的位于界面下方居中的viewpager指示器了,如果要选中的圆大一点的效果就

改一下上面

android:innerRadius="0dp"

android:shape="ring"

android:thickness="改成你想要的选中大小"

android:useLevel="false">

我这里改了10dp效果如下

AAffA0nNPuCLAAAAAElFTkSuQmCC

这样指示器的效果就出来了,很简单,但是这不是本文的重点。

2. 重点来了,谁限制了我的宽度!

手抖了一下把 选中圆的thickness属性值改成了100dp结果就出现了很诧异的一幕了,效果图如下

AAffA0nNPuCLAAAAAElFTkSuQmCC

然后发现虚拟机(限宽为64px)和手机(限宽为72px)这个限制宽度不一致,应该是和分辨率有关的,系统设置的一个默认值。

来fuck源码看看这是怎么回事!

AAffA0nNPuCLAAAAAElFTkSuQmCC

通过fuck源码发现居然自己调用了padding赋值语句,官方sample代码里面xml里面都没有设置padding啊,继续fuck

原来在这设置的

AAffA0nNPuCLAAAAAElFTkSuQmCC

在TabView构造函数就调用了setPaddingRelative,而mTabPaddingStart和mTabPaddingEnd仅在TabLayout构造方法里面赋值,但是官方sample代码里面xml里面都没有设置mTabPaddingStart和mTabPaddingEnd所有这个是系统默认值。

我们肯定不能让系统默认值干扰我们指示器的 android:thickness的大小,因此建议在TabLayout声明的xml中加入

app:tabPaddingStart="选中状态的android:thickness值/2"

app:tabPaddingEnd="选中状态的android:thickness值/2"

当然这里选中状态的android:thickness值/2只是参考,你可以自己设置咯,本文结束

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐