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

最新推荐文章于 2021-05-25 15:05:14 发布

Jack__Frost

最新推荐文章于 2021-05-25 15:05:14 发布

阅读量9.2k

点赞数 3

分类专栏： Android 文章标签：单选按钮 radio button Dialog listview按钮 android

本文链接：https://blog.csdn.net/jack__frost/article/details/52145215

版权

Android 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

文章结构：

1.全面介绍RadioButton的基本应用（有属性总结大全）
2.RadioButton+Dialog的结合
3.RadioButton+Dialog+listview的结合

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

先上图在这里插入图片描述
我们知道原生的radiobutton是以圆圈作为标记的，格式也相对生硬。这里的radiobutton风格采用的是谷歌设置风格，简洁。

下面是代码的详解：

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

必须要为每个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();
    }