关闭

Android 自定义RadioButton

标签: android圆形按钮radio button自定义View自定义RadioButton
99人阅读 评论(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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3877次
    • 积分:185
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    最新评论