Android layer-list 中图片被拉伸问题

最新推荐文章于 2022-10-09 20:42:32 发布

原创最新推荐文章于 2022-10-09 20:42:32 发布 · 1.1w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

Android 同时被 3 个专栏收录

13 篇文章

订阅专栏

layer-list

1 篇文章

订阅专栏

selector

1 篇文章

订阅专栏

本文探讨了Android中使用XML定义图标的拉伸问题，并提供了解决方案。通过对比不同写法的效果，发现使用特定的方法可以避免在不同API版本设备上的拉伸现象。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

无图无真相，先上图：
这里写图片描述

其中 item 1~5 是正正常的，后面本来应该显示在右下角的icon 都被拉伸了。
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:reader="http://schemas.android.com/apk/res-auto">

    <item reader:state_chapter_download_accomplish="true">
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@color/text_color_comic_e" />
                    <stroke android:width="0.5dp" android:color="@color/text_color_comic_g" />
                    <corners android:radius="20dp" />
                </shape>

            </item>
            <!--item 1 ~ 5 采用了正确的洗发，因此没有被拉伸-->
            <item>
                <bitmap android:src="@drawable/reader_select_to_download_item_status_accomplish" android:gravity="bottom|right"/>
            </item>
            <!--下面注释掉这种写法在低版本手机上会被拉伸，我测试的两台手机，一个是API27 一个是API18,如果按照下面的写法在API27 上没事，API18 上会被拉伸，正确的写法应该是上面这种，用item 标签 包 bitmap 标签抱起来-->
            <!--<item android:drawable="@drawable/reader_select_to_download_item_status_accomplish" android:gravity="bottom|right"/>-->
        </layer-list>
    </item>

 <!--一下的写法导致后面的的图片都被拉伸了-->
    <item reader:state_chapter_download_loading="true">
        <layer-list>
            <item >
                <shape android:shape="rectangle">
                    <solid android:color="@color/text_color_comic_e" />
                    <stroke android:width="0.5dp" android:color="@color/text_color_comic_g"/>
                    <corners android:radius="20dp" />
                </shape>

            </item>
            <item android:drawable="@drawable/reader_select_to_download_item_status_loading" android:gravity="bottom|right"/>
        </layer-list>
    </item>




    <item android:state_checked="true" reader:state_chapter_need_pay ="true" >
        <layer-list>
            <item >
                <shape android:shape="rectangle">
                    <solid android:color="@color/text_color_comic_k" />
                    <stroke android:width="0.5dp" android:color="@color/text_color_comic_g"/>
                    <corners android:radius="20dp" />
                </shape>

            </item>
            <item android:drawable="@drawable/reader_select_to_download_item_status_buy" android:gravity="bottom|right">
            </item>
        </layer-list>
    </item>

    <item android:state_checked="false" reader:state_chapter_need_pay ="true" >
        <layer-list>
            <item >
                <shape android:shape="rectangle">
                    <solid android:color="@color/text_color_comic_e" />
                    <stroke android:width="0.5dp" android:color="@color/text_color_comic_g"/>
                    <corners android:radius="20dp" />
                </shape>

            </item>
            <item android:drawable="@drawable/reader_select_to_download_item_status_buy" android:gravity="bottom|right">
            </item>
        </layer-list>
    </item>


    <item android:state_checked="true" reader:state_chapter_need_pay ="false" >
        <layer-list>
            <item >
                <shape android:shape="rectangle">
                    <solid android:color="@color/text_color_comic_k" />
                    <stroke android:width="0.5dp" android:color="@color/text_color_comic_g"/>
                    <corners android:radius="20dp" />
                </shape>

            </item>
        </layer-list>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/text_color_comic_e" />
            <corners android:radius="20dp" />
            <stroke android:width="0.5dp" android:color="@color/text_color_comic_g" />
        </shape>
    </item>
</selector>