在android中自定义切换背景图像

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的代码是

<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切片的，但问题是图像被拉伸了。我花了很多时间来解决这个问题，但没有找到合适的解决方案。我附上了我的开关看起来如何的截图。

以及它应该如何显示

下面是我正在使用的绘图

Answer 1

我实现了相同的开关按钮，但最终还是得到了与您一样的拉伸背景，这种拉伸的原因是拇指图像与轨迹图像不兼容。在我的情况下，拇指图像的左右边缘填充过多。我也尝试了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"
        />

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