Switch与ToggleButton

最新推荐文章于 2023-07-15 09:55:53 发布

原创最新推荐文章于 2023-07-15 09:55:53 发布 · 536 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Switch #ToggleButton

Android基础专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何自定义Android中Switch组件的样式，包括开关图标、文本样式、滑动条颜色及按钮边框颜色等。同时提供了高度、宽度调整的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 基本用法

   final Switch switch_ = (Switch) findViewById(R.id.switch_);
        //设置开关图标上文本的样式
        switch_.setSwitchTextAppearance(this,R.style.switch_style);
        //设置开关的最小宽度
        switch_.setSwitchMinWidth(50);
        //设置标题与文本之间的空白
        switch_.setSwitchPadding(10);
        switch_.setText("off");
     //        switch_.setTextOn("");
        
        //设置监听
        switch_.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked){
                    switch_.setText("open");
                    Toast.makeText(ToggleSwitchActivity.this, "open", Toast.LENGTH_SHORT).show();
                }else {
                    switch_.setText("off");
                    Toast.makeText(ToggleSwitchActivity.this, "off", Toast.LENGTH_SHORT).show();
                }
            }
        });

2 样式修改

（1）底部滑动条，在开关打开状态为绿色，开关关闭状态为灰色

在 res/drawable 文件夹下面，写两个滑动条的底图，通过一个选择器selector进行控制。

gray_track.xml ：非打开状态，灰色的底图

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle" >  
  
    <!-- 高度30   此处设置宽度无效-->  
    <size android:height="30dp"/>  
    <!-- 圆角弧度 15 -->  
    <corners android:radius="15dp"/>      
    <!-- 变化率  定义从左到右的颜色不变 -->  
    <gradient  
        android:endColor="#888888"  
        android:startColor="#888888" />  
  
</shape>

green_track.xml：打开状态下，绿色的底图。

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  
    <!-- 高度40 -->  
    <size android:height="30dp"/>  
    <!-- 圆角弧度 20 -->  
    <corners android:radius="15dp"/>  
    <!-- 变化率 -->  
    <gradient  
        android:endColor="#33da33"  
        android:startColor="#33da33" />  
</shape>

选择器 track.xml 用于控制Switch不同状态下，滑动条的底图

<?xml version="1.0" encoding="utf-8"?>  
<!-- 底层下滑条的样式选择器，可控制Switch在不同状态下，底下下滑条的颜色 -->  
<selector xmlns:android="http://schemas.android.com/apk/res/android" >  
<item android:state_checked="true"  android:drawable="@drawable/green_track" />  
<item android:drawable="@drawable/gray_track" />  
  
</selector>

（2）滑动按钮：底色我用的接近白色的淡灰色，打开时，边上的一圈线条为灰色，关闭时，边上的一圈线条为绿色

实现方式和底部滑动一致

gray_thumb.xml :关闭状态，按钮边上一圈颜色为深灰色

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle" >  
    <!-- 高度40 -->  
    <size android:height="40dp" android:width="40dp"/>  
    <!-- 圆角弧度 20 -->  
    <corners android:radius="20dp"/>        
    <!-- 变化率 -->  
    <gradient  
        android:endColor="#eeeeee"  
        android:startColor="#eeeeee" />       
    <stroke android:width="1dp"  
        android:color="#666666"/>  
</shape>

green_thumb.xml : 打开状态，按钮边上一圈的颜色为绿色

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle" >  
  
    <!-- 高度40 -->  
    <size android:height="40dp" android:width="40dp"/>  
    <!-- 圆角弧度 20 -->  
    <corners android:radius="20dp"/>  
      
      
    <!-- 变化率 -->  
    <gradient  
        android:endColor="#eeeeee"  
        android:startColor="#eeeeee" />  
      
    <stroke android:width="1dp"  
        android:color="#33da33"/>  
  
</shape>

选择器 thumb.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/green_thumb" />  
<item  android:drawable="@drawable/gray_thumb" />  
</selector>

（3）将以上选择器设置给Switch，就好了，界面 activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical" >  
  
    <Switch  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:switchMinWidth="20dp"  
        android:textOn="  "  
        android:textOff="  "  
        android:thumb="@drawable/thumb"  
        android:track="@drawable/track" />  
      
    <!-- 用于对比使用的不设置任何属性的Switch -->  
    <Switch   
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        />  
  
</LinearLayout>

当然也可以动态设置：

 //使用自定义Drawable绘制开关按钮
        switch_.setThumbDrawable(getResources().getDrawable(R.drawable.thumb));
        //使用自定义Drawable绘制开关轨道
        switch_.setTrackDrawable(getResources().getDrawable(R.drawable.track));