Android 表格佈局的RadioButton

最近想用RadioButton進行表格狀的佈局，但是研究之後發現android自帶的RadioGroup是繼承自LinearLayout，如果裏面再加上佈局的話，沒有辦法讓裏面的RadioButton屬於同一個RadioGroup。這篇博文裏android自定義RadioGroup實現可以添加多種佈局，博主自己重寫了一個RadioGroup類，使其可以對子佈局中的RadioButton進行查找，達到了在RadioGroup中增加布局的方法。但是我覺得這樣略顯麻煩（主要是自己技術不到家，對於自定義控件的掌握還不是很好），所以自己重新寫了一個項目，用GridView和RadioButton，實現了表格狀的佈局，通過GridView的Adapter來控制RadioButton的單選，實現效果如下：

實現思路：在佈局裏定義一個GridView及其適配器Adapter，通過一個int型的gridViewSelectPosition，每次點擊後，將選中的position傳入到Adapter中，然後刷新GridView的顯示，達到單選的效果。

代碼如下：

主頁面佈局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- android:listSelector="@android:color/transparent"去掉GridView點擊時的默認效果 -->

    <GridView
        android:id="@+id/gv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:listSelector="@android:color/transparent"
        android:numColumns="4"
        android:paddingLeft="15dp"
        android:verticalSpacing="10dp" >
    </GridView>

</LinearLayout>

GridViewItem佈局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 需要設置子控件的clickable爲false，GridView才能響應點擊事件 -->

    <ImageView
        android:id="@+id/iv"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:clickable="false"
        android:contentDescription="@string/app_name"
        android:focusable="false" />

    <RadioButton
        android:id="@+id/rb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:focusable="false" />

</LinearLayout>

MainActivity.java代碼：（需要將圖片（表情）拷貝到drawable文件夾中）

public class MainActivity extends Activity {

	private GridView gridView;
	private List<GridViewItem> list;
	int gridViewSelectPosition = 0;// 初始化的時候選擇某個選項，默認爲0，可更改

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		list = new ArrayList<MainActivity.GridViewItem>();
		// 表情資源文件
		int[] imageIdArray = { R.drawable.mood1_laugh, R.drawable.mood2_giggle, R.drawable.mood3_smile, R.drawable.mood4_cry, R.drawable.mood5_surprise,
				R.drawable.mood6_sweat, R.drawable.mood7_angry, R.drawable.mood8_cute };
		String[] rbTextArray = { "開心", "壞笑", "偷笑", "哭泣", "驚嚇", "汗顏", "生氣", "賣萌" };
		for (int i = 0; i < imageIdArray.length; i++) {
			GridViewItem gridViewItem = new GridViewItem();
			gridViewItem.setImageId(imageIdArray[i]);
			gridViewItem.setRbText(rbTextArray[i]);
			list.add(gridViewItem);
		}

		gridView = (GridView) findViewById(R.id.gv);
		MyAdapter adapter = new MyAdapter(MainActivity.this, list, gridViewSelectPosition);
		gridView.setAdapter(adapter);

		// 設置點擊事件，根據position設置Item被選中，保證每次只能選中一個Item
		gridView.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				MyAdapter adapter = new MyAdapter(MainActivity.this, list, position);
				gridView.setAdapter(adapter);
				//Toast中，position是從0開始計數的
				Toast.makeText(MainActivity.this, "選擇了第" + position + "個表情：" + list.get(position).getRbText(), Toast.LENGTH_SHORT).show();
			}
		});
	}

	// GridView每一個Item的數據結構
	private class GridViewItem {
		int imageId;
		String rbText;

		public int getImageId() {
			return imageId;
		}

		public void setImageId(int imageId) {
			this.imageId = imageId;
		}

		public String getRbText() {
			return rbText;
		}

		public void setRbText(String rbText) {
			this.rbText = rbText;
		}
	}

	private class MyAdapter extends BaseAdapter {

		private LayoutInflater inflater;
		private List<GridViewItem> list;
		// 記錄哪一個Item被選中，初始化的時候使用，在本例中並未用到
		private int gridViewSelectPosition;

		public MyAdapter(Context context, List<GridViewItem> list, int gridViewSelectPosition) {
			inflater = LayoutInflater.from(context);
			this.list = list;
			this.gridViewSelectPosition = gridViewSelectPosition;
		}

		@Override
		public int getCount() {
			return list.size();
		}

		@Override
		public Object getItem(int position) {
			return list.get(position);
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			ViewHolder viewHolder;
			if (convertView == null) {
				viewHolder = new ViewHolder();
				convertView = inflater.inflate(R.layout.gridviewitem, null);
				viewHolder.iv = (ImageView) convertView.findViewById(R.id.iv);
				viewHolder.rb = (RadioButton) convertView.findViewById(R.id.rb);
				convertView.setTag(viewHolder);
			} else {
				viewHolder = (ViewHolder) convertView.getTag();
			}
			GridViewItem gridViewItem = list.get(position);
			viewHolder.iv.setImageResource(gridViewItem.getImageId());
			viewHolder.rb.setText(gridViewItem.getRbText());
			// 如果是被選中的Item，則CheckBox爲選中狀態，背景爲紅色
			// 否則CheckBox爲未被選中狀態，背景爲白色
			if (position == gridViewSelectPosition) {
				viewHolder.iv.setBackgroundColor(Color.RED);
				viewHolder.rb.setChecked(true);
			} else {
				viewHolder.iv.setBackgroundColor(Color.WHITE);
				viewHolder.rb.setChecked(false);
			}
			return convertView;
		}

		private class ViewHolder {
			ImageView iv;
			RadioButton rb;
		}
	}
}

至此，便達到了RadioButton成表格佈局，並實現了單選的效果。

源碼下載：Android 表格佈局的RadioButton