【Android】 Drawable xml里layer-list定义的形状在低版本被拉伸的问题

in 默认分类 with 0 comment

问题详情

收到一个反馈提示在魅族M2手机上一个显示兼容问题

24

设置下方和成员一栏背景展示有问题,按照预期,因该是类似下方置顶选项那样的背景,白色ripple水波纹,下方带一条灰色的分割线。奇怪的是,在我另外的2台设备上展示均正常。

问题排查

他提醒我说是不是 shape 标签没有定义形状或者颜色,因为在某些机型上他也许默认不是 rectengle,检查了xml,问题不是这个。当时的代码如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/huise">
    <item android:state_enabled="true">
        <layer-list>
            <!-- 此处为分割线 -->
            <item>
                <shape android:shape="rectangle">
                    <size android:height="0.5dp"/>
                    <solid android:color="@color/huise_4"/>
                </shape>
            </item>
            <!-- 此处为水波纹 -->
            <item>
                <ripple android:color="@color/huise">
                    <item>
                        <inset android:drawable="@color/background_white_8_0"
                            android:insetBottom="0.5dp"/>
                    </item>
                </ripple>
            </item>
        </layer-list>
    </item>

<!--  当设备为不启用时, 点击将不会有水波纹效果  -->
    <item>
        <layer-list>
            <!-- 此处为分割线 -->
            <item>
                <shape android:shape="rectangle">
                    <size android:height="0.5dp"/>
                    <solid android:color="@color/huise_4"/>
                </shape>
            </item>
            <!-- 此处为背景色 -->
            <item>
                <inset android:drawable="@color/background_white_8_0"
                    android:insetBottom="0.5dp"/>
            </item>
        </layer-list>
    </item>

上述代码中也已定义了颜色以及限制了高度为0.5dp。

经过一番查找原因,终于找到了是使用了 android:gravity="bottom"这个属性并不支持 API23 以下的设备,因此相关的设置不生效。解决方法可以使用 inset标签或者clip标签代替。

最终经过权衡使用了inset标签解决此问题,inset用法表现起来有点类似padding

转变了下思路,让背景色为分割线颜色,而ripple背景色为白色,盖在分割线上方,不过底部设置insetBottom流出一条缝隙,能看到背后的灰色,看起来就像是分割线了。

修改后的代码如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/huise">
    <item android:state_enabled="true">
        <layer-list>
            <item>
                <ripple android:color="@color/huise">
                    <item>
                        <color android:color="@color/background_white_8_0"/>
                    </item>
                </ripple>
            </item>
            <!-- 此处为分割线 -->
            <item android:gravity="bottom">
                <shape android:shape="rectangle">
                    <size android:height="0.5dp"/>
                    <solid android:color="@color/huise_4"/>
                </shape>
            </item>
        </layer-list>
    </item>

<!--  当设备为不启用时, 点击将不会有水波纹效果  -->
    <item>
        <layer-list>
            <item>
                <color android:color="@color/background_white_8_0"/>
            </item>
            <item android:gravity="bottom">
                <shape android:shape="rectangle">
                    <size android:height="0.5dp"/>
                    <solid android:color="@color/huise_4"/>
                </shape>
            </item>
        </layer-list>
    </item>


</selector>

修改后的展示效果是这样的,也恢复了正常

25

参考链接

act262 - layer-list被拉伸问题

https://www.jianshu.com/p/34ac5965533d