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>

效果图