将Android自带的控件Switch设置成圆形选择按钮先介绍track属性的作用:Layout文件

71 阅读 0 评论 47 点赞

我是靠谱客的博主狂野荔枝，最近开发中收集的这篇文章主要介绍将Android自带的控件Switch设置成圆形选择按钮先介绍track属性的作用:Layout文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近看到网上的圆角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" />
    <!-- 圆角弧度 20 -->
    <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" >

    <!-- 高度25 -->
    <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>

属性介绍:

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

#再介绍thump属性的作用:
创建文件:

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按钮的文字有底色 (曾经的大坑!!)