当前位置：移动技术网 > 移动技术>移动开发>Android > Android 开关控件Switch

Android 开关控件Switch

2020年07月14日 | 移动技术网移动技术 | 我要评论

扣扣技术交流群：460189483

目录：
    1.应用场景与概述
    2.常用属性
    3.简单使用
    4.更改默认Switch的样式
    5.自定义Switch

1.应用场景与概述
    Switch是在4.0以后推出的，所以要注意开发时的minsdk设置,google在API 21后也推出support v7 包下的SwitchCompa的Material Design
开关控件，对低版本的有了更好的的支持。其实switch的应用场景和ToggleButton类似，多应用于两种状态的切换。

2.常用属性

    android:typeface="normal":设置字体类型
    android:track="":设置开关的轨迹图片
    android:textOff="开"：设置开关checked的文字
    android:textOn="关"：设置开关关闭时的文字
    android:thumb="":设置开关的图片
    android:switchMinWidth=""：开关最小宽度
    android:switchPadding="":设置开关 与文字的空白距离
    android:switchTextAppearance="":设置文本的风格
    android:checked="":设置初始选中状态
    android:splitTrack="true":是否设置一个间隙，让滑块与底部图片分隔（API 21及以上）
    android:showText="true"：设置是否显示开关上的文字（API 21及以上）

简单设置：

<pre name="code" class="html">   
        <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff=""
        android:textOn=""
        android:switchMinWidth="120dp"
        android:thumb="@android:color/transparent"
        android:track="@drawable/switch_track"
        />

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

效果展示：

这里layout_width:这能设置整个布局的宽度，不能设置具体的Switch的大小，需要使用switchMinWidth属性来设置。

thumb：文字所携带的背景，设置为背景色进行隐藏。不设置会出现一个背景框。

track：设置开关的背景图片，类似于button的background。

textoff、texton：设置开关时的文字显示。
Switch的点击事件：

    private Switch mSwitch;
    private TextView mText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mSwitch = (Switch) findViewById(R.id.switch_);
        mText = (TextView) findViewById(R.id.text_);
        // 添加监听
        mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked){
                    mText.setText("开启");
                }else {
                    mText.setText("关闭");
                }
            }
        });
    }

3.简单使用
3.1)主布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.aswitch.MainActivity">
    <!--
    android:typeface="normal":设置字体类型
    android:track="":设置开关的轨迹
    android:textOff="开"：设置开关checked的文字
    android:textOn="关"：设置开关关闭时的文字
    android:thumb="":设置开关的图片
    android:switchMinWidth=""：开关最小宽度
    android:switchPadding="":设置开关 与文字的空白距离
    android:switchTextAppearance="":设置文本的风格
    android:checked="":设置初始选中状态
    android:splitTrack="true":是否设置一个间隙，让滑块与底部图片分隔
    -->
    <TextView
        android:id="@+id/switch_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="switch:" />
    <Switch
        android:layout_marginTop="10dp"
        android:layout_below="@+id/switch_tv"
        android:id="@+id/switch1"
        android:typeface="normal"
        android:textOff="开"
        android:textOn="关"
        android:switchMinWidth="40dp"
        android:switchPadding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/text"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
    <TextView
        android:layout_below="@+id/text"
        android:id="@+id/switch_compat_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="switchCompat:" />
    <android.support.v7.widget.SwitchCompat
        android:layout_marginTop="10dp"
        android:layout_below="@+id/switch_compat_tv"
        android:id="@+id/switch_compat"
        android:typeface="normal"
        android:switchMinWidth="40dp"
        android:switchPadding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/text1"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/switch_compat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

3.2)主布局java类

package com.example.aswitch;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SwitchCompat;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener{
 
    private Switch aSwitch;
    private SwitchCompat aSwitchCompat;
    private TextView text1,text2,switchText,switchCompatText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //实例化
        aSwitch = (Switch) findViewById(R.id.switch1);
        aSwitchCompat = (SwitchCompat) findViewById(R.id.switch_compat);
        text1 = (TextView) findViewById(R.id.text);
        text2 = (TextView) findViewById(R.id.text1);
        //设置Switch事件监听
        aSwitch.setOnCheckedChangeListener(this);
        aSwitchCompat.setOnCheckedChangeListener(this);
    }
 
    /*
    继承监听器的接口并实现onCheckedChanged方法
    * */
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        switch (buttonView.getId()){
            case R.id.switch1:
                if(isChecked){
                    text1.setText("开");
                }else {
                    text1.setText("关");
                }
                break;
            case R.id.switch_compat:
                if(isChecked){
                    text2.setText("开");
                }else {
                    text2.setText("关");
                }
                break;
            default:
                break;
        }
    }
}

3.3)截图效果

4.更改默认Switch的样式
4.1)在styles.xml中自定义style

    <!--自定义switch的按钮和轨迹颜色theme-->  
    <style name="mySwitch" parent="Theme.AppCompat.Light">
        <!-- switch 打开时的按钮的颜色 轨迹颜色默认为30%（看效果就明白30%是怎么回事了）这个颜色 -->
        <item name="colorControlActivated">@android:color/holo_green_dark</item>
        <!--  switch关闭时的按钮的颜色 -->
        <item name="colorSwitchThumbNormal">@color/colorAccent</item>
        <!-- switch关闭时的轨迹的颜色 30%这个颜色 -->
        <item name="android:colorForeground">@color/colorPrimaryDark</item>
 
    </style>

4.1)在布局文件中通过android:theme="@style/mySwitch"设置

   <android.support.v7.widget.SwitchCompat
        android:layout_marginTop="10dp"
        android:layout_below="@+id/switch_compat_tv"
        android:id="@+id/switch_compat"
        android:typeface="normal"
        android:theme="@style/mySwitch"
        android:switchMinWidth="40dp"
        android:switchPadding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

5.自定义Switch

   5.1)导入资源图片thumb.png ,thumb_on.png ,track_nomal.png ,track_on.png ,track_press.png

   5.2)实现thumb_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中时的滑块图片-->
<item android:drawable="@drawable/thumb_on" android:state_checked="true"/>
    <!--正常情况滑块图片-->
<item android:drawable="@drawable/thumb"/>
</selector>

5.3)实现track_selector.xml

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--打开时switch轨迹图片-->
    <item android:state_pressed="true"  android:drawable="@drawable/track_on" />
    <!--按压时switch轨迹图片-->
    <item android:state_checked="true"  android:drawable="@drawable/track_press" />
    <!--正常状态switch轨迹图片-->
    <item                               android:drawable="@drawable/track_nomal" />
 
    </selector>

5.4)主布局actiity_second.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.aswitch.SecondActivity">
 
    <TextView
        android:id="@+id/CustomSwitchCompat_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CustomSwitchCompat:" />
    <android.support.v7.widget.SwitchCompat
        android:layout_marginTop="10dp"
        android:layout_below="@+id/CustomSwitchCompat_tv"
        android:id="@+id/CustomSwitchCompat"
        android:layout_width="wrap_content"
        android:minWidth="40dp"
        android:minHeight="20dp"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/custom_result"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/CustomSwitchCompat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

5.5)主布局java类SecondActivity.java

package com.example.aswitch;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SwitchCompat;
import android.widget.CompoundButton;
import android.widget.Switch;
import android.widget.TextView;
 
public class SecondActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener{
 
    private SwitchCompat customSwitchCompat;
    private TextView custom_result,CustomSwitchCompat_tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        //实例化
        customSwitchCompat = (SwitchCompat) findViewById(R.id.CustomSwitchCompat);
        custom_result = (TextView) findViewById(R.id.custom_result);
        //设置自定义的thumb和track
       customSwitchCompat.setThumbResource(R.drawable.thumb_selector);
        customSwitchCompat.setTrackResource(R.drawable.track_selector);
        //设置Switch事件监听
        customSwitchCompat.setOnCheckedChangeListener(this);
    }
 
    /*
    继承监听器的接口并实现onCheckedChanged方法
    * */
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(isChecked){
                    custom_result.setText("开");
                }else {
                    custom_result.setText("关");
                }
    }
}

ps:其实自定义的途径还可以通过shape的绘制和java代码绘制，在这里就不详细说了

参考：

本文地址：https://blog.csdn.net/u014453443/article/details/107320556

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

复习Android——Fragment

Fragment是什么Fragment是一种可以嵌入在Activity中的UI片段，它可以让程序更加合理和充分地... [阅读全文]
Android 11 Beta 2 和平台稳定性里程碑

作者 / Dave Burke, VP of Engineering几周前，我们发布了 Android 11 的... [阅读全文]
简单接入极光推送

只是为了记录怎么用,官网申请id啥的不说的.直接上代码.1 清单文件中:加入权限:<permission ... [阅读全文]
Xamarin 安卓相机各种坑目标API Android 6以后，我选的目标API版本是 Android 10

第一次在CSDN上写博客，为了记录我踩坑的心路历程，同时也为了其它踩坑的小盆友，指一条明路。因为客户要求增加拍照... [阅读全文]
代码示例：添加按键使得可以从当前视图控制器跳到另一个

示例：rootViewController和ViewController之间的互相跳转import UIKitc... [阅读全文]
FlowLayout

package com.xiangxue.nestedscroll.flowlayoutimport andro... [阅读全文]
Android 9.0+软件某些功能突然暴毙：cleartext not permitted

线上项目某功能突然暴毙，测试后发现Android 5 没问题 Android 9+功能报错：cleartext ... [阅读全文]
Binder在Native的实现

android中的跨进程通信（ipc）用的是C/S体系系统，Binder为这个体系系统提供IPC通信能力。在an... [阅读全文]
Android : Resource is not a Drawable (color or path)

Android : Resource is not a Drawable (color or path) Cau... [阅读全文]
Flutter问题集锦——Android Studio 4.0.1 在AVD Manger中启动模拟器报“unable to locate abd”

问题：在一次启动安卓模拟器过程中，点击启动时提示“unable to locate abd”错误解决方式：1、在... [阅读全文]

网友评论


验证码：

Android 开关控件Switch

2020年07月14日 | 移动技术网移动技术 | 我要评论

扣扣技术交流群：460189483

您可能感兴趣的文章:

相关文章:

网友评论