狀態開關按鈕(ToggleButton)及按鈕(Swich)的使用,togglebuttonswich

來源:互聯網
上載者:User

狀態開關按鈕(ToggleButton)及按鈕(Swich)的使用,togglebuttonswich

      狀態開關按鈕(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);    }}

四、我們來看看效果。

切換前:

切換後:

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.