状态开关按钮(ToggleButton)和开关(Switch)也是由Button派生出来的,因此它们本质上都是按钮,Button支持的各种属性、方法也适用于ToggleButton和Switch。从功能上看,ToggleButton、Switch和CheckBox复选框非常相似,都能提供两种状态,但是它们区别主要在功能上。ToggleButton和Switch主要用于切换程序中的状态。
今天我们通过开关的切换从而改变我们页面的布局。
一、首先我们来看看这两个开关的使用方法
Switch支持的XML属性和相关方法:
ToggleButton支持的XML属性及相关方法:
二、在布局文件中增加ToggleButton和Switch按钮,随着按钮的改变,界面布局中LinearLayout布局在水平与垂直布局中切换。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="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); } }
四、我们来看看效果。
切换前:
切换后: