android - 在 android 中自定义时 Swich 背景图像拉伸(stretch)

Question

我正在尝试自定义 Switch。我使用 xml 文件来实现switch_bg_selector.xml

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

和track_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/cd_filled_toggle_bg" android:state_checked="true"/>
<item android:drawable="@drawable/cd_filled_toggle_white_bg" android:state_checked="false"/>
<item android:drawable="@drawable/cd_filled_toggle_white_bg"/>
</selector>

开关的代码是

<Switch
android:id="@+id/toggle_email_diss_invi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:textOff=""
android:textOn=""
android:thumb="@drawable/switch_bg_selector"
android:thumbTextPadding="25dp"
android:track="@drawable/track_bg_selector"
/>

我使用的背景图像针对所有 xxhdpi、xhdpi、hdpi 和 mdpi 进行了切片，但问题是图像被拉伸(stretch)了。我花了很多时间来解决这个问题，但没有找到合适的解决方案。我附上了我的开关外观的屏幕截图。

它应该是这样的

下面是我正在使用的可绘制对象

Answer 1

我正在实现相同的切换按钮。我最终也得到了与您一样的拉伸(stretch)背景。这种拉伸(stretch)的原因是拇指图像与轨道图像不兼容。在我的案例中，拇指图像的左右填充太多。我也尝试了 9patch 图像，但它没有用。我想出了以下解决方案:

1. 使用非常小的可绘制对象，这样当切换轨道和拇指获取图像时，它会自动看起来像您要求的切换。
2. 将我的轨道 svg 转换为可绘制的矢量，并为我的拇指使用了 png。这也奏效了。

但最后我找到了最好的解决方案并使用它代替了上述解决方法

将这些 xml 文件复制到您的可绘制文件夹中。

switch_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="25dp"
android:height="25dp"
android:viewportWidth="25"
android:viewportHeight="25">

<group
        android:translateX="-59.000000"
        android:translateY="-103.000000">
    <group
            android:translateX="40.000000"
            android:translateY="103.000000">
        <path
            android:fillColor="#FFFFFF"
            android:fillType="evenOdd"
            android:strokeWidth="1"
            android:pathData="M 31.5 4 C 36.1944203736 4 40 7.80557962644 40 12.5 C 40 17.1944203736 36.1944203736 21 31.5 21 C 26.8055796264 21 23 17.1944203736 23 12.5 C 23 7.80557962644 26.8055796264 4 31.5 4 Z" />
    </group>
</group>
</vector>

switch_thumb_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_thumb">
    </item>
</selector>

switch_track_off.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="44dp"
android:height="25dp"
android:viewportWidth="44"
android:viewportHeight="25">

<group
        android:translateX="-40.000000"
        android:translateY="-103.000000">
    <group
            android:translateX="40.000000"
            android:translateY="103.000000">
        <path
            android:fillColor="#FFF17B02"
            android:fillType="evenOdd"
            android:strokeWidth="1"
            android:pathData="M12.5,0 L31.5,0 C38.4035594,-1.26816328e-15 44,5.59644063 44,12.5 L44,12.5 C44,19.4035594 38.4035594,25 31.5,25 L12.5,25 C5.59644063,25 7.95086955e-15,19.4035594 7.10542736e-15,12.5 L7.10542736e-15,12.5 C6.25998517e-15,5.59644063 5.59644063,1.26816328e-15 12.5,0 Z" />
    </group>
</group>
</vector>

switch_track_on.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="44dp"
android:height="25dp"
android:viewportWidth="44"
android:viewportHeight="25">

<group
        android:translateX="-40.000000"
        android:translateY="-103.000000">
    <group
            android:translateX="40.000000"
            android:translateY="103.000000">
        <path
            android:fillColor="#FFF17102"
            android:fillType="evenOdd"
            android:strokeWidth="1"
            android:pathData="M12.5,0 L31.5,0 C38.4035594,-1.26816328e-15 44,5.59644063 44,12.5 L44,12.5 C44,19.4035594 38.4035594,25 31.5,25 L12.5,25 C5.59644063,25 7.95086955e-15,19.4035594 7.10542736e-15,12.5 L7.10542736e-15,12.5 C6.25998517e-15,5.59644063 5.59644063,1.26816328e-15 12.5,0 Z" />
    </group>
</group>
</vector>

switch_track_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_track_on" 
    android:state_checked="true" />
    <item android:drawable="@drawable/switch_track_off" 
android:state_checked="false"/>
</selector>

最后就可以按如下方式使用开关了:

<Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:thumb="@drawable/switch_thumb_selector"
        android:track="@drawable/switch_track_selector"
        />

现在您可以更改轨道的背景颜色以获得所需的结果。希望这有帮助!!!