Use of the Status switch button (ToggleButton) and button (Swich), togglebuttonswich

Use of the Status switch button (ToggleButton) and button (Swich), togglebuttonswich

The ToggleButton and Switch are also derived from the Button, so they are essentially buttons. The various attributes and methods supported by the Button are also applicable to ToggleButton and Switch. In terms of functions, the ToggleButton, Switch, and CheckBox check boxes are very similar and provide two statuses, but their differences are mainly functional. ToggleButton and Switch are mainly used to Switch the state in the program.

Today, we switch the switch to change the layout of our page.

I. First, let's take a look at the usage of the two switches.

XML attributes and related methods supported by Switch:

The XML attributes supported by ToggleButton and related methods are as follows:

 

2. Add ToggleButton and Switch button to the layout file. As the button changes, the LinearLayout layout in the interface layout is switched between the horizontal and vertical layout.

<? 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"> <! -- Define a ToggleButton-switch button --> <ToggleButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: textOff = "vertically arranged" android: textOn = "horizontal arrangement" android: id = "@ + id/toggleButton" android: checked = "false"/> <Switch android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: textOff = "Vertical arrangement" android: textOn = "horizontal arrangement" android: thumb = "@ drawable/check" android: id = "@ + id/switch1" Android: checked = "true"/> <! -- Define a layout that can change the direction --> <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 = "Button 1" android: id = "@ + id/button"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "button 2" android: id = "@ + id/button2"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Button 3" android: id = "@ + id/button3"/> </LinearLayout>

3. There are buttons available, but how can we make them switch with the event? Next, we will bind events to the ToggleButton and Switch buttons. That is, when the status changes, the layout also changes.

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. swityout); final LinearLayout test = (LinearLayout) findViewById (R. id. test); CompoundButton. onCheckedChangeListener listener = new CompoundButton. onCheckedChangeListener () {@ Override public void onCheckedChanged (CompoundButton buttonView, boolean isChecked) {if (isChecked) {// sets the vertical layout test of LineLayout. setOrientation (1); toggle. setChecked (true); switcher. setChecked (true);} else {// sets the horizontal layout of LineLatout test. setOrientation (0); toggle. setChecked (false); switcher. setChecked (false) ;}}; toggle. setOnCheckedChangeListener (listener); switcher. setOnCheckedChangeListener (listener );}}

4. Let's take a look at the effect.

Before switchover:

After switching: