Android 自定义RadioButton实现
2016-07-01 本文已影响5865人
stephenhuashao
由于使用小米系统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是对于文字上下左右方向的图片大小设置
- 常见方法是：在代码中动态设置图片大小。然后设置在布局上。
<span style="font-size:18px;">
mRadioButton.setCompoundDrawables(left, top, right, bottom);
</span>
参数类型都是Drawable，分别是左，上，右，下四个方向要显示的Drawable图片我们查看setCompoundDrawables(left, top, right, bottom)方法：用次方法之前，需要用Drawable.setBounds()方法来为Drawable图片设置边界，即要显示的大小。
- 另一种常见方法是:
<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
这个是把自定义的替换掉系统自带的，加载自己的来实现
- 第一步，自定义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进行留言交流，并且里面有更多知识分享！
