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

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

文章结构：

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

2.RadioButton+Dialog的结合

3.RadioButton+Dialog+listview的结合

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

先上图

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

下面是代码的详解：

1.此处页面的fragment_link.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进行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的博客】