复选框材料设计

Posted

技术标签:

【中文标题】复选框材料设计【英文标题】:Check box material design 【发布时间】:2015-07-17 14:39:00 【问题描述】:

我在我的项目中使用了一个复选框,但我无法消除左侧填充,因此对齐不正确。

有人知道如何消除左边的填充吗?

【问题讨论】:

尝试使用负左边距,例如 -10 dp 但这不是解决问题的正确和优雅的方法:) 也因为它可能会因设备而异 如果你给你的edittext和其他视图留出边距,那么把这个边距设置为复选框的负数。它不会改变。同时我会为你提供一个更好的解决方案 一个更好的解决方案是您可以将您的复选框按钮和背景设置为空,然后添加一个可绘制的左侧。例如- android:background="@null" android:button="@null" android:drawableLeft="@drawable/custom_checkbox" 可能是一个想法,但我必须自己绘制复选框,我认为问题在于正方形的可绘制性,本身有边距。 【参考方案1】:

这是因为Android Checkbox 使用的drawable 有自己的margin。 因此,为了避免这种情况,您必须使用自定义可绘制对象和选中和未选中状态的图标创建自己的复选框。

1> 为您的复选框创建一个自定义选择器,例如:

<?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/ic_unchecked" />
     <item android:state_checked="true" android:drawable="@drawable/ic_checked" />
     <item android:drawable="@drawable/ic_unchecked" /> <!-- default -->
</selector>

2>然后在您的 xml 中添加一个普通复选框,将 drawable 和 button 属性设置为 null,并将您的选择器指定为复选框的左侧 drawable。还提供一个可绘制填充以在复选框图标和文本之间提供一些填充。

<CheckBox
                android:id="@+id/chk_terms"
                android:layout_
                android:layout_
                android:background="@null"
                android:button="@null"
                android:drawableLeft="@drawable/custom_checkbox"
                android:drawablePadding="@dimen/margin_left_right"
                android:text="@string/i_agree"
                android:textSize="@dimen/text_size_small"
                 />

注意 ->

这个解决方案还解决了android 4.2及以上checkbox的填充问题。这也被称为HERE

【讨论】:

我要自己画png文件,所以我觉得最好放负边距 你可以把你的图片放在选择器中,这样就不需要负边距了【参考方案2】:

经过一番研究,我发现,这个特定的边距在 check-square 的 drawable 中。所以我想唯一的解决方案是创建一个自定义的drawable

【讨论】:

以上是关于复选框材料设计的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 4 的材料设计表中添加复选框

javascript 简单的材料设计复选框。演示:https://jsfiddle.net/vogp8uwe/

具有唯一选择的材料复选框

2个formarray内的嵌套复选框 - 角度材料

如何从角度材料复选框中获取值

角度材料两个复选框,一次只能检查一个