Android给Shape设置size属性无效的问题

发现问题

需要给TabLayout设置一个Indicator, 代码如下

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_40"
    app:tabIndicator="@drawable/tab_indicator_line"
    app:tabIndicatorColor="#FE5100"
    app:tabIndicatorFullWidth="false"
    app:tabSelectedTextColor="#FE5100"
    app:tabTextAppearance="@style/BoxGoodsTab" />

其中tab_indicator_line.xml，设置了size属性

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="3dp"
        android:width="24dp"/>
    <gradient android:startColor="#FE5100"/>
</shape>

预期效果

预期.jpg

结果

结果.jpg

经过测试，size的width属性无论如何设置，都没有任何变化，所以基本可以断定这边设置是无效的。

会不会是TabLayout的原因？不会。经过测试，将shap资源设置到一个TextView的背景上，效果基本差不多（都是满的全View大小的拉伸），并没有本质上的区别。

猜想

类比.9图，我们可以知道，在.9图左、上两个边，只要有黑色的像素出现，就可以知道图片该如何拉伸、怎么拉伸。但是Shape属性这里没有，它不知道该如何拉伸，所以它只能按照默认的满View进行拉伸，而不得不忽略这里设置的size属性。

验证猜想

根据经验，layer-list也可以设置shape，那是不是可以实现一样的功能呢？
稍微改造下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center">
        <shape android:shape="rectangle">
            <size
                android:width="24dp"
                android:height="3dp" />
            <gradient android:startColor="#FE5100" />
        </shape>
    </item>
</layer-list>

经过验证，设置到上图的Tablayout中, 效果已符合预期。
其中layer-list仅设置了一个item，附带位置（gravity）居中和shape大小。这样，可不可认为，我已经“声明”了，我要居中显示这个shape并且仅显示我设置的这个大小，也就意味着，它知道怎么拉伸这一整个图片了（默认其他区域全透明）。

结论

给Shape设置size属性无效时，在他的外面套一层layer-list就可以了。

最后，延伸实践一下，效果完全符合预期。代码如下（附效果）：

效果图.png

<androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginRight="10dp"
            android:background="@drawable/tab_indicator_line"
            android:paddingHorizontal="15dp"
            android:paddingVertical="5dp"
            android:text="待提货" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginRight="10dp"
            android:background="@drawable/tab_indicator_line2"
            android:paddingHorizontal="15dp"
            android:paddingVertical="5dp"
            android:text="待提货" />
    </androidx.appcompat.widget.LinearLayoutCompat>

tab_indicator_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="bottom|center_horizontal">
        <shape android:shape="rectangle">
            <size
                android:width="24dp"
                android:height="3dp" />
            <gradient android:startColor="#FE5100" />
        </shape>
    </item>
</layer-list>

tab_indicator_line2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="3dp"
        android:width="24dp"/>
    <gradient android:startColor="#FE5100"/>
</shape>

如果本文对你有帮助就点个赞支持下吧~