首页 > 代码库 > 多行列单选按钮组RadioButton的实现

多行列单选按钮组RadioButton的实现

Android通过RadioGroup设置一组单选按钮RadioButton,但在RadioGroup中只能设置按钮排序为横排或纵排。当需要实现多行多列的单选按钮组时,查了网上的方法,发现两种解决方式:

一、通过在xml中设置margin

android:layout_marginLeft="-100dip" 

android:layout_marginTop="40dip"

这种方式兼容性不理想,对于不同尺寸的设备需对margin进行相应调整。

二、对RadioGroup进行改写:

链接:http://jasonshieh.iteye.com/blog/1972131

这个太长了,我没试= =


测试发现可用另一种较为简单的方法实现单选按钮组多行列的效果

思路:

1.假设要做一个两行三列的单选按钮组,可设置一个水平方向的LinearLayout,再在其中放置两个垂直方向的RadioGroup,每个RadioGroup含有两个按钮

2.完成步骤1后,从视觉效果上来说已完成了一个两行两列的按钮,但由于其由两个RadioGroup组成,所以无法达到单选的效果。为此,我们可以为Group中的RadioButton设置监听器,当Group1中的按钮被按下时,取消Group2中的选中状态即可。

code:

I.xml布局:一个LinearLayout,两个RadioGroup,每个RadioGroup含有3个RadioButton

<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

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

        <RadioGroup
            android:id="@+id/radiogrp1"
            android:layout_width="0px"
            android:layout_height="fill_parent"
            android:layout_weight=".5" >

            <RadioButton
                android:id="@+id/bnA"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="A"
                android:textSize="70px" />

            <RadioButton
                android:id="@+id/bnB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="B"
                android:textSize="70px" />

            <RadioButton
                android:id="@+id/bnC"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="C"
                android:textSize="70px" />
        </RadioGroup>

        <RadioGroup
            android:id="@+id/radiogrp2"
            android:layout_width="0px"
            android:layout_height="fill_parent"
            android:layout_weight=".5" >

            <RadioButton
                android:id="@+id/bnD"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="D"
                android:textSize="70px" />

            <RadioButton
                android:id="@+id/bnE"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="E"
                android:textSize="70px" />

            <RadioButton
                android:id="@+id/bnF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="F"
                android:textSize="70px" />
        </RadioGroup>
    </LinearLayout>

</RelativeLayout>

II.MainActivity:获取所有的RadioButton并对其设置监听器,每当用户选中Group1的Button时,取消Group2中按钮的选中状态,反之亦然。为设置方便,本例中编写了监听器类

public class MainActivity extends Activity {
	//用于保存当前被选中的按钮
	String strBtnSelected = "unInit";
	
	RadioButton btn1;
	RadioButton btn2;
	RadioButton btn3;
	RadioButton btn4;
	RadioButton btn5;
	RadioButton btn6;

	RadioGroup grp1;
	RadioGroup grp2;

	//监听类,每个Radiobutton均对Click动作进行监听:若用户点击的是Group1的按钮(A或B或C),则清除Group2中按钮被选中的状态
	//若用户点击的是Gourp2的按钮(B或C或D),则清除Group1中按钮被选中的状态。其中的1~6分别对应按钮A~F
	public class BtnSelected implements OnClickListener {
		public BtnSelected(String str) {
			bntID = str;
		}

		final public String bntID;

		@Override
		public void onClick(View arg0) {
			// TODO Auto-generated method stub
			strBtnSelected = bntID;

			if (bntID.equals("1") || bntID.equals("2") || bntID.equals("3")) {
				grp2.clearCheck();
			} else if (bntID.equals("4") || bntID.equals("5")
					|| bntID.equals("6")) {
				grp1.clearCheck();
			}
		}
	};

	BtnSelected btnListener1 = new BtnSelected("1");
	BtnSelected btnListener2 = new BtnSelected("2");
	BtnSelected btnListener3 = new BtnSelected("3");
	BtnSelected btnListener4 = new BtnSelected("4");
	BtnSelected btnListener5 = new BtnSelected("5");
	BtnSelected btnListener6 = new BtnSelected("6");

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//获取xml中各单选按钮
		btn1 = (RadioButton) findViewById(R.id.bnA);
		btn2 = (RadioButton) findViewById(R.id.bnB);
		btn3 = (RadioButton) findViewById(R.id.bnC);
		btn4 = (RadioButton) findViewById(R.id.bnD);
		btn5 = (RadioButton) findViewById(R.id.bnE);
		btn6 = (RadioButton) findViewById(R.id.bnF);
		grp1 = (RadioGroup) findViewById(R.id.radiogrp1);
		grp2 = (RadioGroup) findViewById(R.id.radiogrp2);
		//为每个RadioButton设置监听器
		btn1.setOnClickListener(btnListener1);
		btn2.setOnClickListener(btnListener2);
		btn3.setOnClickListener(btnListener3);
		btn4.setOnClickListener(btnListener4);
		btn5.setOnClickListener(btnListener5);
		btn6.setOnClickListener(btnListener6);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}


效果图:



多行列单选按钮组RadioButton的实现