如何修复 Android 上的自定义开关外观 4

How to fix custom switch appearance on Android 4

我有一个自定义开关元素,在 Android 5 和 6 上看起来很棒。但是 Android 4 有问题。 问题是如何保持拨动开关的形状?

Android 5,6。图1

Android4.图2

这是我的代码:

<Switch
            android:id="@+id/row_device_switch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textOn="ON"
            android:thumb="@drawable/customswitchselector"
            android:track="@drawable/custom_track"
            android:textOff="OFF"
            android:layout_marginRight="14dp"
            android:switchMinWidth="@dimen/custom_switcher_track_width"
            />

custom_track.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle"
            android:visible="true"
            android:dither="true"
            android:useLevel="false"
            >
            <corners
                android:radius="@dimen/cutsom_switcher_track_radius"/>
            <size
                android:width="@dimen/custom_switcher_track_width"
                android:height="@dimen/custom_switcher_track_height" />
            <stroke
                android:width="@dimen/custom_switcher_stroke_thickness"
                android:color="@android:color/white"
                />
        </shape>
    </item>
    <item
        android:left="@dimen/custom_switcher_track_line_horizontal_margin"
        android:right="@dimen/custom_switcher_track_line_horizontal_margin"
        >
        <shape
            android:shape="line"
            >
            <stroke
                android:width="@dimen/custom_switcher_екфсл_thickness"
                android:color="@android:color/white"
                />
        </shape>
    </item>
</layer-list>

customswitchselector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape
                    android:shape="oval"
                    android:visible="true"
                    android:dither="true"
                    android:useLevel="false"
                    >
                    <solid
                        android:color="@color/colorListEnd"
                        />
                    <size
                        android:width="@dimen/custom_switcher_circle_size"
                        android:height="@dimen/custom_switcher_circle_size" />
                    <stroke
                        android:width="@dimen/custom_switcher_stroke_thickness"
                        android:color="@android:color/white"/>
                </shape>
            </item>
            <item
                android:left="@dimen/custom_switcher_between_circles_margin"
                android:right="@dimen/custom_switcher_between_circles_margin"
                android:top="@dimen/custom_switcher_between_circles_margin"
                android:bottom="@dimen/custom_switcher_between_circles_margin"
                >
                <shape
                    android:shape="oval"
                    >
                    <size
                        android:width="@dimen/custom_switcher_inner_circle_size"
                        android:height="@dimen/custom_switcher_inner_circle_size" />
                    <solid
                        android:color="@android:color/white"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_checked="false">
        <layer-list>
            <item>
                <shape
                    android:shape="oval"
                    android:visible="true"
                    android:dither="true"
                    android:useLevel="false">

                    <solid
                        android:color="@color/colorListEnd"
                        />
                    <size
                        android:width="@dimen/custom_switcher_circle_size"
                        android:height="@dimen/custom_switcher_circle_size" />
                    <stroke
                        android:width="@dimen/custom_switcher_stroke_thickness"
                        android:color="@android:color/white"/>
                </shape>
            </item>
            <item
                android:left="@dimen/custom_switcher_between_circles_margin"
                android:right="@dimen/custom_switcher_between_circles_margin"
                android:top="@dimen/custom_switcher_between_circles_margin"
                android:bottom="@dimen/custom_switcher_between_circles_margin"
                >
                <shape
                    android:shape="oval">
                    <size
                        android:width="@dimen/custom_switcher_inner_circle_size"
                        android:height="@dimen/custom_switcher_inner_circle_size"
                        />
                    <stroke
                        android:width="@dimen/custom_switcher_stroke_thickness"
                        android:color="@android:color/white"
                        />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Switch 存在几个小问题,导致它不能统一工作。在您的情况下,您需要使用 android:textOffandroid:textOn 以及值 ""。否则轨道和拇指的宽度将被调整以容纳文本。您还需要定义 android:thumbTextPadding 以确保拇指的大小。 drawable 只是一个背景,不会直接影响它。

<Switch
    android:id="@+id/row_device_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginRight="14dp"
    android:switchMinWidth="@dimen/custom_switcher_circle_radius"
    android:textOff=""
    android:textOn=""
    android:thumb="@drawable/customswitchselector"
    android:thumbTextPadding="@dimen/switch_thumb_radius"
    android:track="@drawable/custom_track" />

@dimen/custom_switcher_circle_radius 的值应该是 @dimen/custom_switcher_circle_size 维度的一半。