Android Switch 开关

Android Switch (开关) 和 ToggleButton yiyang ,允许我们在两个状态之间切换,有点类似于现在流行的滑动解锁

Switch 有别于 ToggleButton 的地方,就是外观上会同时显示 的文本,有利于引导用户操作,比如 ToggleButton 在开的时候只会显示开的文本,但点一下会发生什么是未知的,但 Switch 就不一样了,很明切告诉你,你点了之后会发生什么

Switch

Switch (开关) 也继承自 ButtonCompoundButton,所以拥有它们的属性、方法和事件

不过 Switch 也拥有自己的属性,而且特别的多

属性 说明
android:showText 设置 on/off 的时候是否显示文字
android:splitTrack 是否设置一个间隙,让滑块与底部图片分隔
android:switchMinWidth 设置开关的最小宽度
android:switchPadding 设置滑块内文字的间隔
android:switchTextAppearance 设置开关的文字外观
android:textOff 按钮没有被选中时显示的文字
android:textOn 按钮被选中时显示的文字
android:textStyle 文本的样式(普通,粗体,斜体,粗体)
android:track 底部的图片
android:thumb 滑块的图片
android:typeface 设置字体,默认支持这三种:sans, serif, monospace

我并不打算对所有的属性进行范例演示,我们只挑几个重要的

现在,我们写一个简单的 Switch 范例吧

  1. 创建一个 空的 Android 项目 cn.twle.android.Switch

    失误了, switch 是关键字,哎,后面大家自己改改,哈哈

  2. 修改 activity_main.xml 添加一个 Switch

    <?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:padding="8dp" 
        android:orientation="horizontal" >
    
        <Switch 
            android:id="@+id/power"
            android:text="电视机状态:"
            android:textOn = "开机"
            android:textOff = "关机"
            android:checked="true" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    

运行范例,显示如下

改变 Switch 的状态和文本

Switch 提供了一些方法用来改变或获取自身的状态和开关时的文本

方法 说明
getTextOff() 获取 Switch 关时显示的文本
getTextOn() 获取 Switch 开时显示的文本
setChecked(boolean checked) 设置 Switch 是否选中
setTextOff(CharSequence textOff) 设置 Switch 关时显示的文本
setTextOn(CharSequence textOn) 设置 Switch 开时显示的文本
toggle() 改变 Switch 的开关状态
事件 说明
CompoundButton.OnCheckedChangeListener Switch 的开关状态改变时触发

现在我们写一个 demo 来监听 Switch 开关状态的改变

  1. 复用上面的 demo

  2. 修改 MainActivity.javaSwitch 添加一个事件监听器 OnCheckedChangeListener

    package cn.twle.android.aswitch;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    
    import android.widget.CompoundButton;
    import android.widget.Switch;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener{
    
        private Switch power;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            power = (Switch) findViewById(R.id.power);
    
            power.setOnCheckedChangeListener(this);
    
        }
    
        @Override 
        public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
    
            String state = compoundButton.isChecked() ? "开机" :"关机";
                Toast.makeText(this,"电视机当前状态:"+state,Toast.LENGTH_SHORT).show();
        }
    }
    

定制 Switch 外观

定制 Switch 外观的需求还是蛮大的,我们可以属性 android:trackandroid:thumb 定制 Switch 的背景图片和滑块图片

不过要注意,每个图片都有两种状态,,而且,有个比较坑的地方,就是图片资源多大,Switch 就多大,如果需要改变,就要通过 Java 获得 Drawable 对象,然后对大小进行修改

现在我们开始定制吧

  1. 复用上面的 demo

  2. 下载 /static/i/android/switch.zip,解压并拖到 res/drawable 目录下

  3. res/drawable 目录下新建一个 selector 资源 thumb_selector.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@drawable/thumb_pressed"/>
        <item android:state_pressed="false" android:drawable="@drawable/thumb_normal"/>
    </selector>
    
  4. res/drawable 目录下新建一个 selector 资源 track_selector.xml

    <?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/track_pressed"/>
        <item android:state_checked="false" android:drawable="@drawable/track_normal"/>
    </selector>
    
  5. 修改布局文件 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:padding="8dp" 
        android:orientation="horizontal" >
    
        <Switch 
            android:id="@+id/power"
            android:text="电视机状态:"
            android:textOn = "开机"
            android:textOff = "关机"
            android:checked="true" 
            android:thumb="@drawable/thumb_selector"
            android:track="@drawable/track_selector"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    

定义其它字体

还可以定义其它字体 ( *.ttf ),首先要将字体文件保存在 assets/fonts/ 目录下

然后在 Java 中调用

Typeface typeFace =Typeface.createFromAsset(getAssets(),"fonts/HandmadeTypewriter.ttf");
switch.setTypeface(typeFace);

官方文档

  1. Switch
  2. ToggleButton

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.