天天看點

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開發筆記的完整目錄