默认效果
默认的RadioButton点击时出现粉色的波纹,点击后圆圈变为粉色,RadioButton常配合RadioGrop成组使用。
修改圆圈、波纹、文字效果
布局文件
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/radiobtn_ripplecolor"
android:buttonTint="@drawable/radiobtn_circlecolor"
android:text="语文"
android:textColor="@drawable/radiobtn_textcolor" />
1、设置选中时圆圈的颜色为蓝色,radiobtn_circlecolor.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:color="@color/blue"/>
<item android:state_checked="false"
android:color="@color/gray"/>
</selector>
设置android:buttonTint="@drawable/radiobtn_circlecolor"
属性后,选中时圆圈已经变成了蓝色,但是点击时的波纹还是粉色。
2、设置点击时的波纹颜色为蓝色,radiobtn_ripplecolor.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/blue">
</ripple>
设置android:background="@drawable/radiobtn_ripplecolor"
属性后,点击时会出现蓝色波纹。
3、设置选中时文字的颜色为橙色,radiobtn_textcolor.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:color="@color/blue"/>
<item android:state_checked="false"
android:color="@color/gray"/>
</selector>
设置android:textColor="@drawable/radiobtn_textcolor"
属性后,选中时文字为橙色。
多组RadioButton的单选
像上面有多行RadioButton
的情况,如果在RadioGroup内部添加布局的话会导致失去单选的功能,所以只能使用多个RadioGroup(上面图片两行使用了两个RadioGroup),或者自定义RadioButton(网络上有重写RadioButton的代码)。如果RadioGroup不是很多的情况还是使用RadioGroup
的clearCheck()
函数比较方便,在一个RadioGroup中点击时调用另一个RadioGroup的clearCheck()函数来保持单选。
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.sample.mycustomcomponent.RadioBtnActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="课程" />
<RadioGroup
android:id="@+id/rg1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp">
<RadioButton
android:id="@+id/rb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/radiobtn_ripplecolor"
android:buttonTint="@drawable/radiobtn_circlecolor"
android:text="语文"
android:textColor="@drawable/radiobtn_textcolor" />
<RadioButton
android:id="@+id/rb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/radiobtn_ripplecolor"
android:buttonTint="@drawable/radiobtn_circlecolor"
android:text="数学"
android:textColor="@drawable/radiobtn_textcolor" />
<RadioButton
android:id="@+id/rb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/radiobtn_ripplecolor"
android:buttonTint="@drawable/radiobtn_circlecolor"
android:text="英语"
android:textColor="@drawable/radiobtn_textcolor" />
</RadioGroup>
<RadioGroup
android:id="@+id/rg2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp">
<RadioButton
android:id="@+id/rb4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/radiobtn_ripplecolor"
android:buttonTint="@drawable/radiobtn_circlecolor"
android:text="物理"
android:textColor="@drawable/radiobtn_textcolor" />
<RadioButton
android:id="@+id/rb5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/radiobtn_ripplecolor"
android:buttonTint="@drawable/radiobtn_circlecolor"
android:text="化学"
android:textColor="@drawable/radiobtn_textcolor" />
<RadioButton
android:id="@+id/rb6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/radiobtn_ripplecolor"
android:buttonTint="@drawable/radiobtn_circlecolor"
android:text="生物"
android:textColor="@drawable/radiobtn_textcolor" />
</RadioGroup>
</LinearLayout>
Java文件
package com.sample.mycustomcomponent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
public class RadioBtnActivity extends AppCompatActivity {
private RadioGroup rg1;
private RadioGroup rg2;
private RadioButton rb1, rb2, rb3;
private RadioButton rb4, rb5, rb6;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_radio_btn);
rg1 = (RadioGroup) findViewById(R.id.rg1);
rg2 = (RadioGroup) findViewById(R.id.rg2);
rb1 = (RadioButton) findViewById(R.id.rb1);
rb2 = (RadioButton) findViewById(R.id.rb2);
rb3 = (RadioButton) findViewById(R.id.rb3);
rb4 = (RadioButton) findViewById(R.id.rb4);
rb5 = (RadioButton) findViewById(R.id.rb5);
rb6 = (RadioButton) findViewById(R.id.rb6);
OnCheckedChanged onCheckedChanged = new OnCheckedChanged();
rb1.setOnCheckedChangeListener(onCheckedChanged);
rb2.setOnCheckedChangeListener(onCheckedChanged);
rb3.setOnCheckedChangeListener(onCheckedChanged);
rb4.setOnCheckedChangeListener(onCheckedChanged);
rb5.setOnCheckedChangeListener(onCheckedChanged);
rb6.setOnCheckedChangeListener(onCheckedChanged);
}
private class OnCheckedChanged implements CompoundButton.OnCheckedChangeListener {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
//这里如果不判断isChecked,点击RadioButton时此函数会执行两次,一次是某个按钮的状态变为false,一次是点击的按钮状态变为ture
if(isChecked){
switch (buttonView.getId()) {
case R.id.rb1:
rg2.clearCheck();
break;
case R.id.rb2:
rg2.clearCheck();
break;
case R.id.rb3:
rg2.clearCheck();
break;
case R.id.rb4:
rg1.clearCheck();
break;
case R.id.rb5:
rg1.clearCheck();
break;
case R.id.rb6:
rg1.clearCheck();
break;
default:
break;
}
}
}
}
}
自定义RadioButton外观
布局文件
<RadioGroup
android:id="@+id/rgSex"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp">
<RadioButton
android:id="@+id/rbMan"
android:layout_width="60dp"
android:layout_height="30dp"
android:gravity="center"
android:button="@null"
android:background="@drawable/radiobtn_bg"
android:text="男生"
android:textColor="@drawable/radiobtn_textcolor" />
<RadioButton
android:id="@+id/rbWaman"
android:layout_width="60dp"
android:layout_height="30dp"
android:gravity="center"
android:layout_marginLeft="10dp"
android:button="@null"
android:background="@drawable/radiobtn_bg"
android:text="女生"
android:textColor="@drawable/radiobtn_textcolor" />
</RadioGroup>
这里的android:button="@null"
属性设置不显示圆圈
,android:textColor属性延用了上面定义过的radiobtn_textcolor.xml,这里添加了radiobtn_bg.xml
来改变RadioButton的外观
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" >
<shape android:shape="rectangle">
<!--内部填充-->
<solid android:color="@color/lightGray"/>
<!--圆角-->
<corners android:radius="5dp"/>
</shape>
</item>
<item android:state_checked="true" >
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimaryDark"/>
<corners android:radius="5dp"/>
</shape>
</item>
</selector>