Question

是否可以创建自定义开关，如下图所示（特别是切换按钮而不是切换按钮）。我引用了这个链接，它创建了切换按钮http://www.mokasocial.com/2011/07/sexily-styled-toggle-buttons-for-android/

enter image description here

Answer 1

带有2个可绘制的xml文件的切换按钮：

                    <Switch
                        android:id="@+id/btn_accessible"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:layout_margin="10dp"
                        android:layout_weight="1"
                        android:visibility="visible"
                        android:paddingLeft="25sp"
                        android:paddingRight="25sp"
                        android:layout_centerHorizontal="true"
                        android:layout_centerVertical="true"
                        android:text=""
                        android:textColor="@color/white"
                        android:textSize="12sp"
                        android:thumb="@drawable/switch_button_shape"
                        android:track="@drawable/switch_track"

                />

switch_button_shape xml：

     <layer-list tools:ignore="StateListReachable"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android">
     <item
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp">
     <shape android:shape="oval">
        <solid android:color="@color/white"/>
        <size
                android:width="20dp"
                android:height="20dp"/>
    </shape>
</item>

<item android:state_checked="true"
      android:drawable="@drawable/button_accessible"
      android:bottom="20dp"
      android:left="20dp"
      android:right="20dp"
      android:top="20dp"
>
    <shape
            android:dither="true"
            android:shape="oval"
            android:useLevel="false"
            android:visible="true">
        <corners
                android:radius="20dp"/>
        <size
                android:width="20dp"
                android:height="20dp"/>
        <stroke
                android:width="4dp"
                android:color="#0000ffff"/>
    </shape>
</item>

和switch_track xml文件是：

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true">
     <shape android:dither="true"
           android:shape="rectangle"
           android:useLevel="false"
           android:visible="true">
        <size
                android:width="3dp"
                android:height="1dp"/>
        <gradient

                android:endColor="@color/lufthansa"
                android:startColor="@color/lufthansa"/>
        <corners
                android:radius="10dp"/>


    </shape>

</item>

<item android:state_checked="false">
    <shape android:dither="true"
           android:shape="rectangle"
           android:useLevel="false"
           android:visible="true">
        <gradient
                android:angle="270"
                android:endColor="@color/light_gray"
                android:startColor="@color/light_gray"/>
        <corners
                android:radius="20dp"/>
        <size
                android:width="3dp"
                android:height="1dp"/>
    </shape>

</item>

Answer 2

你可以使用官方的Switch小部件，它确实提供了你想要的东西，它是自API 14以来添加的。

请参阅：
https://developer.android.com/reference/android/widget/Switch.html

Answer 3

首先，您必须为Switch的拇指和轨道属性创建两个drawable。

拇指是Switch的来回， Track是Switch的幻灯片。

<Switch
        android:id="@+id/sWidgetSwitchBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:thumb="@drawable/custom_switch_thumb"
        android:track="@drawable/custom_switch_track"/>

拇指：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape
            android:dither="true"
            android:shape="rectangle"
            android:useLevel="false"
            android:visible="true">
            <gradient
                android:angle="270"
                android:endColor="@color/switch_thumb_on"
                android:startColor="@color/switch_thumb_on"/>
            <corners
                android:radius="5dp"/>
            <size
                android:width="47dp"
                android:height="47dp"/>
            <stroke
                android:width="4dp"
                android:color="#0000ffff"/>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape
            android:dither="true"
            android:shape="rectangle"
            android:useLevel="false"
            android:visible="true">
            <gradient
                android:angle="270"
                android:endColor="@color/actionbutton_bg_darkblue"
                android:startColor="@color/actionbutton_bg_darkblue"/>
            <corners
                android:radius="5dp"/>
            <size
                android:width="47dp"
                android:height="47dp"/>
            <stroke
                android:width="4dp"
                android:color="#0000ffff"/>
        </shape>
    </item>

追踪：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:dither="true"
               android:shape="rectangle"
               android:useLevel="false"
               android:visible="true">
            <gradient
                android:angle="270"
                android:endColor="@color/switch_track_bg"
                android:startColor="@color/switch_track_bg"/>
            <corners
                android:radius="5dp"/>
            <size
                android:width="100dp"
                android:height="50dp"/>
        </shape>

    </item>

    <item android:state_checked="false">
        <shape android:dither="true"
               android:shape="rectangle"
               android:useLevel="false"
               android:visible="true">
            <gradient
                android:angle="270"
                android:endColor="@color/black"
                android:startColor="@color/black"/>
            <corners
                android:radius="5dp"/>
            <size
                android:width="100dp"
                android:height="50dp"/>
        </shape>

    </item>
</selector>

创建自定义切换按钮，如图所示

3 个答案: