天天看点

Android开发笔记(三十七)按钮类控件Button与ImageButtonCompoundButtonCheckBoxRadioGroup和RadioButtonSwitch

Button与ImageButton

Button是文本按钮(继承自TextView),而ImageButton是图像按钮(继承自ImageView)。两者之间的区别在于:

1、Button即可显示文本也可显示图形(通过设置背景图),而ImageButton只能显示图形不能显示文本;

2、Button可在文本周围区域显示小图,而ImageButton无法在某个区域显示小图;

3、ImageButton上的图像可按比例进行拉伸,而Button上的大图会拉伸变形(因为背景图无法按比例拉伸);

从上面可以看出,Button的适应面更广,所以实际开发中基本使用Button。

Button与ImageButton的单击方法是setOnClickListener,对应的监听器要实现接口View.OnClickListener。长按方法是setOnLongClickListener,对应的监听器要实现接口View.OnLongClickListener。下面是Button按键监听器的代码例子:

btn.setOnClickListener(new MyOnClickListener());
		btn.setOnLongClickListener(new MyOnLongClickListener());
		
	class MyOnClickListener implements View.OnClickListener{
		@Override
		public void onClick(View v) {
			Toast.makeText(MainActivity.this, "您点击了控件"+v.getId(), Toast.LENGTH_LONG).show();
		}
	}


	class MyOnLongClickListener implements View.OnLongClickListener{
		@Override
		public boolean onLongClick(View v) {
			Toast.makeText(MainActivity.this, "您长按了控件"+v.getId(), Toast.LENGTH_LONG).show();
			return true;
		}
	}           

复制

CompoundButton

CompoundButton是抽象的复合按钮,因为是抽象的,所以并不能直接使用。实际开发中用的是它的两个派生类,分别是CheckBox和RadioButton,派生类继承了CompoundButton新增的属性和方法。

xml布局上新加的属性设置:

checked : 指定按钮的勾选状态,true表示勾选,false表示未勾选。

button : 指定左侧勾选图标的图形。如果不指定就使用系统的默认图标;如果要自定义图标就要设置该属性,当然也可以将该属性设置为@null,然后到drawableLeft中设置新图标。

代码中新加的方法:

setChecked : 设置按钮的勾选状态。

setButtonDrawable : 设置左侧勾选图标的图形。

setOnCheckedChangeListener : 设置勾选变化的监听器

isChecked : 判断按钮是否选中

CheckBox

CheckBox是复选框,点击勾选,再点击则取消勾选。CheckBox是CompoundButton的一个子类,所以继承了CompoundButton的所有属性和方法。

CheckBox的勾选方法是setOnCheckedChangeListener,对应的监听器要实现接口CompoundButton.OnCheckedChangeListener。下面是CheckBox勾选监听器的代码例子:

cb.setOnCheckedChangeListener(new MyCbCheckListener());
		
	class MyCbCheckListener implements CompoundButton.OnCheckedChangeListener{
		@Override
		public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
			String desc = String.format("您勾选了控件%d,当前状态为%b", buttonView.getId(), isChecked);
			Toast.makeText(MainActivity.this, desc, Toast.LENGTH_LONG).show();
		}
	}           

复制

RadioGroup和RadioButton

RadioButton是单选框,点击选中,但是再点击不会取消选中。只有点击同组的其他RadioButton,原来勾选的RadioButton才会取消选中。RadioButton也是CompoundButton的一个子类,所以继承了CompoundButton的所有属性和方法。

RadioGroup是容纳多个RadioButton的组布局,同组中只能有一个RadioButton被选中。下面是RadioGroup常用的几个方法:

setCheckedId : 选中指定ID的RadioButton。

getCheckedRadioButtonId : 获取选中状态RadioButton的ID。

setOnCheckedChangeListener : 设置勾选变化的监听器。

RadioGroup/RadioButton的选中事件一般由RadioGroup来响应,具体方法是setOnCheckedChangeListener,对应的监听器要实现接口RadioGroup.OnCheckedChangeListener。下面是RadioGroup选中监听器的代码例子:

rg.setOnCheckedChangeListener(new MyRgCheckListener());


	class MyRgCheckListener implements RadioGroup.OnCheckedChangeListener{
		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			Toast.makeText(MainActivity.this, "您选中了控件"+checkedId, Toast.LENGTH_LONG).show();
		}
		
	}           

复制

Switch

Switch是个开关按钮,继承自CompoundButton,从Android 4.1.2开始支持。其实Switch就是个特殊UI的CheckBox,在选中与取消选中时,可展现的界面元素要比复选框要丰富些。

xml布局上新加的属性设置:

textOn : 指定右侧开启时候的文本。

textOff : 指定左侧关闭时候的文本。

switchPadding : 指定左右两个开关按钮之间的距离。

thumbTextPadding : 指定文本左右两边的距离。如果设置了该属性,则switchPadding属性失效。

thumb : 指定开关轨道的背景。

track : 指定开关标识的图标。

代码中新加的方法:

setTextOn : 设置右侧开启时候的文本。

setTextOff : 设置左侧关闭时候的文本。

setSwitchPadding : 设置左右两个开关按钮之间的距离。

setThumbTextPadding : 设置文本左右两边的距离。如果设置了该方法,则setSwitchPadding方法失效

setThumbDrawable/setThumbResource : 设置开关轨道的背景。

setTrackDrawable/setTrackResource : 设置开关标识的图标。

现在不管是用户还是app都喜欢追求高大上,于是Android的应用界面也纷纷向ios看齐,最典型的便是底部标签栏TabBar,原本Android希望大家把标签栏放在页面顶部,可是ios的TabBar却放在页面底部,所以安卓app都跟风放在底部。与之类似的还有ios的UISwitch开关控件,下面是UISwitch控件开关两个状态下的UI:

Android开发笔记(三十七)按钮类控件Button与ImageButtonCompoundButtonCheckBoxRadioGroup和RadioButtonSwitch
Android开发笔记(三十七)按钮类控件Button与ImageButtonCompoundButtonCheckBoxRadioGroup和RadioButtonSwitch

Android自带的Swtich与ios的UISwitch比起来,默认的UI很难看。为了实现ios的Switch效果,我们还是自己动手改改吧,其实也很简单,主要思想是利用CheckBox+StateDrawable,首先定义一个drawable文件用于描述不同按下状态时的图片,具体如下:

<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@drawable/switch_on" android:state_checked="true"/>
    <item android:drawable="@drawable/switch_off" android:state_checked="false"/>
    <item android:drawable="@drawable/switch_off"/>
</selector>           

复制

接着就可以在布局文件的CheckBox将该drawable设置为背景了,布局例子如下:

<CheckBox
        android:id="@+id/ck_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:checked="false"
        android:drawableLeft="@drawable/ck_switch_selector" />           

复制

点此查看Android开发笔记的完整目录