创建网格状的RadioGroup

最新推荐文章于 2024-05-23 16:37:07 发布
最新推荐文章于 2024-05-23 16:37:07 发布
阅读量1k 收藏
点赞数
分类专栏： Android 文章标签： 网格 android radiobutton layout object encoding

Android系统自带的RadioGroup只有两种排列方式：横向或纵向。 但是现实中可能需要将RadioGroup按网格状排列， 如何实现？

本文将介绍实现方法。

先看效果图：

radiogourp_grid

 

思路：

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图标为：

btn_radio_off 。 这个图标是从Android源码中拿出来的。

 

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();   

}
这里的R.drawable.btn_radio_on的图标为： 
btn_radio_on。 这个图标也是从Android源码中拿来的。
 
3. 在PopupWindow中填上GridView 
经过上面得两个步骤，我们已经构造了网格状的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。 下面贴出整个Java代码：
GridRadioGroup.java: 
package com.cnblogs.hibraincol;

import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
import android.widget.PopupWindow;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.view.View;
import android.widget.SimpleAdapter;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.graphics.drawable.BitmapDrawable;
import android.view.View.OnTouchListener;
import android.view.Gravity;

public class GridRadioGroup extends Activity {
    private PopupWindow mPopGridRadioGroup=null;
    private ViewGroup mViewGroup=null;
    private GridView mGrid=null;
    private SimpleAdapter mWishesAdapter;
    private int mLastItme=-1;
    private String[] mWishes = {"睡到自然醒", "钱多手抽筋", "加薪又升职", "妞多任我选"};

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Button btnPop= (Button)findViewById(R.id.btn_pop);
        btnPop.setOnClickListener(new Button.OnClickListener(){
            public void onClick(View v){
                popGridRadioGroup();
            }
        });
    }

    private void popGridRadioGroup(){
        if(mPopGridRadioGroup==null){
            LayoutInflater mLayoutInflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
            mWishesAdapter = getRadioButtonAdapter(R.drawable.btn_radio_off, mWishes);
            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); 
                    }
                }
            });    
            //注意，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();        
    }

    /*
     * 创建包含多个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;
    }

    /*
     * 根据选中的状态来更新图标。也就是实现我们自定义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();   

    }  
}

布局文件除开第一步（创建由Img和Text组合而成的、外形类似于RadioButton的组合View视图）已经贴出的item_radiobutton.xml，还有：

main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/mainView"
    >
    <TextView  
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/hello"
        />
    <Button 
        android:id="@+id/btn_pop" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:gravity="center_horizontal"
        android:textSize="20sp" 
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" 
        android:text="@string/popRadioGroup" /> 
</LinearLayout>

radiogroup_gridview.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:gravity="center" android:layout_height="fill_parent"
    android:layout_gravity="center" android:background="#b5555555" >
    <TextView android:id="@+id/rdaiogroup_title"
                android:layout_width="fill_parent"
                android:textSize="20sp" 
                android:layout_height="wrap_content" 
                android:gravity="center_horizontal"
                android:text="@string/your_wish_most"
                />
    <LinearLayout android:orientation="vertical"
        android:layout_width="wrap_content" android:gravity="center"
        android:layout_height="wrap_content" android:layout_gravity="center"
        android:background="@drawable/grid_corner">
        <GridView android:id="@+id/gridview" android:layout_width="fill_parent"
            android:layout_height="fill_parent" android:numColumns="2"
            android:verticalSpacing="5dip" android:horizontalSpacing="5dip"
            android:stretchMode="columnWidth" android:gravity="center"
            android:layout_gravity="center" />        
    </LinearLayout>
    <Button android:id="@+id/bt_confirm" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:gravity="center_horizontal"
            android:textSize="20sp" 
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" 
            android:text="@string/confirm" />      
</LinearLayout>

grid_corner.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient android:startColor="#c0000000" android:endColor="#c0000000"
        android:angle="90" />

    <stroke android:dashWidth="5dp" android:dashGap="1dp"
        android:width="1dp" android:color="#FF999999"></stroke>
    <!--
        描边 
    -->
    <corners android:bottomRightRadius="5dp"
        android:bottomLeftRadius="5dp" android:topLeftRadius="5dp"
        android:topRightRadius="5dp" /><!--设置圆角
-->
</shape>
 
写本文的目的：一是为了记录自己的学习过程，二是为了方便自己以后同类代码的编写。

如果本文能对你有所帮助，我会更开心大笑.

源码的下载地址：http://download.youkuaiyun.com/source/3320256



（源自：http://www.cnblogs.com/hibraincol/archive/2011/05/28/2060691.html）

创建标题 点击radiogroup传值给标题
搁浅的博客
01-20 538
主页面 package com.list.moni; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; ...
Andriod: 网格状RadioGroup的实现
05-28
Andriod: 网格状RadioGroup的实现。 简单示例，源码短小清晰.
网格RadioGroup实现
u012693479的博客
02-13 966
RadioGroup只能横向和垂直展示RadioButton，然后设计师们就经常要求我们网格展示。比如要实现如下的效果： 那要怎么做呢，采用继承RadioGroup，重新绘制里面的内容，上代码： 定义所需属性 attrs： <declare-styleable name="GridRadioGroup"> <attr name="numColumns" form...
网格布局RadioGroup
Hello_Lilian的博客
03-12 404
各位亲们，为大家送上单选多选的网格布局的自定义RadioGroup,有代码参考其自他人，非自创。 public class GridRadioGroup extends RadioGroup { private static final int VERTICAL_SPACING_DIP = 15; private static final int HORIZONTAL_SPACING_DIP = 10; private float verticalSpacing = 20;
动态创建RadioButton在RadioGroup中的实现方法
资源摘要信息:"在Android开发中，动态添加RadioButton到RadioGroup是一个常见的操作，尤其是在需要根据运行时条件来创建界面元素的场景。RadioButton是单选按钮，通常需要放置在RadioGroup容器中以实现单选组的功能...
Dev express radiogroup 动态添加item.zip
12-27
// 创建新的RadioGroup Item var newItem = new RadioGroupItem("新选项", "NewOptionValue"); // 将新项添加到RadioGroup的Items集合中 radioGroup.Items.Add(newItem); ``` 如果需要删除某个item，可以使用...
换行的RadioGroup可以使用
08-25
3. **Java代码设置**：如果希望在运行时动态改变`RadioGroup`的行为，可以在Java代码中创建`RadioGroup`，并设置其布局参数。例如： ```java RadioGroup radioGroup = new RadioGroup(this); radioGroup....
RadioGroup多列显示
10-24
最简单的实现，不用重写RadioGroup.
Android基础控件RadioGroup使用方法详解
01-04
本文为大家分享了Android基础控件RadioGroup的使用，供大家参考，具体内容如下 1.简单介绍 RadioGroup可以提供几个选项供用户选择，但只能选择其中的一个。其下面可以横着或者竖着挂几个RadioButton，也可以挂载其他控件（如TextView）。RadioGroup的相应事件一般不由下面的RadioButton响应，而是直接由RadioGroup响应。实现RadioGroup.OnCheckedChangeListener接口即可监听RadioGroup。RadioButton也是派生自CompoundButton，也可以通过修改button属性来修改图标，但是通过bu
Android编程开发之RadioGroup用法实例
01-04
本文实例讲述了Android编程开发之RadioGroup用法。分享给大家供大家参考，具体如下： RadioGroup 有时候比较有用．主要特征是给用户提供多选一机制。 MainActivity.java package com.example.lesson16_radio; import android.app.Activity; import android.os.Bundle; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.Toast; public
Android单选按钮RadioButton的使用详解
01-05
RadioButton是最普通的UI组件之一，继承了Button类，可以直接使用Button支持的各种属性和方法。 RadioButton与普通按钮不同的是，它多了一个可以选中的功能，可额外指定一个android:checked属性，该属性可以指定初始状态时是否被选中，其实也可以不用指定，默认初始状态都不选中。 使用RadioButton必须和单选框RadioGroup一起使用，在RadioGroup中放置RadioButton，通过setOnCheckedChangeListener( )来响应按钮的事件； （1）选用radioGroup的图标 <RelativeLayout xmlns:
RadioＧroup　随意排列，提前收藏
weixin_33696822的博客
11-04 338
#记录项目中遇到的问题 今天项目遇到这样一个需求：radiobutton 排版为2行2列，然而radiogroup继承自 LinearLayout 原始的控件仅支持水平排列，或垂直排列。然而这并不能满足需求。于是在网上找了大量的例子。最终还是用自己方法实现了需求。在此记录不要直接看代码 先上图 预览图.png 网上的方法 1、通过设置readiobutton 的margin值为负值来进行排版 ...
Android组件式开发（2）——实现网格布局的RadioButton矩阵
a253664942的专栏
01-24 3415
**前言** 在Android中，我们一般通过RadioGroup来管理一组RadioButton 来达到 单选按钮的互斥效果。但是，有些需求中，需要完成N行N列这样的RadioButton组成的矩阵,但是我们的RadioGroup是一个耿直的LinearLayout，无法完成网格布局╮(╯▽╰)╭。所以，下面我就像大家来介绍一种实现网格布局的RadioButton的思路。 无图无真相， 先上一
自定义RadioGroup和RadioButton，让布局有更多选择
疾风剑豪
03-07 791
android的系统控件RadioGroup布局继承的是LinearLayout，所以只能实现这样单行或者单列的 也很容易实现 但是有时候会是这种多行多列布局 遇到这种情况RadioGroup就没用了。 况且单个选项的布局有可能会很复杂，RadioButton内又不能设置复杂布局 为了解决这个问题我写了一套自定义的RadioGroup和RadioButton，RadioGroup继承了G...
element-ui组件库el-radio-group的样式调整
最新发布
weixin_56383764的博客
05-23 2286
可修改element-ui中el-radio-group的样式结构
vue-element-ui组件 layout布局（网格系统）
热门推荐
Osborn的博客
08-22 4万+
首先你要掌握的基础知识: .row 行概念   &lt;el-row&gt;&lt;/el-row&gt;   .col 列概念   &lt;el-col&gt;&lt;/el-col&gt;   col组件的:span属性的布局调整,一共分为24栏:   代码示例:   &lt;el-row&gt; &lt;el-col :span="24"&gt
实现Android网格布局中的单选按钮组
接下来，我们将详细探讨如何在Andriod中实现网格状的RadioGroup。 首先，我们需要了解RadioGroup的基本用法。RadioGroup是一个容器，通常用来包裹一组RadioButton控件。由于它的作用是让用户在一个组内选择单一选项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值