你的位置:首页 > 操作系统

[操作系统]状态开关按钮(ToggleButton)及按钮(Swich)的使用


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

      今天我们通过开关的切换从而改变我们页面的布局。

一、首先我们来看看这两个开关的使用方法

Switch支持的

                                 

ToggleButton支持的

                                 

 

二、在布局文件中增加ToggleButton和Switch按钮,随着按钮的改变,界面布局中LinearLayout布局在水平与垂直布局中切换。

<??><LinearLayout ="http://schemas.android.com/apk/res/android"  android:orientation="vertical" android:layout_width="match_parent"  android:layout_height="match_parent">  <!-- 定义一个ToggleButton-切换按钮-->  <ToggleButton    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textOff="纵向排列"    android:textOn="横向排列"    android:id="@+id/toggleButton"    android:checked="false" />  <Switch    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textOff="纵向排列"    android:textOn="横向排列"    android:thumb="@drawable/check"    android:id="@+id/switch1"    android:checked="true" />  <!-- 定义一个可以改变方向的布局-->  <LinearLayout    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/test"    android:orientation="vertical">    <Button      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="按钮一"      android:id="@+id/button" />    <Button      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="按钮二"      android:id="@+id/button2" />    <Button      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="按钮三"      android:id="@+id/button3" />  </LinearLayout></LinearLayout>

三、已经有了按钮,但是如何让它们能随着事件而切换呢?接下来,我们就为ToggleButton和Switch按钮绑定事件。即当状态发生改变时,布局也随之发生改变。

package happy.togglebutton;import android.os.Bundle;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;import android.view.Menu;import android.view.MenuItem;import android.widget.CompoundButton;import android.widget.LinearLayout;import android.widget.Switch;import android.widget.ToggleButton;public class MainActivity extends AppCompatActivity {  ToggleButton toggle ;  Switch  switcher ;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.test);    toggle = (ToggleButton)findViewById(R.id.toggleButton);    switcher = (Switch)findViewById(R.id.switch1);    final LinearLayout test = (LinearLayout)findViewById(R.id.test);    CompoundButton.OnCheckedChangeListener listener = new CompoundButton.OnCheckedChangeListener() {      @Override      public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {        if(isChecked){          //设置LineLayout的垂直布局          test.setOrientation(1);          toggle.setChecked(true);          switcher.setChecked(true);        }        else{          //设置LineLatout的水平布局          test.setOrientation(0);          toggle.setChecked(false);          switcher.setChecked(false);        }      }    };    toggle.setOnCheckedChangeListener(listener);    switcher.setOnCheckedChangeListener(listener);  }}

四、我们来看看效果。

切换前:

切换后: