Android系统自带的RadioGroup只有两种排列方式:横向或纵向。 但是现实中可能需要将RadioGroup按网格状排列, 如何实现?
本文将介绍实现方法。
先看效果图:
思路:
1. 创建一个PopupWindow的弹出窗口
2. 在PopupWindow中填充一个GridView
3. 在GridView内填充多个由img和text组合而成的、外形类似于RadioButton的组合View视图
4. 当选项有改变的饿时候,更新GridView内的视图。
实现过程:
1. 创建由Img和Text组合而成的、外形类似于RadioButton的组合View视图(下面简称URadioButton)
先看URadioButton的布局,左图标右文字:只需要把图片或文字填充到<ImageView>或<TextView>中就可以实现内容不同的URadioButton。
item_radiobutton.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/item_radiobutton" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:id="@+id/item_radioimg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" /> <TextView android:layout_toRightOf="@+id/item_radioimg" android:id="@+id/item_radiotext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" /> </RelativeLayout>
我们的目标是把多个这个的URadioButton填充到GridView中,然而从GridView的填充函数:
GridView.setAdapter(ListAdapter adapter)
中,可以看出需要将一个Adapter填充到GridView中。那么先编写一个方法:该方法能够生成由多URadioButton组成的Adapter。
/*
* 创建包含多个radiobutton的Adapter。
* RadioButton的图片有redioImg指定,RadioButton的文字由radioNameArray指定
* RadioButton的图片和文字的相对位置在item_radiobutton.xml布局文件中指定。
*/
private SimpleAdapter getRadioButtonAdapter(int redioImage, String[] radioNameArray) {
ArrayList<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();
for (int i = 0; i < radioNameArray.length; i++) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("itemRadioImg", redioImage);
map.put("itemRadioText", radioNameArray[i]);
data.add(map);
}
SimpleAdapter simperAdapter = new SimpleAdapter(this, data,
R.layout.item_radiobutton, new String[] { "itemRadioImg", "itemRadioText" },
new int[] { R.id.item_radioimg, R.id.item_radiotext });
return simperAdapter;
}
下面的代码为:调用上面定义的getRadioButtonAdapter方法生成我们所需要Adapter:
private SimpleAdapter mWishesAdapter; private String[] mWishes = {"睡到自然醒", "钱多手抽筋", "加薪又升职", "妞多任我选"}; ... ... mWishesAdapter = getRadioButtonAdapter(R.drawable.btn_radio_off, mWishes);
其中R.drawable.btn_radio_off图标为:
2. 在GridView中填充URadioButtons
这里就直接贴代码了:
mWishesAdapter = getRadioButtonAdapter(R.drawable.btn_radio_off, mWishes);
LayoutInflater mLayoutInflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
mViewGroup = (ViewGroup) mLayoutInflater.inflate(R.layout.radiogroup_gridview, null, true);
mGrid = (GridView)mViewGroup.findViewById(R.id.gridview);
mGrid.setAdapter(mWishesAdapter);
mGrid.requestFocus();
mGrid.setOnItemClickListener( new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {
if(mLastItme != arg2){
//更新图标、实现单选
if(mLastItme>=0){
ChangeRadioImg(mWishesAdapter, mLastItme,false);
}
mLastItme = arg2;
ChangeRadioImg(mWishesAdapter,arg2,true);
}
}
});
为了实现单选,所以每当选择了新选项的时候,就将以前的选中的选项的图标改为:off, 本次选中的选型的图标改为On,而实现这个功能的方法为:ChangeRadioImg():
/*
* 根据选中的状态来更新图标。也就是实现我们自定义RadioGroup的单选功能
*/
private void ChangeRadioImg(SimpleAdapter adapter,int selectedItem, boolean on) {
HashMap<String, Object> map = (HashMap<String, Object>)adapter.getItem(selectedItem);
if(on)
map.put("itemRadioImg", R.drawable.btn_radio_on);
else
map.put("itemRadioImg", R.drawable.btn_radio_off);
adapter.notifyDataSetChanged();
}
经过上面得两个步骤,我们已经构造了网格状的RadioGroup,下面我们将通过一个PopupWindow将其显示出来。
//注意,PopupWindow的第一个参数必须是没有父亲的view对象即顶层View。
mPopGridRadioGroup = new PopupWindow(mViewGroup, LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT,true);
mPopGridRadioGroup.setBackgroundDrawable(new BitmapDrawable());
mPopGridRadioGroup.setTouchInterceptor(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {
mPopGridRadioGroup.dismiss();
return true;
}
return false;
}
});
mPopGridRadioGroup.showAtLocation(findViewById(R.id.mainView), Gravity.CENTER, 0, 0);
mPopGridRadioGroup.update();
到此我们就实现了网格状排列的RadioGroup。
上传源代码打包