Android之RadioButton和RadioGroup结合Dialog的多种运用详解

RadioButton(单选按钮)在Android开发中应用的非常广泛，比如一些选择项的时候，会用到单选按钮。它是一种单选框双状态的按钮，可以选择或不选择。在RadioButton没有被选中时，用户能够按下或点击来选中它。下一篇文章将详细介绍自定义Dialog以及详解如何编写自定义控件。

---

文章结构：

1.全面介绍RadioButton的基本应用（有属性总结大全）

2.RadioButton+Dialog的结合

3.RadioButton+Dialog+listview的结合

---

一、全面介绍RadioButton的基本自定义应用

先上图

我们知道原生的radiobutton是以圆圈作为标记的，格式也相对生硬。这里的radiobutton风格采用的是谷歌设置风格，简洁。

下面是代码的详解：

1.此处页面的fragment_link.xml，并讲解一些该注意的点

（1）必须要为每个radiobutton设置上id，同时id不能有冲突，不然会引起资源的引用错误导致运行异常 （2）须配合一个资源文件进行选中情况和非选中情况的设定

<?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">    <!-- 可以看到需要一个radiogroup进行radiobutton的嵌套，我们可以选择的排列方式进行设定。   -->    <RadioGroup        android:id="@+id/groupLink"        android:gravity="center"        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="150dp"        >        <!-- 解释一些属性：android:button=“@null”是去掉原生radiobutton的圆圈单选   -->        <!-- android:checked是初始化选定状态   android:drawableRight就是自定义的关键，设置选中和非选中状态的样式。这里的属性是设置一个图片在radiobutton的右边，我们当然也可以设置在左边  -->       <!-- android:drawablePadding="" 设置图片和文字距离 -->       <!-- 小tips，radiogroup里面的格式我们还是可以加些控件的，比如这里加了textview -->        <RadioButton            android:id="@+id/rbtn_Bluetooth"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="BlueTooth"            android:textSize="17.0sp"            android:textColor="@android:color/black"            android:layout_weight="1"            android:checked="true"            android:button="@null"            android:paddingLeft="30dp"            android:drawableRight="@drawable/fragment_link_radiobutton_style"            />        <TextView            android:layout_width="match_parent"            android:layout_height="1px"            android:background="@color/gray"/>        <RadioButton            android:id="@+id/rbtn_USB"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="USB"            android:textSize="17.0sp"            android:textColor="@android:color/black"            android:layout_weight="1"            android:button="@null"            android:paddingLeft="30dp"            android:drawableRight="@drawable/fragment_link_radiobutton_style"            />        <TextView            android:layout_width="match_parent"            android:layout_height="1px"            android:background="@color/gray"/>        <RadioButton            android:id="@+id/rbtn_TCP"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="TCP"            android:textSize="17.0sp"            android:textColor="@android:color/black"            android:layout_weight="1"            android:button="@null"            android:paddingLeft="30dp"            android:drawableRight="@drawable/fragment_link_radiobutton_style"            />        <TextView            android:layout_width="match_parent"            android:layout_height="1px"            android:background="@color/gray"/>    </RadioGroup></LinearLayout>

---

2.里面选中与非选中样式的定义：在drawable文件夹下新建个资源文件fragment_link_radiobutton_style.xml

<!-- 就是一个selector标签，state_checked是选中与非选中状态，drawable就是自己定义的图片啦--><?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><!--  注意，没被选中的状态，我设置的是一个透明图片，而选中状态设置的是一个绿色的钩。必须两个图片来表示选中与非选中状态-->    <item        android:state_checked="false"        android:drawable="@drawable/transparent"        />    <item        android:state_checked="true"        android:drawable="@drawable/tick" /></selector>

3.在java文件的调用,就是些初始化以及监听写法。本文只写一次。

public class LinkFragment extends BaseFragment {    private RadioGroup groupLink;    private RadioButton rbtn_Bluetooth;    private RadioButton rbtn_USB;    private RadioButton rbtn_TCP;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_link, null);        groupLink = (RadioGroup) view.findViewById(R.id.groupLink);        rbtn_Bluetooth = (RadioButton) view.findViewById(R.id.rbtn_Bluetooth);        rbtn_USB = (RadioButton) view.findViewById(R.id.rbtn_USB);        rbtn_TCP = (RadioButton) view.findViewById(R.id.rbtn_TCP);        initListener();        return view;    }    private void initListener() {        groupLink.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, int checkedId) {                if (checkedId == rbtn_Bluetooth.getId()) {                } else if (checkedId == rbtn_USB.getId()) {                } else if (checkedId == rbtn_TCP.getId()) {                }            }        });    }}

---

二、RadioButton+Dialog的结合

先上图

可以看到也是一个仿谷歌风格的样式

1.先给dialog的布局代码dialo_broadcast.xml。这里就不详解属性了，本文第一点有。

<?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"><RadioGroup    android:id="@+id/groupBroadcast"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginTop="20dp"    android:orientation="vertical">    <RadioButton        android:id="@+id/rbtn_BroadcastClose"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="关闭"        android:textSize="17sp"        android:textColor="@android:color/black"        android:layout_weight="1"        android:checked="true"        android:button="@null"        android:drawablePadding="20dp"        android:paddingLeft="26dp"        android:drawableLeft="@drawable/settingbroadst_checked_style"/>    <RadioButton        android:id="@+id/rbtn_BroadcastFifteen"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:text="15秒"        android:textSize="17sp"        android:textColor="@android:color/black"        android:layout_weight="1"        android:button="@null"        android:drawablePadding="20dp"        android:paddingLeft="26dp"        android:drawableLeft="@drawable/settingbroadst_checked_style"/>    <RadioButton        android:id="@+id/rbtn_BroadcastThirty"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:text="30秒"        android:textSize="17sp"        android:textColor="@android:color/black"        android:layout_weight="1"        android:button="@null"        android:drawablePadding="20dp"        android:paddingLeft="26dp"        android:drawableLeft="@drawable/settingbroadst_checked_style"/>    <RadioButton        android:id="@+id/rbtn_BroadcastFourty"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:text="45秒"        android:textSize="17sp"        android:textColor="@android:color/black"        android:layout_weight="1"        android:button="@null"        android:drawablePadding="20dp"        android:paddingLeft="26dp"        android:drawableLeft="@drawable/settingbroadst_checked_style"/>    <RadioButton        android:id="@+id/rbtn_BroadcastMinute"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:layout_marginBottom="30dp"        android:text="60秒"        android:textSize="17sp"        android:textColor="@android:color/black"        android:layout_weight="1"        android:button="@null"        android:drawablePadding="20dp"        android:paddingLeft="26dp"        android:drawableLeft="@drawable/settingbroadst_checked_style"/></RadioGroup></LinearLayout>

样式也是像本文第一点，只不过换了两个图片

接下来直接列出java文件中的调用：

 private void setDialogBroadcast() {        View viewDialogBroadcast;       //使用view来接入方法写出的dialog，方便相关初始化        LayoutInflater inflater;        //引用自定义dialog布局        inflater=LayoutInflater.from(getActivity());        viewDialogBroadcast = (LinearLayout) inflater.inflate(R.layout.dialog_broadcast, null);                                           //那个layout就是我们可以dialog自定义的布局啦        final RadioGroup groupBroadcast = (RadioGroup) viewDialogBroadcast.findViewById(R.id.groupBroadcast);        final RadioButton rbtn_BroadcastClose = (RadioButton) viewDialogBroadcast.findViewById(R.id.rbtn_BroadcastClose);        final RadioButton rbtn_BroadcastFifteen = (RadioButton) viewDialogBroadcast.findViewById(R.id.rbtn_BroadcastFifteen);        final RadioButton rbtn_BroadcastThirty = (RadioButton) viewDialogBroadcast.findViewById(R.id.rbtn_BroadcastThirty);        final RadioButton rbtn_BroadcastFourty = (RadioButton) viewDialogBroadcast.findViewById(R.id.rbtn_BroadcastFourty);        final RadioButton rbtn_BroadcastMinute = (RadioButton) viewDialogBroadcast.findViewById(R.id.rbtn_BroadcastMinute);        groupBroadcast.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, int checkedId) {                if (checkedId==rbtn_BroadcastClose.getId()){                }                else if (checkedId==rbtn_BroadcastFifteen.getId()){                }                else if (checkedId==rbtn_BroadcastThirty.getId()){                }                else if (checkedId==rbtn_BroadcastFourty.getId()){                }                else if (checkedId==rbtn_BroadcastMinute.getId()){                }            }        });        new AlertDialog.Builder(getActivity())                .setView(viewDialogBroadcast)                .setTitle("周期")                .setIcon(R.drawable.setting)                .create().show();    }

---

三、RadioButton+Dialog+listview的结合

由于这个比较多，并且因为是在Dialog中使用，所以采用的是动态添加布局listview，这里先写出结构：1.需要listview的item和dialog的布局文件，2.需要listview的适配器（其中借用了别人的一个javabean） 3.到最后的调用

---

先上图

1.dialog的布局：

<?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:layout_marginTop="10dp"    android:layout_marginBottom="20dp"></LinearLayout>

item的布局：

<?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="horizontal">    <RadioButton        android:id="@+id/rbtn_item_dialog_accent"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:layout_marginBottom="10dp"        android:text="关闭"        android:textSize="17sp"        android:textColor="@android:color/black"        android:layout_weight="1"        android:button="@null"        android:drawablePadding="20dp"        android:paddingLeft="26dp"       android:drawableLeft="@drawable/settingbroadst_checked_style"/></LinearLayout>

那个选中与非选中状态的代码就不给了，随意弄吧，上面也有介绍。

---

2.适配器（关键！）

public class AccentSettingAdapter extends BaseAdapter {    Context context;    LayoutInflater mInflater;    ViewHolder holder;    List<org.fishDroneGCS.utils.Book> Book;    Book book;    // 标记用户当前选择的那一个发音(就是用来标记item的)    private int index = -1;    public AccentSettingAdapter(Context context) {        this.context = context;        this.mInflater = LayoutInflater.from(context);    }    public void setList(List<Book> Book) {        this.Book = Book;    }    // 选中当前选项时，让其他选项不被选中，一会会被调用的，这里逻辑也很清晰。    public void select(int position) {        if (!Book.get(position).isSelected()) {            Book.get(position).setSelected(true);            for (int i = 0; i < Book.size(); i++) {                if (i != position) {                    Book.get(i).setSelected(false);                }            }        }        notifyDataSetChanged();    }    @Override    public int getCount() {        return Book.size();    }    @Override    public Object getItem(int position) {        return Book.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(final int position, View convertView, ViewGroup parent) {        holder = new ViewHolder();        if (convertView == null) {            convertView = mInflater.inflate(R.layout.item_dialog_accent, null);            holder.radioBtn = (RadioButton) convertView                    .findViewById(R.id.rbtn_item_dialog_accent);            convertView.setTag(holder);        } else {            holder = (ViewHolder) convertView.getTag();        }//这里是让listview和数据对接上，很清晰看出        book = (Book) getItem(position);        holder.radioBtn.setChecked(book.isSelected());        holder.radioBtn.setText(book.getBookName());//这里就是监听radiobutton啦，索引的位置跟那个select的结合，才能完美跟radiobutton结合，让点击跟位置跟数据结合以及只选一个        holder.radioBtn                .setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {                    @Override                    public void onCheckedChanged(CompoundButton buttonView,                                                 boolean isChecked) {                        if (isChecked) {                            index = position;                            notifyDataSetChanged();                        }                    }                });        if (index == position) {// 选中的条目和当前的条目是否相等            holder.radioBtn.setChecked(true);        } else {            holder.radioBtn.setChecked(false);        }        return convertView;    }//使用了内部类，标记我们的item中的radiobutton    class ViewHolder {        RadioButton radioBtn;    }}

还有一个借用别人的一个javabean类啦，Book类

public class Book {    private String bookName;    private boolean isSelected = false;    public Book(){};    public Book(String bookName,String author,int publishTime){        this.bookName = bookName;    }    public String getBookName() {        return bookName;    }    public void setBookName(String bookName) {        this.bookName = bookName;    }    public boolean isSelected() {        return isSelected;    }    public void setSelected(boolean isSelected) {        this.isSelected = isSelected;    }}

4.嗯，到了最后的调用了。会发现很简单，就是用一个方法，就可以调用这个dialog+listview+radiobutton的结合啦

 private void setDialogAccent() { //放入数据源        list = new ArrayList<Book>();        book = new Book();        for (int i = 0; i < 8; i++) {            book.setBookName("啊啊啊啊");            list.add(book);        }        //引用自定义dialog布局        LayoutInflater inflater = LayoutInflater.from(getActivity());        View view = inflater.inflate(R.layout.dialog_accent, null);     //指定dialog引用此布局        LinearLayout dialogAccent = (LinearLayout) inflater.inflate(R.layout.dialog_accent, null);        //listview初始化        ListView listView = new ListView(getActivity());        listAdapter = new AccentSettingAdapter(getActivity());        listAdapter.setList(list);        listView.setAdapter(listAdapter);        dialogAccent.addView(listView);         //动态添加listview        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View view,                                    int position, long id) {                listAdapter.select(position);    //刚刚所用的方法啦，就是保证只选一个            }        });        new AlertDialog.Builder(getActivity())     //dialog的设置就不详细讲了，上面有                .setView(dialogAccent)                .setTitle("选择发音人及语种")                .setIcon(R.drawable.setting)                .create().show();    }

---

radiobutton的多种运用已经讲完了。下一篇博客将会详细讲radiobutton的自定义是怎样做的，以及如何去进行编写自己的自定义控件，自定义view。欢迎来讨论，共同学习。

转载请标明：【JackFrost的博客】