Android UI 详解之单选（RadioButton）和复选(CheckBox)

Android UI 详解之单选（RadioButton）和复选(CheckBox)

一、

1、 单选框，复选框是所有用户界面中最普遍的UI组件，android中二者继承了Button,因此他们都可以直接使用Button支持的各种属性和方法。他们和其他按钮的区别就是有额外属性android:checked

实现RadioButton和CheckBox有两种方法，

2、通过setOnCheckedChangeListener监听器，去监听获得，但值得注意的是

RadioButton和CheckBox用的名字相同的setOnCheckedChangeListener 但是却不是一个，他们是不同包下的

，通过我们以前用过很多监听器，我们不难发现，我们set监听器名，参数就是new 监听器名 ，便于我们记忆。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="性别:"
android:textSize="16px"
/>
<!-- 定义一组单选框 -->
<RadioGroup android:id="@+id/rg"
android:orientation="horizontal"
android:layout_gravity="center_horizontal">
<!-- 定义两个单选框 -->
<RadioButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/male"
android:text="男"
android:checked="true"
/>
<RadioButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/female"
android:text="女"
/>
</RadioGroup>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="喜欢的颜色:"
android:textSize="16px"
/>
<!-- 定义一个垂直的线性布局 -->
<LinearLayout android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- 定义三个复选框 -->
<CheckBox
android:id="@+id/checkb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="红色"
android:checked="true"
/>
<CheckBox
android:id="@+id/checkb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="蓝色"
/>
<CheckBox
android:id="@+id/checkb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="绿色"
/>
</LinearLayout>
</TableRow>
<TextView
android:id="@+id/show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</TableLayout>

Java 代码

<pre name="code" class="java">package org.crazyit.ui;

import android.app.Activity;
import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;

public class CheckButtonTest extends Activity
{
RadioGroup rg;
TextView show;
CheckBox cb1;
TextView tv;
int sum = 0;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// 获取界面上rg、show两个组件
rg = (RadioGroup) findViewById(R.id.rg);
show = (TextView) findViewById(R.id.show);
tv = (TextView) findViewById(R.id.tv);
cb1 = (CheckBox)findViewById(R.id.checkb1);
// 为RadioGroup组件的OnCheck事件绑定事件监听器
rg.setOnCheckedChangeListener(new OnCheckedChangeListener()
{
@Override
public void onCheckedChanged(RadioGroup group, int checkedId)
{
// 根据用户勾选的单选按钮来动态改变tip字符串的值
String tip = checkedId == R.id.male ?
"您的性别是男人": "您的性别是女人";
// 修改show组件中的文本。
show.setText(tip);
}
});
cb1.setOnCheckedChangeListener(new android.widget.CompoundButton.OnCheckedChangeListener() {

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if(cb1.isChecked())
{
tv.setText("你刚刚选择了"+ cb1.getText());
sum++;
}
else
{
tv.setText("你刚刚取消了选择"+cb1.getText());
sum--;
}

}

});

}
}

我们遍历控件的方法

public class MainActivity extends Activity {

private RadioGroup group;
private Button btn;

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

group = (RadioGroup) findViewById(R.id.radiogroup01);
btn = (Button) findViewById(R.id.button01);

btn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int len = group.getChildCount();//获取总的长度
String msg = "";
for (int i = 0; i < len; i++) {  //遍历每一个radioButton
RadioButton radioButton = (RadioButton) group.getChildAt(i);
if (radioButton.isChecked()) {
msg = radioButton.getText().toString();
break;
}
}
Toast.makeText(MainActivity.this, msg, 1).show();
}
});
}
}

我们在实现一个下动态的创建CheckBox,

public class MainActivity extends Activity implements OnClickListener {

private List<CheckBox> CheckBoxs = new ArrayList<CheckBox>();
private Button btn;

// private CheckBox checkBox;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.main);
String[] CheckBoxText = new String[] { "地球", "亚洲", "中国", "上海", "杨浦",
"浦东" };
// 动态加载布局
LinearLayout linearLayout = (LinearLayout) getLayoutInflater().inflate(
R.layout.main, null);
// 给CheckBox赋值
for (int i = 0; i < CheckBoxText.length; i++) {
// 获得checkBox.xml对象
CheckBox checkBox = (CheckBox) getLayoutInflater().inflate(
R.layout.checkbox, null);
CheckBoxs.add(checkBox);
CheckBoxs.get(i).setText(CheckBoxText[i]);
linearLayout.addView(checkBox, i);
}

setContentView(linearLayout);
btn = (Button) findViewById(R.id.button01);
btn.setOnClickListener(this);
}

public void onClick(View v) {
String msg = "";
for (CheckBox checkBox : CheckBoxs) {
if (checkBox.isChecked()) {
msg += checkBox.getText().toString() + "\n";
}
}
if (msg.equals("")) {
msg = "您还没有选择！";
}
new AlertDialog.Builder(this).setMessage(msg)
.setPositiveButton("关闭", null).show();
}

}

重点就是，先获一个模板checkbox对象，然后设置他的text值，在添加到布局文件中

CheckBox.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/checkbox01"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

</CheckBox>

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<Button
android:id="@+id/button01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="确定" />

</LinearLayout>