关于android 自定义TabBar的一些坑

需求

tabbar - item 突出

tmp303da380.png

ui结构

viewgroup + item布局

关于图标突出的实现

查看了几个库,两种思路:

clipchildren

这种思路,缺点,严重的缺点:超出部分,交互是异常的:viewgroup的事件机制所致,会响应到下面的布局上

坑点:这坑点不算大,查资料很多,clipchildren要设置到跟布局上,其实每个父布局都要设置这个属性:clipchildren = false。。。一直设置到activity或fragment的根节点上。。。所以,ui嵌套复杂的,还是转constraintlayout吧

最后,由于它的缺点,放弃了,使用下面的方案了

根布局写死突出图标

这种方案,缺点,让强迫症抓狂的缺点:既然我是封装库的,这个ui却要写到外面。并且不灵活啊,如果项目需求不同的身份,tabbaritem是有变动的,咋整。。。话说回来,item变动时候,突出图标不在中间的话,说明产品设计不合理

坑点因为采用这种方案,实在遇到hin多问题

fab自定义

第一个尝试的是fab,因为fab的交互很棒,点击给你的反馈很爽。。

android中使用fab,强迫癌会犯的,为毛设置width、height不管用,为毛图片要么很大要么很小呢

<dimen name="design_fab_size_normal" tools:ignore="PrivateResource">56dp</dimen>
<dimen name="design_fab_image_size" tools:override="true">24dp</dimen>

查看一下fab的源码,能找到fab是通过dimen资源设置的,

elevation

阴影,官方属性是:elevation

然后,就是各种尝试,viewgroup + iv,ivbutton,cl + iv等,在as中preview查看,都有阴影,但是真机跑起来就是mao都没有。天了噜,要不是我hin~,就放弃了

末了:问题出在shape上,stroke,stroke,stroke。。。切记,描边了,阴影就给搞没了,what‘s the 法克。。

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:radius="22dp" />
</shape>

或者

<shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="44dp" android:height="44dp"/>
</shape>

然后,阴影有了,就要追求fab那样的交互了:


android:stateListAnimator="@drawable/lift_on_touch"
android:foreground="?android:attr/selectableItemBackground"


<!--lift_on_touch 点击有下沉效果-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="6dp"
                android:valueType="floatType"/>
        </set>
    </item>
    <item>
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="0dp"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

补充

imageview设置elevation不管用。以为是png图怕的问题,png的通道是透明的,所以,又说设置阴影不管用

https://blog.csdn.net/u013564276/article/details/51701153

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容