【Android】多行（Multi-row） RadioButton Group

在寫Android APP時，想要有多行RadioButton組成RadioGroup，但是RadioGroup又只認下一層的物件，對於下下層的子物件就會被忽視，所以無法以LinearLayout包裝一行行RadioButton的方式來達成。

最後在StackOverflow看到繼承TableLayout進行多行RadioButton實做的範例，在此做個使用方式的記錄，但是還不完全了解運作方式，待以後了解深入之後再來補。

作業環境：
使用Windows 7、Eclipse LUNA
Android SDK Platform-tools version 21
Android SDK Build-tools version 21.1.2
ADT version 24.0.2

程式主要概念：

使用者任意點選RadioButton，在點選取得字串按鍵後，會在按鍵下方顯示RadioButton後方的字串，簡易流程圖如下：

程式介面規畫示意圖：

Step 1. 撰寫xml，加入Button以及TextView物件

MainActivity.java所搭配的xml為預設的activity_main.xml，根據程式流程除了多行的RadioButtonGroup外，至少需要一個Button物件（btn_get）來觸發事件跟一個TextView物件（tvw_result）作為顯示字串用，參考程式碼以及Layout Outline如下：

Step 2. 建立繼承TableLayout的客制類別ToggleButtonGroupTableLayout

接下來新建一個名為ToggleButtonGroupTableLayout.java的class，創建方法為右鍵點擊專案名稱，選擇New -> Class，編輯以下欄位：
Package欄位：建議將自行撰寫的view放置在另外的package較方便管理
Name欄位：輸入class名稱，同時也做為自定物件的名稱
Superclass欄位：選擇繼承TableLayout，點選Browse按鍵，輸入TableLayout進行搜尋。
上述欄位所在位置如下圖：

ToggleButtonGroupTableLayout.java之程式碼：
如此一來，客製的TableLayout類別ToggleButtonGroupTableLayout就完成了。其中public getCheckedRadioButtonId這個method可以讓我們在其他Activity中呼叫，取得被選取RadioButton的id。
若是要取得RadioButton的字串，可以新增如下的method：
如有其他需要，也可以動手寫寫看！

Step 2. 編輯xml，將ToggleButtonGroupTableLayout放入介面中

將ToggleButtonGroupTableLayout放入xml介面編排中，程式碼及Layout Outline圖如下：

若想使用更多行的RadioButton，直接複製TableRow的區塊即可。
注意在使用ToggleButtonGroupTableLayout物件時，需要將該class所在的package也寫入，其格式為package_name.ToggleButtonGroupTableLayout，如按照先前設定的話，程式碼內容便是 "<com.custom.view.ToggleButtonGroupTableLayout …."，如果使用其他的package名稱，記得要改成相應名稱。

Step 3. 使用MainActivity內的全域變數進行資料傳遞

由於在經過一番嘗試之後，還是找不到方法在MainActivity內對ToggleButtonGroupTableLayout物件以類似setOnClickListener的方式插入RadioButton的點擊事件（只好在以後哪天開竅再回來補），只有ToggleButtonGroupTableLayout的onClick對選取RadioButton有反應。
因此決定先以比較迂迴的方式取得字串，先在MainActivity.java內新增一個全域的字串變數（result）作為儲存字串之用，然後當ToggleButtonGroupTableLayout物件onClick事件被觸發時，會將RadioButton的字串存入result。
MainActivity程式碼如下：
<script src="https://gist.github.com/NearLinHere/4f50a917421a43cff2de.js"></script> 另外在ToggleButtonGroupTableLayout.java內的onClick()添加取得字串以及賦值的部分：
<script src="https://gist.github.com/NearLinHere/faf28d2f4c200d9a185a.js"></script>

Step 3. 在MainActivity取得RadioButton的ID、字串值

首先使用ToggleButtonGroupTableLayout內的getCheckedRadioButtonId()方法取得RadioButton的ID，再cast成RadioButton的物件，接下就與操作一般RaioButton時相同，可以透過radioButton.getText().toString()取得字串值，程式碼如下：
接下來便可以運行程式，點擊畫面上的按鈕後，會在下方顯示所選的RadioButton字串。

如果想讓程式碼更簡潔，可以使用Step 1.最後提到的getCheckedRadiobuttonStringText()，可以直接回傳字串值。

參考資料

[1] stackoverflow, How to group a 3x3 grid of radio buttons?
Available from: http://stackoverflow.com/questions/2381560/how-to-group-a-3x3-grid-of-radio-buttons

Cabinet. 79

Search This Blog