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. */
    @Override
    public 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() {
			
			@Override
			public 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;
	@Override
	public 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()
		{
			@Override
			public 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"
	>
<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="测试按钮一"
	/>
<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="测试按钮二"
	/>
<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="测试按钮三"
	/>
</LinearLayout>
</LinearLayout>

效果图