Android 自定义RadioButton实现

由于使用小米系统MIUI运行是RadioButton样式跟google Android API自定义的不一样，则我们可以定义任何想要的东东。没有做不到，只有想不到

• Android 自定义RadioButton
• Android 自定义RadioButton 实现文字上下左右方向的图片大小设置

单选项框RadioGroup

单选按钮是一种双状态的按钮，可以选择或不选中。在单选按钮没有被选中时，用户能够按下或点击来选中它。但是，与复选框相反，用户一旦选中就不能够取消选中（译者注：可以通过代码来控制，界面上点击的效果是一旦选中之后就不能取消选中了）。

多个单选按钮通常与RadioGroup同时使用。当一个单选组（RadioGroup）包含几个单选按钮时，选中其中一个的同时将取消其它选中的单选按钮

• RadioGroup 的组事件.RadioGroup 可将各自不同的RadioButton ,设限于同一个Radio 按钮组,同一个RadioGroup 组里的按钮,只能做出单一选择(单选题).

通过Demo来了解---RPcalc

activity_main.xml

<EditText     
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入姓名" />
<!--建立一个RadioGroup -->
<RadioGroup
        android:id="@+id/rg_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
<!--第一个RadioButton -->
<RadioButton
        android:id="@+id/rb_male"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_weight="2"
        android:text="男" />
<!--第二个RadioButton -->
<RadioButton
        android:id="@+id/rb_female"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_weight="2"
        android:text="女" />
<!--第三个RadioButton -->
<RadioButton
        android:id="@+id/rb_other"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_weight="2" 
        android:text="人妖" />
</RadioGroup>

• 大致的UI布局，就是用到这些控件

MainActivity.java

public class MainActivity extends ActionBarActivity {
 
private EditText et_name;
private RadioGroup rg_group;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
        
<!--找到我们关心的控件 -->
et_name = (EditText) findViewById(R.id.et_name);
rg_group = (RadioGroup) findViewById(R.id.rg_group);
        
Button btn = (Button) findViewById(R.id.btn);
<!--设置按钮点击事件--点击按钮，获取数据，跳转到ResultActivity页面 -->
btn.setOnClickListener(new OnClickListener() {
            
@Override
public void onClick(View v) {
<!--获取用户名 -->
String name = et_name.getText().toString().trim();
            
<!--判断用户名为空 -->
if (TextUtils.isEmpty(name)) {
   Toast.makeText(getApplicationContext(), "用户名不能为空", Toast.LENGTH_LONG).show();
   return;
}
            
<!--判断选中的性别-->
int checkedRadioButtonId = rg_group.getCheckedRadioButtonId();
            
<!--判断具体选中的性别 -->
    int sex =0; //定义一个变量默认值为0 作用就是做一个标识
switch (checkedRadioButtonId) {
 case R.id.rb_male: //选中的是男
   sex =1;
   break;
 case R.id.rb_female: //选中的是女
   sex =2;
   break;
 case R.id.rb_other: //选中的是人妖
   sex =3;
   break;
}
            
<!--判断性别 -->
if (sex ==0) {
Toast.makeText(getApplicationContext(), "请选性别", Toast.LENGTH_SHORT).show();
return;
}
            
<!--跳转到ResultActivity--使用显示意图-->
Intent intent = new Intent(MainActivity.this, ResultActiviy.class);
            
<!--要把name和sex传递到结果页面  putExtra(里面可以传递各种类型) -->
intent.putExtra("name", name);
intent.putExtra("sex", sex);
            
<!--开启Activity -->
startActivity(intent);                  
            }
        });
    }
    
}

奇怪的事情就发生了---在小米系统下的就变化了

• 这可能是跟小米系统基于Android的MIUI系统有关，可是如果面临这种情况怎么办呢

两种方法思路

一、Android 自定义RadioButton 实现文字上下左右方向的图片大小设置

Button与Textview 我们只是把自定义的图片资源放在Textview的左边，并把Button设置为null来实现

2.设置drawable图像显示在文字的上下左右的位置，如果不想设置，则传递null参数。drawable图片的边界是其自身固定的边界范围。

3.left, top, right, bottom是对于文字上下左右方向的图片大小设置

1. 常见方法是：在代码中动态设置图片大小。然后设置在布局上。

<span style="font-size:18px;">
mRadioButton.setCompoundDrawables(left, top, right, bottom);
</span>

参数类型都是Drawable，分别是左，上，右，下四个方向要显示的Drawable图片我们查看setCompoundDrawables(left, top, right, bottom)方法：用次方法之前，需要用Drawable.setBounds()方法来为Drawable图片设置边界，即要显示的大小。

1. 另一种常见方法是:

<span style="font-size:18px;">
setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom);
</span>

进入源码查看该方法的具体实现：

<span style="font-size:18px;">public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top,
Drawable right, Drawable bottom) {
 
        if (left != null) {
            left.setBounds(0, 0, left.getIntrinsicWidth(), left.getIntrinsicHeight());
        }
        if (right != null) {
            right.setBounds(0, 0, right.getIntrinsicWidth(), right.getIntrinsicHeight());
        }
        if (top != null) {
            top.setBounds(0, 0, top.getIntrinsicWidth(), top.getIntrinsicHeight());
        }
        if (bottom != null) {
            bottom.setBounds(0, 0, bottom.getIntrinsicWidth(), bottom.getIntrinsicHeight());
        }
        setCompoundDrawables(left, top, right, bottom);
}</span>

• 在Demo中应用是这样的--MainActivity.java

et_name = (EditText) findViewById(R.id.et_name);
rg_group = (RadioGroup) findViewById(R.id.rg_group);
                        
Drawable ds = getResources().getDrawable(R.layout.item);
setCompoundDrawablesWithIntrinsicBounds(rb_female,ds);
 
//自定义setCompoundDrawablesWithIntrinsicBounds 替换RadioButton图片
public void setCompoundDrawablesWithIntrinsicBounds(RadioButton rb, Drawable left) {
 
if (left != null) {
   left.setBounds(0, 0, left.getIntrinsicWidth(), left.getIntrinsicHeight());
}
rb.setCompoundDrawables(left, null, null, null);  //位置是相对应文字来决定的
}

原来这个方法，同样调用了setCompoundDrawables(left, top, right, bottom)方法，并在调用之前，给传入的图片设置了边界范围，即图片自身的大小。再看这个方法的注释：设置drawable图像显示在文字的上下左右的位置，如果不想设置，则传递null参数。drawable图片的边界是其自身固定的边界范围。

二、Android 自定义RadioButton

这个是把自定义的替换掉系统自带的，加载自己的来实现

1. 第一步，自定义RadioButton图片Drawable---item.xml

<?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/dx_checkbox_off" />
   <item android:state_checked="true" android:drawable="@drawable/dx_checkbox_on" />      
</selector>

2.第二步，MainActivity.xml中添加下面代码

RadioButton rb_female = (RadioButton) findViewById(R.id.rb_female);
RadioButton rb_male = (RadioButton) findViewById(R.id.rb_male);
RadioButton rb_other = (RadioButton) findViewById(R.id.rb_other);
        
//这个是把自定义的替换掉系统自带的，加载自己的
rb_male.setButtonDrawable(R.layout.item);
rb_female.setButtonDrawable(R.layout.item);
rb_other.setButtonDrawable(R.layout.item);

欢迎交流，进入博客网站：www.wangsong520.com进行留言交流，并且里面有更多知识分享！