Android 自定义时切换背景图片会被拉伸

Question

我正在尝试自定义开关。我使用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，但问题是图像被拉伸了。我花了很多时间来解决这个问题，但没有找到合适的解决方案。我附上了屏幕截图，展示了我的开关的外观。下面是我正在使用的可绘制资源。

- rahul

---

好的，我会尝试使用切换按钮。请问我在现有代码中是否有任何错误？ - rahul

请粘贴您的可绘制资源。 - Murtaza Khursheed Hussain

尝试移除android:thumbTextPadding="25dp"。 - iMDroid

附上我的可绘制资源。 - rahul

Android只支持线性架构的资产，简而言之是的。 - Murtaza Khursheed Hussain

Answer 1

我正在实现同样的开关按钮。最终我也得到了与你一样的拉伸背景。出现这种拉伸的原因是拇指图像与轨道图像不兼容。在我的情况下，拇指图像左右有太多填充。我还尝试过9patch图像，但没有起作用。我想出了以下解决方案:

1. 使用非常小的可绘制对象，使得当开关轨道和拇指获取图像时，它自动看起来像你要求的开关。
2. 将我的轨道svg转换为矢量可绘制对象，并使用png作为我的拇指。这也行得通。

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

将这些xml文件复制到drawable文件夹中。

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"
        />

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

- R.A.Y