将Android自带的控件Switch设置成圆形选择按钮

最近看到网上的圆角SwitchButton心痒难耐,再加上Android Studio自带的switch实在是太难看了便试着做了一个。不是很好看，但是还是想发出来。

下面是我做完的效果

对于Swich的设置主要有两个属性:

• track:底色的样式,滑条的样式
• thump:按钮的样式,也就是中间的小圆钮
  

  ---

先介绍track属性的作用:

先在drawable文件夹下新建Drawable Resource file文件
- onetrack.xml——关闭时的样式
- twotrack.xml——打开时的样式
- track.xml——按钮样式的选择器

onetrack.xml代码——————按钮处于关闭状态时的底色样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 高度25   此处设置宽度无效-->
    <size android:height="25dp" />
    <!-- 圆角弧度 15 -->
    <corners android:radius="20dp"/>
    <!-- 变化率  定义从左到右的颜色不变 -->
    <gradient
        android:endColor="#888888"
        android:startColor="#888888" />

</shape>

属性的介绍:

• track–height：指这个底图的高，在这里设置width是没用的
• radius:整个SwitchButton的弧度,不是其中小圆钮的弧度
• gradient:变化率:从startColor的颜色到endColor的颜色。这里设置成一样，初始（按钮关闭）底色就是一个颜色。

twotrack.xml的代码——————按钮处于开启状态时的样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 高度40 -->
    <size android:height="25dp"/>
    <!-- 圆角弧度 20 -->
    <corners android:radius="20dp"/>
    <!-- 变化率 -->
    <gradient
        android:endColor="@color/colorpink"
        android:startColor="@color/colorpink" />
</shape>

属性和上面的一样,只是改变了颜色(gradient属性)而已

再写一个tracktoal.xml文件(选择器)——————实现Switch被点击时样式的改变

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"  android:drawable="@drawable/twotrack" />
    <item  android:drawable="@drawable/onetrack" />
</selector>

属性介绍:

1. state_checked=”true” 是你选中了（打开Swith）的时候的状态
2. 如果不写state_checked=”false” false这句可以不写，就是默认false状态了 是你未选中了（关闭Swith）的时候的状态
3. drawable:提供样式

---

再介绍thump属性的作用:

创建文件:

1. onethump.xml ————按钮的样式

onethump.xml代码:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 高度25,注意这里的高度是和track的高度一样的 -->
    <size android:height="25dp" android:width="25dp"/>
    <!-- 圆角弧度 180 就是一个圆-->
    <corners android:radius="180dp"/>


    <!-- 从左到右变化率 -->
    <gradient
        android:endColor="@color/colorAccent"
        android:startColor="@color/colorAccent" />
<!--给圈画一个宽度为1dp的实线-->
    <stroke android:width="1dp"
        android:color="@color/colorAccent"/>

</shape>

属性介绍:

• gradient,与track中的其实是一样的
• stroke:给这个小圆钮带一个实线
• width,height,这两个属性大小一样,是一个正方形,加上radius的180才是一个圆形。这里的height要和track一样高,这样小圆钮在才能呈现一个圆形出来

---

Layout文件

activity_main.xml文件代码

  <Switch
        android:textSize="35sp"
        android:text="开"
        android:switchMinWidth="25dp"
        android:textOn=""
        android:textOff=""
        android:thumb="@drawable/onethumb"
        android:track="@drawable/track"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/switch1" />

属性介绍:

• android:textOn=”“//打开时按钮的文字设置为”“
• android:textOff=”” //关闭时按钮的文字设置为”“
• android:switchMinWidth=”25dp”//设置整个switch的宽度 只有在这里设置宽度才能将整个Switch的宽度进行设定
• android:track=”@drawable/tracktoal” //不能在background 中设置tracktotal 不然会让switch按钮的文字有底色 (曾经的大坑!!)