2.3.5.RadioButton(單選按鈕)&Checkbox(復選框) · Android基礎入門教程

## 本節引言： > 本節給大家帶來的是Andoird基本UI控件中的RadioButton和Checkbox; 先說下本節要講解的內容是：RadioButton和Checkbox的 > **1.基本用法 > 2.事件處理； > 3.自定義點擊效果； > 4.改變文字與選擇框的相對位置； > 5.修改文字與選擇框的距離** 其實這兩個控件有很多地方都是類似的，除了單選和多選，事件處理，其他的都是類似的！另外還有一個ListView上Checkbox的錯位的問題，我們會在ListView那一章對這個問題進行解決，好的，開始本節內容~ 本節官方文檔API：[RadioButton](http://androiddoc.qiniudn.com/reference/android/widget/RadioButton.html)；[CheckBox](http://androiddoc.qiniudn.com/reference/android/widget/CheckBox.html)； * * * ## 1.基本用法與事件處理： * * * ### 1）RadioButton(單選按鈕) > 如題單選按鈕，就是只能夠選中一個，所以我們需要把RadioButton放到RadioGroup按鈕組中，從而實現單選功能！先熟悉下如何使用RadioButton，一個簡單的性別選擇的例子：另外我們可以為外層RadioGroup設置orientation屬性然后設置RadioButton的排列方式，是豎直還是水平~ **效果圖：** ![](https://box.kancloud.cn/2015-12-01_565da61f7112a.jpg) PS:筆者的手機是Android 5.0.1的，這里的RadioButton相比起舊版本的RadioButton，稍微好看一點~ **布局代碼如下：** ~~~ <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 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="請選擇性別" 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設置一個事件監聽器setOnCheckChangeListener **例子代碼如下：** ~~~ RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup); //第一種獲得單選按鈕值的方法 //為radioGroup設置一個監聽器:setOnCheckedChanged() radgroup.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { RadioButton radbtn = (RadioButton) findViewById(checkedId); Toast.makeText(getApplicationContext(), "按鈕組值發生改變,你選了" + radbtn.getText(), Toast.LENGTH_LONG).show(); } }); ~~~ **運行效果圖：**?![](https://box.kancloud.cn/2015-12-01_565da61fb07b0.jpg)![](https://box.kancloud.cn/2015-12-01_565da622e1697.jpg) PS：另外有一點要切記，要為每個RadioButton添加一個id，不然單選功能會生效！！！ **第二種**方法是通過單擊其他按鈕獲取選中單選按鈕的值，當然我們也可以直接獲取，這個看需求~ **例子代碼如下：** ~~~ Button btnchange = (Button) findViewById(R.id.btnpost); RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup); //為radioGroup設置一個監聽器: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(), "點擊提交按鈕,獲取你選擇的是:" + rd.getText(), Toast.LENGTH_LONG).show(); break; } } } }); ~~~ **運行效果圖：** ![](https://box.kancloud.cn/2015-12-01_565da622f2beb.jpg) **代碼解析：**?這里我們為提交按鈕設置了一個setOnClickListener事件監聽器,每次點擊的話遍歷一次RadioGroup判斷哪個按鈕被選中我們可以通過下述方法獲得RadioButton的相關信息！ * **getChildCont**( )獲得按鈕組中的單選按鈕的數目； * **getChinldAt**(i):根據索引值獲取我們的單選按鈕 * **isChecked**( ):判斷按鈕是否選中 * * * ### 2）CheckBox(復選框) > 如題復選框，即可以同時選中多個選項，至于獲得選中的值，同樣有兩種方式： 1.為每個CheckBox添加事件：setOnCheckedChangeListener 2.弄一個按鈕，在點擊后，對每個checkbox進行判斷:isChecked()； **運行效果圖：** ![](https://box.kancloud.cn/2015-12-01_565da6234055a.jpg) **實現代碼：** ~~~ public class MainActivity extends AppCompatActivity implements View.OnClickListener,CompoundButton.OnCheckedChangeListener{ 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.自定義點擊效果 > 雖然5.0后的RadioButton和Checkbox都比舊版本稍微好看了點，但是對于我們來說可能還是不喜歡或者需求，需要自己點擊效果！實現起來很簡單，先編寫一個自定義的selctor資源，設置選中與沒選中時的切換圖片~！實現效果圖如下： ![](https://box.kancloud.cn/2015-12-01_565da62459886.jpg) PS:這里素材的原因，有點小... ~~~ <?xml version="1.0" encoding="utf-8"?> <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> ~~~ 寫好后，我們有兩種方法設置，也可以說一種吧！你看看就知道了~ ①android:button屬性設置為上述的selctor ~~~ android:button="@drawable/rad_btn_selctor" ~~~ ②在style中定義一個屬性，然后通過android style屬性設置，先往style添加下述代碼： ~~~ <style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox"> <item name="android:button">@drawable/rad_btn_selctor</item> </style> ~~~ 然后布局那里: ~~~ style="@style/MyCheckBox" ~~~ * * * ## 3.改變文字與選擇框的相對位置 > 這個實現起來也很簡單，還記得我們之前學TextView的時候用到的drawableXxx嗎？要控制選擇框的位置，兩部即可！設置： > > **Step 1.**?android:button="@null" > **Step 2.**?android:drawableTop="@android:drawable/btn_radio" > 當然我們可以把drawableXxx替換成自己喜歡的效果！ * * * ## 4.修改文字與選擇框的距離 > 有時，我們可能需要調節文字與選擇框之間的距離，讓他們看起來稍微沒那么擠，我們可以： > 1.在XML代碼中控制：使用android:paddingXxx = "xxx" 來控制距離 > 2.在Java代碼中，稍微好一點，動態計算paddingLeft! **示例代碼如下：** ~~~ rb.setButtonDrawable(R.drawable.rad_btn_selctor); int rb_paddingLeft = getResources().getDrawable(R.mipmap.ic_checkbox_checked).getIntrinsicWidth()+5; rb.setPadding(rb_paddingLeft, 0, 0, 0); ~~~ * * * ## 本節小結： > 好的，關于RadioButton和Checkbox就講到這里，如果有什么寫得不對的，不好的，或者有好的建議歡迎指出萬分感激~謝謝...