RadioButton(單選按鈕)&Checkbox(復(fù)選框)
本節(jié)引言：
本節(jié)給大家?guī)?lái)的是Andoird基本UI控件中的RadioButton和Checkbox; 先說(shuō)下本節(jié)要講解的內(nèi)容是：RadioButton和Checkbox的
1.基本用法
2.事件處理；
3.自定義點(diǎn)擊效果；
4.改變文字與選擇框的相對(duì)位置；
5.修改文字與選擇框的距離
其實(shí)這兩個(gè)控件有很多地方都是類似的，除了單選和多選，事件處理，其他的都是類似的！ 另外還有一個(gè)ListView上Checkbox的錯(cuò)位的問(wèn)題，我們會(huì)在ListView那一章對(duì)這個(gè)問(wèn)題進(jìn)行 解決，好的，開(kāi)始本節(jié)內(nèi)容~ 本節(jié)官方文檔API：RadioButton；CheckBox；
1.基本用法與事件處理：
1）RadioButton(單選按鈕)
如題單選按鈕，就是只能夠選中一個(gè)，所以我們需要把RadioButton放到RadioGroup按鈕組中，從而實(shí)現(xiàn) 單選功能！先熟悉下如何使用RadioButton，一個(gè)簡(jiǎn)單的性別選擇的例子： 另外我們可以為外層RadioGroup設(shè)置orientation屬性然后設(shè)置RadioButton的排列方式，是豎直還是水平~
效果圖：
PS:筆者的手機(jī)是Android 5.0.1的，這里的RadioButton相比起舊版本的RadioButton，稍微好看一點(diǎn)~
布局代碼如下：
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="請(qǐng)選擇性別"
android:textSize="23dp"
/>
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/btnMan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"
android:checked="true"/>
<RadioButton
android:id="@+id/btnWoman"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"/>
</RadioGroup>
<Button
android:id="@+id/btnpost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="提交"/>
</LinearLayout>
獲得選中的值：
這里有兩種方法，
第一種是為RadioButton設(shè)置一個(gè)事件監(jiān)聽(tīng)器setOnCheckChangeListener
例子代碼如下：
//第一種獲得單選按鈕值的方法
//為radioGroup設(shè)置一個(gè)監(jiān)聽(tīng)器:setOnCheckedChanged()
radgroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton radbtn = (RadioButton) findViewById(checkedId);
Toast.makeText(getApplicationContext(), "按鈕組值發(fā)生改變,你選了" + radbtn.getText(), Toast.LENGTH_LONG).show();
}
});
運(yùn)行效果圖：
PS：另外有一點(diǎn)要切記，要為每個(gè)RadioButton添加一個(gè)id，不然單選功能會(huì)生效！??！
第二種方法是通過(guò)單擊其他按鈕獲取選中單選按鈕的值，當(dāng)然我們也可以直接獲取，這個(gè)看需求~
例子代碼如下：
RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup);
//為radioGroup設(shè)置一個(gè)監(jiān)聽(tīng)器:setOnCheckedChanged()
btnchange.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
for (int i = 0; i < radgroup.getChildCount(); i++) {
RadioButton rd = (RadioButton) radgroup.getChildAt(i);
if (rd.isChecked()) {
Toast.makeText(getApplicationContext(), "點(diǎn)擊提交按鈕,獲取你選擇的是:" + rd.getText(), Toast.LENGTH_LONG).show();
break;
}
}
}
});
運(yùn)行效果圖：
代碼解析：這里我們?yōu)樘峤话粹o設(shè)置了一個(gè)setOnClickListener事件監(jiān)聽(tīng)器,每次點(diǎn)擊的話遍歷一次RadioGroup判斷哪個(gè)按鈕被選中我們可以通過(guò)下述方法獲得RadioButton的相關(guān)信息！
getChildCont( )獲得按鈕組中的單選按鈕的數(shù)目；
getChinldAt(i):根據(jù)索引值獲取我們的單選按鈕
isChecked( ):判斷按鈕是否選中
2）CheckBox(復(fù)選框)
如題復(fù)選框，即可以同時(shí)選中多個(gè)選項(xiàng)，至于獲得選中的值，同樣有兩種方式： 1.為每個(gè)CheckBox添加事件：setOnCheckedChangeListener 2.弄一個(gè)按鈕，在點(diǎn)擊后，對(duì)每個(gè)checkbox進(jìn)行判斷:isChecked()；
運(yùn)行效果圖：
實(shí)現(xiàn)代碼：
private CheckBox cb_one;
private CheckBox cb_two;
private CheckBox cb_three;
private Button btn_send;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cb_one = (CheckBox) findViewById(R.id.cb_one);
cb_two = (CheckBox) findViewById(R.id.cb_two);
cb_three = (CheckBox) findViewById(R.id.cb_three);
btn_send = (Button) findViewById(R.id.btn_send);
cb_one.setOnCheckedChangeListener(this);
cb_two.setOnCheckedChangeListener(this);
cb_three.setOnCheckedChangeListener(this);
btn_send.setOnClickListener(this);
}
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(compoundButton.isChecked()) Toast.makeText(this,compoundButton.getText().toString(),Toast.LENGTH_SHORT).show();
}
@Override
public void onClick(View view) {
String choose = "";
if(cb_one.isChecked())choose += cb_one.getText().toString() + "";
if(cb_two.isChecked())choose += cb_two.getText().toString() + "";
if(cb_three.isChecked())choose += cb_three.getText().toString() + "";
Toast.makeText(this,choose,Toast.LENGTH_SHORT).show();
}
}
2.自定義點(diǎn)擊效果
雖然5.0后的RadioButton和Checkbox都比舊版本稍微好看了點(diǎn)，但是對(duì)于我們來(lái)說(shuō) 可能還是不喜歡或者需求，需要自己點(diǎn)擊效果！實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，先編寫(xiě)一個(gè)自定義 的selctor資源，設(shè)置選中與沒(méi)選中時(shí)的切換圖片~！
實(shí)現(xiàn)效果圖如下：
PS:這里素材的原因，有點(diǎn)小...
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_checked="true"
android:drawable="@mipmap/ic_checkbox_checked"/>
<item
android:state_enabled="true"
android:state_checked="false"
android:drawable="@mipmap/ic_checkbox_normal" />
</selector>
寫(xiě)好后，我們有兩種方法設(shè)置，也可以說(shuō)一種吧！你看看就知道了~
①android:button屬性設(shè)置為上述的selctor
②在style中定義一個(gè)屬性，然后通過(guò)android style屬性設(shè)置，先往style添加下述代碼：
<item name="android:button">@drawable/rad_btn_selctor</item>
</style>
然后布局那里:
3.改變文字與選擇框的相對(duì)位置
這個(gè)實(shí)現(xiàn)起來(lái)也很簡(jiǎn)單，還記得我們之前學(xué)TextView的時(shí)候用到的drawableXxx嗎？ 要控制選擇框的位置，兩部即可！設(shè)置：
Step 1. android:button="@null"
Step 2. android:drawableTop="@android:drawable/btn_radio"
當(dāng)然我們可以把drawableXxx替換成自己喜歡的效果！
4.修改文字與選擇框的距離
有時(shí)，我們可能需要調(diào)節(jié)文字與選擇框之間的距離，讓他們看起來(lái)稍微沒(méi)那么擠，我們可以：
1.在XML代碼中控制： 使用android:paddingXxx = "xxx" 來(lái)控制距離
2.在Java代碼中，稍微好一點(diǎn)，動(dòng)態(tài)計(jì)算paddingLeft!
示例代碼如下：
int rb_paddingLeft = getResources().getDrawable(R.mipmap.ic_checkbox_checked).getIntrinsicWidth()+5;
rb.setPadding(rb_paddingLeft, 0, 0, 0);
本節(jié)小結(jié)：
好的，關(guān)于RadioButton和Checkbox就講到這里，如果有什么寫(xiě)得不對(duì)的，不好的，或者有好的建議歡迎指出 萬(wàn)分感激~謝謝...