为了账号安全,请及时绑定邮箱和手机立即绑定

记一次tablayout的tabView偷偷自带padding的问题

标签:
Android

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

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

图片描述

代码地址 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效果如下
图片描述
这样指示器的效果就出来了,很简单,但是这不是本文的重点。

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

手抖了一下把 选中圆的thickness属性值改成了100dp结果就出现了很诧异的一幕了,效果图如下
图片描述
然后发现虚拟机(限宽为64px)和手机(限宽为72px)这个限制宽度不一致,应该是和分辨率有关的,系统设置的一个默认值。
来fuck源码看看这是怎么回事!
图片描述
通过fuck源码发现居然自己调用了padding赋值语句,官方sample代码里面xml里面都没有设置padding啊,继续fuck
原来在这设置的
图片描述
在TabView构造函数就调用了setPaddingRelative,而mTabPaddingStartmTabPaddingEnd仅在TabLayout构造方法里面赋值,但是官方sample代码里面xml里面都没有设置mTabPaddingStartmTabPaddingEnd所有这个是系统默认值。

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

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

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

点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
1万
获赞与收藏
137

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消