自定义RadioButton的drawable在API 21/22及以下版本中出现问题

Question

我已经为AppCompatButton创建了自定义可绘制对象，对于API级别23及以上的版本，它可以完美地工作。

这是自定义可绘制对象的代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/background_radio_checked" android:state_checked="true" />
    <item android:drawable="@drawable/background_radio_unchecked" android:state_checked="false" />
</selector>

背景单选框已选中 -

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

    <item
        android:left="-8dp"
        android:right="-8dp"
        android:top="-8dp">
        <shape>
            <solid android:color="#FFF1EEFF" />
            <stroke
                android:width="1dp"
                android:color="@color/color_ask_question" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/screen_margin_half"
        android:drawable="@drawable/ic_add_filled_24dp"
        android:gravity="start|center_vertical"
        android:left="@dimen/screen_margin_half_plus_four"
        android:right="@dimen/screen_margin_half"
        android:top="@dimen/screen_margin_half" />
</layer-list>

background_radio_unchecked -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="@color/color_employer_divider" />
            <solid android:color="#F2F2F2" />
            <corners android:topLeftRadius="@dimen/screen_margin_half_half_half" />
        </shape>
    </item>
    <item
        android:bottom="@dimen/screen_margin_half"
        android:drawable="@drawable/ic_add_empty_24dp"
        android:gravity="start|center_vertical"
        android:left="@dimen/screen_margin_half_plus_four"
        android:right="@dimen/screen_margin_half"
        android:top="@dimen/screen_margin_half" />
</layer-list>

使用的可绘制对象是SVG，高度和宽度均为24dp。

在API 23+上的外观如下所示： 但是，在API级别21上，同样的东西看起来很糟糕。

在可绘制的图像中，图像被拉伸到完整的宽度。 尝试删除动画，但结果仍然相同。

不确定我做错了什么或者遗漏了什么。 似乎我正在使用一些仅在API 23及以上才有的属性，但不确定是哪一个。

- Mihir Patel

---

你能否检查一下PNG格式吗？ - DKV

尝试使用PNG格式，结果相同 :( - Mihir Patel

Answer 1

我自己来回答，希望能帮到其他人。

我将这个可绘制对象设置为单选按钮的背景，并在按钮属性中传递了"@null"。

        <android.support.v7.widget.AppCompatRadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/custom_radio_button_backgorund"
            android:button="@null"
            android:checked="true" />

这个无法正常工作，所以我创建了两个不同的自定义Drawable，分别用于按钮和背景。

对于背景的自定义Drawable，我只使用了具有边框、背景颜色、半径等属性的形状，但没有图标。而对于按钮的自定义Drawable，则使用了图标。

在背景和按钮中分配这两个自定义Drawable，可以使得在Lollipop设备及以上版本中都能正常工作。

            <android.support.v7.widget.AppCompatButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/custom_radio_background"
                android:button="@drawable/custom_radio_button"
                android:checked="true" />

-----------自定义背景的可绘制对象-----------

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/background_radio_checked_background" android:state_checked="true" />
    <item android:drawable="@drawable/background_radio_unchecked_background" android:state_checked="false" />
</selector>

background_radio_checked_background -

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

    <item
        android:left="-8dp"
        android:right="-8dp"
        android:top="-8dp">
        <shape>
            <solid android:color="#EBFFF7" />
            <stroke
                android:width="1dp"
                android:color="#118F5D" />
        </shape>
    </item>
</layer-list>

背景无选中时的样式 -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="@color/color_employer_divider" />
            <solid android:color="#F2F2F2" />
            <corners android:topRightRadius="@dimen/screen_margin_half_half_half" />
        </shape>
    </item>
</layer-list>

-----------为按钮创建自定义绘制图形-----------

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/background_radio_checked_button" android:state_checked="true" />
    <item android:drawable="@drawable/background_radio_unchecked_button" android:state_checked="false" />
</selector>

背景无线电选中按钮 -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="@dimen/screen_margin_half"
        android:drawable="@drawable/ic_poll_filled_24dp"
        android:gravity="start|center_vertical"
        android:left="@dimen/screen_margin_half_plus_four"
        android:right="@dimen/screen_margin_half"
        android:top="@dimen/screen_margin_half" />
</layer-list>

背景无选中按钮 -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="@dimen/screen_margin_half"
        android:drawable="@drawable/ic_poll_empty_24dp"
        android:gravity="start|center_vertical"
        android:left="@dimen/screen_margin_half_plus_four"
        android:right="@dimen/screen_margin_half"
        android:top="@dimen/screen_margin_half" />
</layer-list>

我仍然不确定为什么在Lollipop设备上创建一个既包含图标又包含边框/背景颜色的单个可绘制对象无法正常工作。

欢迎对此解决方案进行建议和更正。

- Mihir Patel