Android UI 详解之ToggleButton按钮和Swith按钮

                               Android UI 详解之ToggleButton、Swith

1、ToggleButton 和Swith同样是继承Button而来的，所以剧本Button的一切属性

      ToggleButton新加的最重要属性，

         android:checked             设置按钮是否被选中

         android:textOff                设置当该按钮的状态关闭时显示的文本

         android:textOn                设置当该按钮的状态为打开时显示的文本

 

2、下面是自定义的ToggleButton

      设计思想，先选取两张图片，然后通过selector 去设置状态变化的对应图片

      在代码中通过setOnchangeCheckListener()去监听，注意：与单选和按钮的监听器不同，和复选的按钮监听器一样，上一次在讨论单选按钮的时候没后用到参数，这次我们用一下，其实参数也就是两个值True和False，和调用ischecked 一样，只不过这里用True和False更能易懂，因为他毕竟是开关，

效果图

代码如下

package com.example.togglebuttondemo;import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.EditText;
import android.widget.Toast;
import android.widget.ToggleButton;@SuppressLint("ShowToast")
public class MainActivity extends Activity {private ToggleButton tbb;private Button bt;private EditText et;/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);tbb = (ToggleButton)findViewById(R.id.tb1);et = (EditText)findViewById(R.id.et);tbb.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton arg0, boolean isChecked) {Log.i("Toggle","Toggle1");if (tbb.isChecked()){et.setText("Yes");Log.i("Toggle","Yes");}else{et.setText("NO");Log.i("Toggle","NO");}}});}}

布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><ToggleButton android:id="@+id/tb1"android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true"android:textOn="1"android:textOff="2"android:background="@drawable/btn_toggle"/><EditText android:id="@+id/et"android:layout_width="match_parent"android:layout_height="50dp"android:background="@drawable/et"/>
</LinearLayout>

btn_toggle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="false" android:drawable="@drawable/btn_toggle_no" /><item android:state_checked="true" android:drawable="@drawable/btn_toggle_yes" />
</selector>

3、Swith

代码

package org.crazyit.ui;import android.app.Activity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.LinearLayout;
import android.widget.Switch;
import android.widget.ToggleButton;public class ToggleButtonTest extends Activity
{ToggleButton toggle;Switch switcher;@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);switcher = (Switch)findViewById(R.id.switcher);final LinearLayout test = (LinearLayout)findViewById(R.id.test);OnCheckedChangeListener listener = new OnCheckedChangeListener(){@Overridepublic void onCheckedChanged(CompoundButton button, boolean isChecked){if(isChecked){//设置LinearLayout垂直布局test.setOrientation(1);}else{//设置LinearLayout水平布局test.setOrientation(0);}}};switcher.setOnCheckedChangeListener(listener);}
}

layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><Switch android:id="@+id/switcher"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textOff="横向排列"android:textOn="纵向排列"android:thumb="@drawable/check"android:checked="true"/>
<!-- 定义一个可以动态改变方向的线性布局 -->
<LinearLayout android:id="@+id/test"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent">
<Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="测试按钮一"/>
<Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="测试按钮二"/>
<Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="测试按钮三"/>
</LinearLayout>
</LinearLayout>

效果图