关闭

Android 自定义RadioButton

标签: android圆形按钮radio button自定义View自定义RadioButton
185人阅读 评论(0) 收藏 举报

最近需要做一个Theme切换的功能,想法是列出不同颜色的RadioButton,用户点击后切换theme。这就需要对RadioButton的样式进行修改。

我们知道RadioButton的xml属性中有这样一个属性:android:button; 那么,我们试着修改这个属性。

首先,创建一个drawable文件 rdobtn_blue.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false">
        <shape
            android:shape="oval">
            <solid android:color="@color/colorPrimaryDark"/>
            <size android:height="40dp" android:width="40dp"/>
        </shape>
    </item>
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape
                    android:shape="oval">
                    <solid android:color="@color/colorPrimaryDark"/>
                    <size android:height="40dp" android:width="40dp"/>
                    <padding android:left="8dp" android:bottom="8dp" android:right="8dp" android:top="8dp"/>
                </shape>
            </item>
            <!--ic_check_white_24dp 是一个 √ 样式的图片 大小是24dp-->
            <item android:drawable="@drawable/ic_check_white_24dp"/>
        </layer-list>
    </item>
</selector>
然后再创建一个类似的文件 rdobtn_pink.xml,其中将颜色切换成pink颜色.

最后,在布局文件中:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.fadai.icontopbutton.MainActivity">
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RadioButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="4dp"
            android:button="@drawable/rdobtn_pink"/>
        <RadioButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_margin="4dp"
            android:button="@drawable/rdobtn_blue"/>
    </RadioGroup>
</LinearLayout>
效果图:


可以看到,在xml中修改RadioButton的样式,还是比较简单的。可是,我们要选择的Theme有十几种的话,那是不是就要定义十几个drawable文件呢?当然不用,我们可以自定义一个RadioButton,然后通过对其自定义属性的改变,让其显示不同的颜色:

首先,在values目录中创建attrs.mxl:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyRadioButton">
        <attr name="rdoBtnBg" format="color"/>
    </declare-styleable>
</resources>
然后,创建MyRadioButton类,并对自定义的属性进行处理,赋值给backgroundColor:

TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.MyRadioButton);
backgroundColor=ta.getColor(R.styleable.MyRadioButton_rdoBtnBg,0);
ta.recycle();
然后,重写父类的onDraw方法:

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint=new Paint();
        paint.setColor(backgroundColor);
        canvas.drawCircle(getMeasuredWidth()/2,getMeasuredWidth()/2, dp2px(20),paint);
        if(isChecked()){
            Bitmap bitmap = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable.ic_check_white_24dp);
            canvas.drawBitmap(bitmap,getMeasuredWidth()/2-dp2px(12),getMeasuredWidth()/2-dp2px(12),paint);
        }
    }


可以看到,我们在super.onDraw(canvas)后,绘制了一个圆形,圆心是在控件区域中心,半径为20dp(dp2px()方法是将dp转换为px,用的别人的工具类,所以就不贴了,感兴趣的搜一下即可)。 然后判断是否是选中的状态,是的话在圆中间绘制一个对号的图片。

最后,在布局文件中:

<com.example.fadai.test.MyRadioButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:rdoBtnBg="@color/colorPrimary"
            android:layout_margin="4dp" />
<com.example.fadai.test.MyRadioButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:rdoBtnBg="@color/colorAccent"
            android:layout_margin="4dp"/>
效果图:

可以看到,效果是和设置android:button属性是差不多的,而且解决了重复使用的问题,不用定义那么多的drawable文件了。可是,效果也仅是差不多而已,因为很多细节没有做出来。比如,原本的RadioButton按上去,是有一个波纹的效果的,可我们自定义的控件,只是在原本的RadioButton绘制完成后,在上面另外绘制了一个圆形,把原来的button给覆盖住了,而波纹效果还是发生在原来的button上面的。如果我们将布局和圆形的绘制位置修改一下,是可以让原来的button露出来的:


我的解决办法是:将第一种方法中定义的drawable文件中的颜色改为透明。然后在layout中给我们的MyRadioButton添加属性: android:button="@null"   android:drawableTop="@drawable/rdobtn_blue"

经过我的测试,如果只添加android:button="@null"   的话,RadioButton就不能从被选中状态切换为未选中状态了。添加android:drawableTop="@drawable/rdobtn_blue"的话,就解决了这个问题,而且因为我们的drawable文件使用透明色的原因,他是不可见的。而且我们通过对布局的控制,将这两个圆形位置重叠在一起的话,原来的波纹效果是可以正常显示的。当然,如果不想要这个波纹效果,可以直接添加属性:android:backgroup="@null"。 这几个属性,大家可以自行测试一下。

0
0
查看评论

android 自定义radiobutton的样式 实现自己想要的样子

效果图:  对radiobutton的样式自定义无非就是style,在style里面有background来设置radiobutton的背景 button来设置radiobutton的小框框,当为null的时候,就是不要框框了 自定义的第一种style: ...
  • u010399316
  • u010399316
  • 2015-08-06 18:04
  • 8271

自定义android RadioButton样式

先看看定义好的样子:
  • Jason_996
  • Jason_996
  • 2017-03-17 15:44
  • 1194

Android RadioButton使用自定义背景

效果图: 左中右三个RadioButton分别对应不同背景:radio_left.xml<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://...
  • zhoumushui
  • zhoumushui
  • 2017-02-17 10:18
  • 1708

android:RadioButton自定义和非自定义的实现

自定义RadioButton,更广泛的使用radiobutton,实现方法很简单
  • zoushu_nihao
  • zoushu_nihao
  • 2016-08-03 01:36
  • 381

Android RadioButton自定义背景色圆角样式的方法

先看图,实现如下样式: 来看该radiobutton的代码: <RadioButton android:id="@+id/rb_a" android:layout_width="0dip" ...
  • yaochangliang159
  • yaochangliang159
  • 2017-02-26 15:19
  • 2123

Android之自定义RadioButton的样式

1.Android之自定义RadioButton的样式         2.Android之自定义RadioButton的样式
  • FastThinking
  • FastThinking
  • 2014-12-02 11:24
  • 14614

Android自定义RadioGroup中的RadioButton

主要在xml中配置RadioButton的图片和文字,并使它们在被选中、按下等显示不同的状态(肯定用selector了), 首先在清单文件中的声明 <RadioGroup android:id="@+id/main_radio" andr...
  • rankun1
  • rankun1
  • 2016-07-06 20:54
  • 1152

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

Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text. Use null if you do not want a Drawable there. The Dr...
  • gaoshouxiaodi
  • gaoshouxiaodi
  • 2015-03-23 16:42
  • 12818

自定义RadioButton Selector

问题 需要实现自定义的RadioButton selector实现步骤1 . 增加selector <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="ht...
  • lihenair
  • lihenair
  • 2015-11-28 12:02
  • 2938

安卓卡片式、数量可变自定义RadioButton

卡片式、数量可变RadioButton 目标: 我们的效果图如下: 左边红框是我们的目标。我们需要实现: 1、      卡片数量是动态变化的 2、      可滑动 3、&...
  • u011486491
  • u011486491
  • 2017-06-23 11:46
  • 171
    个人资料
    • 访问:6204次
    • 积分:239
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:1篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论