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











  • 大致的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);

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;
}
			

Intent intent = new Intent(MainActivity.this, ResultActiviy.class);
			

intent.putExtra("name", name);
intent.putExtra("sex", sex);
			

startActivity(intent);					
			}
		});
	}
    
}

效果图

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

效果图

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

两种方法思路

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

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

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

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

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

mRadioButton.setCompoundDrawables(left, top, right, bottom);

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

  1. 另一种常见方法是:

setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom);

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

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);
}
  • 在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"?>
    
   
         

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