您的位置:首页 > 产品设计 > UI/UE

Android学习笔记---第四天---基础UI组件---RadioButton&CheckBox&ToggleButton&Switch---Button的子类

2016-04-05 19:53 621 查看

Button组件及其子类

Button是一个按钮组件详情请参考Android学习笔记---第三天---基础UI组件---Button&ImageButton

RadioButton//单选框&CheckBox//多选框&ToggleButton//开关按钮&Switch//滑轨开关;这四个类均继承Button,但并不是直接继承而是继承一个名为CompoundButton的类而这个类又继承了Button。我们先来看一下CompoundButton这个类在API里的描述A button
with two states, checked and unchecked. When the button is pressed or clicked, the state changes automatically.(两种状态的按钮,选中和不选中,当按钮被按下或点击时,自动状态改变。)现在我们已经知道这四个按钮的共同特征了;我们一个一个的来分析。

RadioButton&CheckBox

首先他们有Button全部的属性与方法,但不同的是他们增加了一个属性android:checked,以及setChecked()方法,这个属性为真时表示按钮被选中。RadioButton但选中时无法再次单击取消选中而CheckBox可以,一组RadioButton我们只能选中其中一个。

RadioButton

单选框。RadioButton在使用时通常情况下会与RadioGroup一起使用,RadioGroup是一个用来装RadioButton的容器,将单独的RadioButton变成一个组。(如果不用RadioGroup后果没人喜欢不信可以试试)注意RadioGroup继承LinearLayout布局类(关于LinearLayout点击查看),我们常用的也只有他的android:orientation用来设置垂直排列还是水平,详细可以参考上面括号里的超链接;

RadioButton和Button的使用方法基本无差别,但是他的事件监听不一样(事件监听稍后再说因为这使个组件用的是同一个事件监听接口,所以实现方式一样,你也可以直接到文章最后查看)

我们先来写一组RadioButton

<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/sexTextView"
android:id="@+id/sexRGroup">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"
android:textSize="22dp"
android:id="@+id/manRButton"
android:checked="true"/>//这是唯一的性属性表示时这个RadioButton默认被选中
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"
android:textSize="22dp"
android:id="@+id/womRButton"/>
</RadioGroup>
如果这里的属性你有不认识的那就要去看看我以前的文章了(Button点击查看);

效果图



CheckBox

复选框。可以一次选中多个,他的使用与RadioButton也差不了多少,注意CheckBox不用什么容器装他。

我们来写几个CheckBox组件

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22dp"
android:text="编程"
android:id="@+id/programCButton"
android:layout_below="@+id/likeTextView" />
<CheckBox
android:layout_width="200sp"
android:layout_height="wrap_content"
android:text="看书"
android:textSize="22dp"
android:layout_alignTop="@+id/programCButton"
android:layout_alignParentRight="true"
android:id="@+id/readbookCButton"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="游戏"
android:textSize="22dp"
android:layout_below="@+id/programCButton"
android:id="@+id/gameCButton" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="其他"
android:textSize="22dp"
android:layout_below="@+id/readbookCButton"
android:layout_alignLeft="@+id/readbookCButton"
android:id="@+id/otherCButton"/>


效果图



ToggleButton&Switch

首先他们有Button全部的属性与方法,他们的共同点试试单击一下按钮为一种状态在单击一下为另一种状态即开关。他们有一些新增的属性。

ToggleButt

属性

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

android:textOn //设置打开状态时的显示文本

android:textOff //设置关闭状态时的显示文本

我们来写一个ToggleButton

<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/gameCButton"
android:id="@+id/eatTButton"
android:textOff="吃"
android:textOn="不吃" />


效果图



Switch

常用属性

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

android:textOn //设置打开状态时的显示文本

android:textOff //设置关闭状态时的显示文本

android:switchMinWidth //设置开关的最小宽度
android:switchpadding //设置开关与标题文本之间的空白

android:thumb //指定使用一个Drawable来绘制开关按钮

android:track //指定使用一个Drawable来绘制开关轨道

我们来写一个Switch组件

<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:id="@+id/newSwitch"
android:text="吐不吐"
android:switchMinWidth="100sp"
android:layout_below="@id/otherCButton"
android:thumb="@drawable/ic_launcher"//这里我用一个安卓机器人的图标绘制按钮而不是默认
android:layout_alignLeft="@id/otherCButton"/>


效果图

好像有点丑




监听事件//注意这里

上次说监听事件实在Button那篇文章里不知道的强烈建议回去看看(Button点击查看),一共说了三种方法。

其实我们只需要换一下接口就行。将OnClickListener换成OnCheckedChangeListener当然这样一来参数也就不一样了具体看代码。

ToggleButton toggleButton=(ToggleButton)findViewById(R.id.eatTButton);
toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked)
Toast.makeText(CBRBMain.this,"吃吃吃。。。",Toast.LENGTH_SHORT).show();
else{
Toast.makeText(CBRBMain.this,"不吃了。。。",Toast.LENGTH_SHORT).show();
}
}
});
大家注意看那个参数先说第二个很简单就是android:checked属性的值,注意第一个是一个CompoundButton类我们之前所四个类均继承CompoundButton所以四个类就可以共用一个监听接口实现监听,这个参数就是返回按钮本身,那个按钮触发了事件这个参数就是谁,在使用匿名内部类的方式可能用处不大,但在使用OnCheckedChangeListener接口实现就不一样了,我们可以将这四个不同的组件的触发事件放在同一个函数里。大家可以参考我之前写的文章自己试试。其他三个组件的监听事件看下完整的代码。

完整代码

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="40sp"
android:text="用户资料"
android:textSize="30dp"
android:layout_centerHorizontal="true"
android:id="@+id/userTextView"
android:gravity="bottom"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="50sp"
android:layout_below="@+id/userTextView"
android:id="@+id/nameTextView"
android:text="姓名:"
android:textSize="22dp"
android:gravity="bottom"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/nameTextView"
android:layout_alignBaseline="@+id/nameTextView"
android:singleLine="true"
android:hint="请在此输入你的姓名..."
android:id="@+id/nameEditText"
android:ems="14"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="50sp"
android:id="@+id/sexTextView"
android:text="性别"
android:layout_below="@+id/nameTextView"
android:textSize="22dp"
android:gravity="bottom"/>
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/sexTextView"
android:id="@+id/sexRGroup">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"
android:textSize="22dp"
android:id="@+id/manRButton"
android:checked="true"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"
android:textSize="22dp"
android:id="@+id/womRButton"/>
</RadioGroup>
<TextView
android:layout_width="wrap_content"
android:layout_height="40sp"
android:text="爱好"
android:textSize="22dp"
android:gravity="bottom"
android:layout_below="@+id/sexRGroup"
android:id="@+id/likeTextView"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22dp"
android:text="编程"
android:id="@+id/programCButton"
android:layout_below="@+id/likeTextView" />
<CheckBox
android:layout_width="200sp"
android:layout_height="wrap_content"
android:text="看书"
android:textSize="22dp"
android:layout_alignTop="@+id/programCButton"
android:layout_alignParentRight="true"
android:id="@+id/readbookCButton"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="游戏"
android:textSize="22dp"
android:layout_below="@+id/programCButton"
android:id="@+id/gameCButton"
android:onClick="gameBut"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="其他"
android:textSize="22dp"
android:layout_below="@+id/readbookCButton"
android:layout_alignLeft="@+id/readbookCButton"
android:id="@+id/otherCButton"/>
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/gameCButton"
android:id="@+id/eatTButton"
android:textOff="吃"
android:textOn="不吃" />
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:id="@+id/newSwitch"
android:text="吐不吐"
android:switchMinWidth="100sp"
android:layout_below="@id/otherCButton"
android:thumb="@drawable/ic_launcher"
android:layout_alignLeft="@id/otherCButton"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="提交"
android:textSize="22dp"
android:ems="10"
android:layout_centerHorizontal="true"
android:layout_below="@+id/newSwitch"
android:id="@+id/putInButton"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22dp"
android:id="@+id/hintTextView"
android:layout_below="@+id/putInButton" />
</RelativeLayout>
java

package cn.demail.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.RadioGroup;
import android.widget.Switch;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ToggleButton;

import cn.demail.myapplication.R;

public class CBRBMain extends AppCompatActivity{
private String sex="男";
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.cbrblayout);

final TextView hintTextView=(TextView)findViewById(R.id.hintTextView);
RadioGroup sexRadioGroup=(RadioGroup)findViewById(R.id.sexRGroup);
final EditText nameEditText =(EditText)findViewById(R.id.nameEditText);
final CheckBox programCButton=(CheckBox)findViewById(R.id.programCButton);
final CheckBox otherCButton=(CheckBox)findViewById(R.id.otherCButton);
final CheckBox readbookCButton=(CheckBox)findViewById(R.id.readbookCButton);
final CheckBox gameCButton=(CheckBox)findViewById(R.id.gameCButton);
//一下均是使用内部类的方式实现的事件监听
 Button putInButton=(Button)findViewById(R.id.putInButton);
otherCButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked){
Toast.makeText(CBRBMain.this,"你选择了其他。。。",Toast.LENGTH_SHORT).show();
}
}
});
ToggleButton toggleButton=(ToggleButton)findViewById(R.id.eatTButton);
toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked)
Toast.makeText(CBRBMain.this,"吃吃吃。。。",Toast.LENGTH_SHORT).show();
else{
Toast.makeText(CBRBMain.this,"不吃了。。。",Toast.LENGTH_SHORT).show();
}
}
});
Switch aSwitch=(Switch)findViewById(R.id.newSwitch);
aSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked)
Toast.makeText(CBRBMain.this,"吐吐吐。。。",Toast.LENGTH_SHORT).show();
else{
Toast.makeText(CBRBMain.this,"不吐了。。。",Toast.LENGTH_SHORT).show();
}
}
});
//这里提交按钮的监听;
putInButton.setOnClickListener(new View.OnClickListener() {
@Override
//处理复选框信息
 public void onClick(View v) {
String like="";
if (programCButton.isChecked()){
like+=programCButton.getText()+"、";
}
if (readbookCButton.isChecked()){
like+=readbookCButton.getText()+"、";
}
if (gameCButton.isChecked()){
like+=gameCButton.getText()+"、";
}
if (otherCButton.isChecked()){
like+=otherCButton.getText()+"、";
}
if (nameEditText.getText().toString().toCharArray().length==0){
hintTextView.setText("请先输入你的姓名...");
return;
}
if (like.toCharArray().length==0){
hintTextView.setText("你的姓名是:"+nameEditText.getText()+"\n你的性别是"+sex+"\n你没有爱好。");
return;
}
like=new String(like.toCharArray(),0,(like.toCharArray()).length-1);
hintTextView.setText("你的姓名是:"+nameEditText.getText()+"\n你的性别是"+sex+"\n你的爱好是"+like+"。");
}
});
//这里单选框的监听是写在RadioGroup上面的,当然你如果需要也可以写在RadioButton上方法与其他组件一样
//另外再讲一下RadioGroup的监听这两个参数一个表示RadioGroup本身,那个checkedId则表示触发事件的RadioButt组件的Id;
  sexRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
sex = checkedId == (R.id.manRButton) ? "男" : "女";
}
});
}
public void gameBut(View v){//这是<span style="font-size:12px;">使用xml文件中指定onClick属性</span>实现的事件监听
Toast.makeText(CBRBMain.this,"你选择了游戏。。。",Toast.LENGTH_SHORT).show();
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}


我的博客
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: