ToggleButton（状态开关按钮）及Swich（开关）使用详解

一、常见APP界面举例

左边的图片采自某小说阅读器注册页面—根据用户性别选择的不同 代表性别的图片会显示不同的状态——使用ToogleButton可以实现这个效果；右边的图片采自某Q设置页面—用户可以在里面进行一系列应用设定——使用Switch可以实现这个效果。

二、ToggleButton和Switch介绍

状态开关按钮（ToggleButton）和开关（Switch）也是由Button派生出来的，因此它们本质上都是按钮，Button支持的各种属性、方法也适用于ToggleButton和Switch。从功能上看，ToggleButton、Switch和CheckBox复选框非常相似，都能提供两种状态，但是它们区别主要在功能上。ToggleButton和Switch主要用于切换程序中的状态。

Switch支持的XML属性和相关方法：

ToggleButton支持的XML属性及相关方法：

三、话不多说，上布局XML代码

<ToggleButton
    android:id="@+id/main_tog_btn"
    android:checked="false"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textOn="open"
    android:textOff="close"/>

<ImageView
    android:id="@+id/main_img"
    android:layout_marginTop="50dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/circle_red"/>

<Switch
    android:layout_marginTop="100dp"
    android:layout_gravity="center"
    android:switchMinWidth="200dp"
    android:splitTrack="true"
    android:id="@+id/main_sw"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="low"
    android:textOn="speed"
    android:thumb="@drawable/close"
    android:checked="false"
    android:text="我是Switch"/>

布局XML代码中一共布局了一个ToggleButton、一个Switch、一个测试用的ImageView。

四、最后上Activity中操作代码

public class MainActivity extends AppCompatActivity
        implements CompoundButton.OnCheckedChangeListener {
    private ToggleButton tb;
    private ImageView img;
    private Switch switcher;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        //初始化控件
        tb = (ToggleButton) findViewById(R.id.main_tog_btn);
        img = (ImageView) findViewById(R.id.main_img);
        switcher = (Switch)findViewById(R.id.main_sw);
        //设置监听器
        tb.setOnCheckedChangeListener(this);
        switcher.setOnCheckedChangeListener(this);
    }
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        img.setImageResource(isChecked?R.drawable.circle_red:R.drawable.circle_green);
    }
}

Activity代码分析：

①分别给ToggleButton和Switch绑定按钮；

②运用实现OnClickListener接口的方式同时实现ToggleButton和Switch的点击事件；

运用一组点击事件，绑定两个控件，意味着两个控件可以实现一样的UI效果。

五、点击ToggleButton和移动Switch滑块之后的结果：

最终运行程序的结果如预期一样，ToggleButton和Switch由于绑定了一组监听事件，所以可以通过用户不同的操作吧实现同样的效果。