Android 基础知识4-3.6 ToggleButton(开关按钮)Switch(开关)详解

一、ToggleButton(开关按钮)

1.1、简介

ToggleButton 类似开关有开和关两种状态，不同的状态下可以有不同的文本。

public class ToggleButton extends CompoundButton
Displays checked/unchecked states as a button with a "light" indicator and by default accompanied with the text "ON" or "OFF"。

这是一种特殊的有两种状态的继承至CompoundButton的控件，在不同的状态会有高亮显示效果，既然是继承至CompoundButton，那我们也随便看一下CompoundButton的介绍：

A button with two states, checked and unchecked. When the button is pressed
or clicked, the state changes automatically.

1.2、属性

android:checked = “true”

默认为选中状态，反之false即是默认为非选中状态。

android:textOff = “张起灵” 未选中状态下的文本是张起灵

android:textOn = “张无忌” 选中状态下的文本是张无忌

1.3.1、示例1

效果图：

XML：

<ToggleButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="ToggleButton"
    android:textAllCaps="false"
    android:textOff="张起灵"
    android:textOn="张无忌" />

1.3.2、示例2

同样的，我们可以监听不同的状态来设置不同的背景，来适配不同的使用场景，这个背景设置和Button中的一模一样。只是针对的状态不同而已，记得在Button中，我们的Drawable如下：

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

在我们的ToggleButton中，我们的背景Drawable如下：

<?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/open"></item>
<item android:state_checked="false" android:drawable="@drawable/close"></item>
</selector>

可见，都是根据控件状态来切换照片，只是对应的状态不同罢了。运行的效果如下：

在上面我们也说了，这个控件通常对应两种状态，那么如何监听状态的变化了，我们可以通过其父类CompoundButton.OnCheckedChangeListener接口实现，具体代码如下：

//设置状态变化监听
toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked){

}else {

}
}
});

这样，我们就可以在不同状态下处理不同的逻辑了。

二、Switch(开关)

2.1 简介

Switch是一个可以再两种状态切换的开关控件。用户可以拖动来选择，也可以像选择复选框一样点击切换Switch的状态

2.2 属性

android:showText：设置on/off的时候是否显示文字,boolean
android:splitTrack：是否设置一个间隙，让滑块与底部图片分隔,boolean
android:switchMinWidth：设置开关的最小宽度
android:switchPadding：设置滑块内文字的间隔
android:switchTextAppearance：设置开关的文字外观，暂时没发现有什么用…
android:textOff：按钮没有被选中时显示的文字
android:textOn：按钮被选中时显示的文字
android:textStyle：文字风格，粗体，斜体写划线那些
android:track：底部的图片
android:thumb：滑块的图片
android:typeface：设置字体，默认支持这三种:sans, serif, monospace;除此以外还可以使用
其他字体文件(*.ttf)，首先要将字体文件保存在assets/fonts/目录下，不过需要在Java代码中设置：
**Typeface typeFace =Typeface.createFromAsset(getAssets(),”fonts/HandmadeTypewriter.ttf”);
textView.setTypeface(typeFace);

在代码中也可以改变该组件的外观：
setSwitchTextAppearance(Context context, int resid) 使用指定的资源id设置状态标签上的文字大小，类型，颜色等；
setSwitchTypeface(Typeface tf, int style) 使用指定的字体类型库内的指定类型来设置状态标签上的文字；
setSwitchTypeface(Typeface tf) 使用指定字体类型库内的固有类型来设置状态标签上的文字；
setTextOff(CharSequence textOff) 设置“关闭”状态标签文字；
setTextOn(CharSequence textOn) 设置“开启”状体标签文字；
父类内的setButtonDrawable(int resid) 用指定的资源id设置组件背景；
父类内的setButtonDrawable(Drawable d) 用可绘制对象设置组件背景；
android:textStyle 和android:typeface 与setSwitchTypeface(Typeface tf)对应；

2.3 使用示例

2.3.1 示例1

效果图：

shape_thumb：

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

<size android:height="20dp" android:width="20dp"/>



<corners android:radius="5dp"/>

<solid android:color="#ffffff" />
<stroke android:width="1dp"
android:color="#4AA361"/>

</shape>

shape_track：

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


<size android:height="15dp" android:width="30dp"/>

<corners android:radius="20dp"/>

<solid android:color="#4AA361" />

</shape>

2.3.2 示例2

因为比较简单，所以我们把他们写到一起，另外，我们为Switch设置下滑块和底部的图片，实现一个类似于IOS 7的滑块的效果，但是有个缺点就是不能在XML中对滑块和底部的大小进行设置，就是素材多大，Switch就会多大，我们可以在Java中获得Drawable对象，然后对大小进行修改，简单的例子：

实现代码：
先是两个drawable的文件：
thumb_selctor.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/switch_btn_pressed"/>
<item android:state_pressed="false" android:drawable="@drawable/switch_btn_normal"/>
</selector>

track_selctor.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/switch_btn_bg_green"/>
<item android:state_checked="false" android:drawable="@drawable/switch_btn_bg_white"/>
</selector>

布局文件:activity_main.xml:

</LinearLayout>

MainActivity.java：

public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener{

private ToggleButton tbtn_open;
private Switch swh_status;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

tbtn_open = (ToggleButton) findViewById(R.id.tbtn_open);
swh_status = (Switch) findViewById(R.id.swh_status);
tbtn_open.setOnCheckedChangeListener(this);
swh_status.setOnCheckedChangeListener(this);
}

@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
switch (compoundButton.getId()){
case R.id.tbtn_open:
if(compoundButton.isChecked()) Toast.makeText(this,"打开声音",Toast.LENGTH_SHORT).show();
else Toast.makeText(this,"打开声音",Toast.LENGTH_SHORT).show();
break;
case R.id.swh_status:
if(compoundButton.isChecked()) Toast.makeText(this,"开关:ON",Toast.LENGTH_SHORT).show();
else Toast.makeText(this,"开关:OFF",Toast.LENGTH_SHORT).show();
break;

}
}
}