1. 官方demo ViewPage指示器效果图这次故事主人翁还是tablayout,在github看官方demo的时候https://github.com/googlesamples/android-media-controller,效果图有一个指示器效果,于是我点进去看了代码,手贱改了一点东西发现了一点问题
代码地址 https://github.com/googlesamples/android-media-controller
实现原理也很简单 使用tablayout,核心代码片段如下
代码中绑定tablayout和viewpager
final TabLayout pageIndicator = findViewById(R.id.page_indicator);
pageIndicator.setupWithViewPager(mViewPager);
<android.support.design.widget.TabLayout
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代码如下
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="3dp"
android:useLevel="false">
<solid android:color="@color/colorAccent" />
</shape>
</item>
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="3dp"
android:useLevel="false">
<solid android:color="@color/colorInactive" />
</shape>
</item>
</selector>
以上代码就能实现简单的位于界面下方居中的viewpager指示器了,如果要选中的圆大一点的效果就
改一下上面
<item android:state_selected="true">
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="改成你想要的选中大小"
android:useLevel="false">
<solid android:color="@color/colorAccent" />
</shape>
</item>
我这里改了10dp效果如下
这样指示器的效果就出来了,很简单,但是这不是本文的重点。
手抖了一下把 选中圆的thickness
属性值改成了100dp结果就出现了很诧异的一幕了,效果图如下
然后发现虚拟机(限宽为64px)和手机(限宽为72px)这个限制宽度不一致,应该是和分辨率有关的,系统设置的一个默认值。
来fuck源码看看这是怎么回事!
通过fuck源码发现居然自己调用了padding赋值语句,官方sample代码里面xml里面都没有设置padding啊,继续fuck
原来在这设置的
在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只是参考,你可以自己设置咯,本文结束
共同学习,写下你的评论
评论加载中...
作者其他优质文章