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

时间:2014-08-06 07:38:45

标签: android

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

enter image description here

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

首先,您必须为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>