Android 自定义RadioButton实现

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

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

单选项框RadioGroup

API

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

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

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

通过Demo来了解---RPcalc

UI布局

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进行留言交流,并且里面有更多知识分享!

原文地址:https://www.cnblogs.com/stephenhuashao/p/5630459.html