Android 自定义RadioButton实现

作者: stephenhuashao | 来源:发表于2016-07-01 11:27 被阅读5865次

    由于使用小米系统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进行留言交流,并且里面有更多知识分享!

    相关文章

      网友评论

      • 莎莎氧oO:rb_male.setButtonDrawable(R.layout.item);

        你确定是layout?

      本文标题:Android 自定义RadioButton实现

      本文链接:https://www.haomeiwen.com/subject/rzvfjttx.html