Android RadioButton自定义样式正确姿势

1. 图片示例

这里写图片描述

2.说明

在移动应用开发过程中,我们会比较多的使用 RadioButton,但是好多时候并不了解怎样正确的使用它,如果充分了解到他的使用方法和好处后,你会感受到 RadioButton 其实是非常强大和好用的。

如果你有以下问题你可以通过这篇文章获取一些答案:

  • 给 RadioButton 自定义样式
  • 自定义样式后图片变形
  • 自定义样式后,再设置text属性,图片变形

3. 自定义样式

自定义样式其实挺简单,分为以下几步:

  1. 准备两张图片(选中状态和非选中状态)。
  2. 添加一个选择器
  3. 给 RadioButton 设置 button 属性为 @null
  4. 设置 RadioButton 的 background 为该选择器
  5. 完成。

代码示例如下:

// 选择器
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_unchecked" android:state_checked="false"></item>
    <item android:drawable="@drawable/ic_checked"></item>
</selector>

// View布局
<RadioButton
	    android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
		android:background="@drawable/selector_radio"
        android:button="@null"
        android:text="你好吗"/>
问题:

这个时候你会发现图片有些变形,但查看图片的宽和高发现图片的尺寸是正常的,但放上去确变形了。

4. 自定义样式后图片变形解决

一般情况你可以通过2种途径来解决这个问题:

  1. 给 RadioButton 的设置固定的宽度和高度
  2. 设置 textsize 为 0dp。

使用这两种方法后确实会解决现有问题,but, 如果你有添加文本的需求,给它添加文字后变形问题又会出现。当然你可以 RadioButton上只放图片,至于文本嘛,可以再添加一个 TextView 来放文本,这种方法确实可以解决添加文本后变形的问题,但是这也太麻烦了吧,人家 RadioButton 给你提供好了 text 属性让你来放置文本,你还要再写一次,多此一举。

5. text属性引起的图片变形解决

之前看网上好多种说法都是说禁用 button 属性,再设置 background,其实这个方法并不优雅,button 和 background 本来就是用来做两个事情的,你非得把人的button属性禁用掉,再用background来实现样式,虽然大体上也可以实现,但是这个的支持肯定不是那么好。

正确的姿势应该是把你自定义的 selecter 设置到 button 属性上,这样你再设置文本就不会出现图片变形的问题了。

这样设置以后你会发现图片与文本的间距变小了,该怎么设置呢?
答案:通过 android:paddingHorizontal=“10dp” 这个属性就可以很easy 的设置文本与图片之间的间距。

6.总结

不要乱用 background 属性,自定义样式的时候给 button 属性设置选择器,用正确的姿势,你将省很多事。正确示例:

<RadioButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:paddingHorizontal="10dp"
     android:button="@drawable/selector_radio"
     android:text="你好吗"
     android:textSize="14sp"
     android:textColor="@color/black"/>
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值