天天看點
傳回

Android 4.0 在GridLayout中模仿RadioButton單選按鈕

Android中的RadioButton必須直接以RadioGroup為父元件才能發揮作用，而RadioGroup隻能設定”橫向”和”縱向”。

在pad開發中，因為螢幕比較開闊，是以，對于一些單項選擇，其實做成GridView樣式更美觀。

在Android4.0以上的API中，提供了GridLayout這個布局，可以實作網格布局，以一個銀行選擇彈出框為例，記個小筆記。

效果如下：

Android 4.0 在GridLayout中模仿RadioButton單選按鈕

點選左上角的其他銀行,彈出AlertDialog,并動态的添加了銀行數組内所有銀行的資訊。單選按鈕其實是imageview，點選确定後，被選中的銀行資訊會顯示在界面上，dialog也會推出，當下次再彈出dialog時，預設被選中的條目将是目前界面顯示銀行條目。

布局：

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/btn_card"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="其他銀行" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv_logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25dp" />
    </LinearLayout>

</LinearLayout>

item.xml

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

    <ImageView
        android:id="@+id/iv_radio"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" />

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" />


</LinearLayout>

代碼：

MainActivity.java

package com.example.gridviewandradio;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.GridLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener {

	private Button btn_card;
	private LayoutInflater mInflater;
	/**
	 * 銀行logo數組
	 */
	private int[] logo = { R.drawable.bank_01, R.drawable.bank_02,
			R.drawable.bank_03, R.drawable.bank_04, R.drawable.bank_05,
			R.drawable.bank_06, R.drawable.bank_07, R.drawable.bank_08,
			R.drawable.bank_09, R.drawable.bank_10, R.drawable.bank_11,
			R.drawable.bank_12, R.drawable.bank_13, R.drawable.bank_14 };
	/**
	 * 銀行name數組
	 */
	private String[] bankname = { "中國人民銀行", "中國銀行", "中國建設銀行", "中國農業銀行",
			"中國工商銀行", "華夏銀行", "招商銀行", "交通銀行", "中國光大銀行", "興業銀行", "深圳發展銀行",
			"北京銀行", "廈門國際銀行", "上海浦東發展銀行" };
	private ArrayList<ImageView> list;// 銀行清單單選按鈕儲存框
	private AlertDialog dialog;
	private String defBank = "3";
	private ImageView iv_logo;
	private TextView tv_name;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		iv_logo = (ImageView) findViewById(R.id.iv_logo);// 界面銀行logo顯示區域
		tv_name = (TextView) findViewById(R.id.tv_name);// 界面銀行名稱顯示區域

		list = new ArrayList<ImageView>();

		mInflater = LayoutInflater.from(this);

		btn_card = (Button) findViewById(R.id.btn_card);// 點選彈出銀行清單
		btn_card.setTag(defBank);// ——————————備注1————————————
		btn_card.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btn_card:
			// 1、建立和設定一個GridLayout布局(android 4.0以上)
			GridLayout layout = new GridLayout(MainActivity.this);
			layout.setBackgroundResource(R.drawable.text_bg);
			LayoutParams layoutParams = new LayoutParams(
					android.widget.GridLayout.LayoutParams.WRAP_CONTENT,
					android.widget.GridLayout.LayoutParams.WRAP_CONTENT);
			layout.setPadding(10, 10, 10, 10);
			layout.setColumnCount(3);// 設定為 3 列
			layout.setLayoutParams(layoutParams);

			// 2、建立要添加的條目
			for (int i = 0; i < logo.length; i++) {

				LinearLayout item = (LinearLayout) mInflater.inflate(
						R.layout.item, null);
				// 初始化第 i 個條目的logo
				ImageView iv_icon = (ImageView) item.findViewById(R.id.iv_icon);
				iv_icon.setBackgroundResource(logo[i]);
				ImageView iv_radio = (ImageView) item
						.findViewById(R.id.iv_radio);
				iv_radio.setTag("" + i);// ——————————備注2————————————
				if (i == Integer.parseInt((String) btn_card.getTag())) {
					iv_radio.setBackgroundResource(R.drawable.dialog_checked);
					LinearLayout parent = (LinearLayout) iv_radio.getParent();
					parent.setBackgroundResource(R.drawable.text_bg);
				} else {
					iv_radio.setBackgroundResource(R.drawable.dialog_check);

					LinearLayout parent = (LinearLayout) iv_radio.getParent();
					parent.setBackgroundResource(R.drawable.write_bg);
				}
				iv_radio.setOnClickListener(this);
				list.add(iv_radio);// 将"單選按鈕"添加到list中,友善管理
				layout.addView(item);// 将條目添加到布局中
			}
			// 3、将建立好的view添加到AlertDialog中
			AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
			b.setTitle("請選擇銀行");
			b.setView(layout);
			b.setPositiveButton("确定", new DialogInterface.OnClickListener() {
				@Override
				public void onClick(DialogInterface dialog, int which) {
					// 确定後，将被選擇的銀行資訊顯示在界面中
					int parseInt = Integer.parseInt((String) btn_card.getTag());
					tv_name.setText(bankname[parseInt]);
					iv_logo.setBackgroundResource(logo[parseInt]);
					dialog.dismiss();
				}
			});
			dialog = b.create();
			dialog.show();
			break;
		case R.id.iv_radio:
			// 單選按鈕點選
			btn_card.setTag(v.getTag());// ——————————備注3————————————
			ImageView view = (ImageView) v;

			// 修改條目背景
			for (int i = 0; i < list.size(); i++) {
				ImageView iv2 = list.get(i);
				iv2.setBackgroundResource(R.drawable.dialog_check);

				list.remove(i);// 從list中取出ImageView修改後,在将原來的舊的删除,才能添加新的
				list.add(i, iv2);

				// 修改條目背景
				LinearLayout parent = (LinearLayout) iv2.getParent();
				parent.setBackgroundResource(R.drawable.write_bg);
			}
			view.setBackgroundResource(R.drawable.dialog_checked);
			LinearLayout parent = (LinearLayout) view.getParent();
			parent.setBackgroundResource(R.drawable.text_bg);

			break;
		default:
			break;
		}

	}
}

備注1：第一次打開dialog時，我将預設的要選中的銀行id儲存在左上角那個button的tag中，實際整個流程，隻要是最終選中的銀行，其id都會儲存在左上角那個按鈕的tag中。

備注2：将被點選按鈕的在list中的index儲存在”假RadioButton”的tag中

備注3：v.getTag()是擷取備注2中儲存的”假RadioButton”的index,每次在網格布局中選擇過一個條目後，都把該條目的index儲存在界面左上角那個按鈕的tag裡，下次彈出dialog時，将把該條目作為預設選中項。

點選下載下傳源碼

孤陋寡聞 GridLayout radiobutton 網格布局 單選按鈕 android
上一篇: java背景與android端內建信鴿推送和華為推送通道
下一篇: maven+SpringMvc釋出WebService(附錄排除問題小過程)

繼續閱讀