Android - 复选框和文本之间的间距答案

【问题标题】：Android - Spacing between CheckBox and textAndroid - 复选框和文本之间的间距
【发布时间】：2011-05-01 13:39:22
【问题描述】：

是否有一种简单的方法可以在 CheckBox 控件中的复选框和相关文本之间添加填充？

我不能只添加前导空格，因为我的标签是多行的。

按原样，文本离复选框太近了：

【问题讨论】：

一个简单的解决方案是使用TextView 和drawableLeft 并使用drawablePadding 为文本留出空间。在代码中只需切换选中和未选中状态。
我刚刚注意到一个名为 android:drawablePadding 的新 xml 属性，它应该设置可绘制对象和文本之间的间距。我没有尝试过，但我认为这是谷歌针对这个问题的“事后”修复。
stackoverflow.com/a/35572204/2219406

标签： android checkbox padding

【解决方案1】：

是的，您可以通过添加填充来添加填充。

android:padding=5dp

【讨论】：

这实际上有效......有点。一方面，只需要 paddingLeft，而不是所有的 padding。但是，看起来 paddingLeft 已经设置为 40dp 左右的值。如果我将它设置为 > 40dp，它会移开，如果我将它设置为
好吧，我不知道没有看到你的布局。
是的不工作..特别是三星设备我遇到了问题。
通过添加填充来添加填充听起来合法！

【解决方案2】：

<CheckBox
        android:paddingRight="12dip" />

【讨论】：

@AndrewKS - 经过测试。正如预期的那样，这为整个控件添加了填充，而不是在复选框和文本之间。
最好将文本放在单独的 TextView 中。
@AndrewKS - 可用性的坏主意。我希望用户能够触摸文本并选择/取消选择复选框。它还破坏了许多辅助功能，就像您在网页中那样。
Bad idea for usability 不，不是。将复选框和文本视图都放在线性布局中，并使该线性布局可触摸。
-1 这个答案没有解决问题中提出的问题，即图像和文字之间的差距

【解决方案3】：

我不想回答我自己的问题，但在这种情况下，我认为我需要回答。在检查之后，@Falmarri 的答案是正确的。问题是 Android 的 CheckBox 控件已经使用 android:paddingLeft 属性来获取文本所在的位置。

红线表示整个CheckBox的paddingLeft偏移值

如果我只是在我的 XML 布局中覆盖该填充，它会弄乱布局。以下是设置 paddingLeft="0" 的作用：

事实证明，您无法在 XML 中解决此问题。你已经在代码中做到了。这是我的 sn-p，硬编码填充增加了 10dp。

final float scale = this.getResources().getDisplayMetrics().density;
checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f),
        checkBox.getPaddingTop(),
        checkBox.getPaddingRight(),
        checkBox.getPaddingBottom());

这将为您提供以下信息，其中绿线是填充的增加。这比硬编码一个值更安全，因为不同的设备可以为复选框使用不同的可绘制对象。

更新 - 正如人们最近在下面的答案中提到的那样，这种行为在 Jelly Bean (4.2) 中显然发生了变化。您的应用需要检查其运行的版本，并使用适当的方法。

对于 4.3+，它只是设置 padding_left。有关详细信息，请参阅 htafoya 的答案。

【讨论】：

回答你自己的问题没有错 - 其他人将来可能会遇到这个问题，而你只是给出了一个很好、全面的答案。
只设置paddingLeft="48sp"有什么问题？在这里工作正常，即使我改变比例和方向。您的代码在项目列表上给了我不稳定的填充值。
@harpo - 您不能保证不同的设备制造商不会为复选框使用不同的图形，这意味着您的硬编码填充可能会破坏您在不同设备上的视觉布局。因为我正在阅读当前的填充并添加它，这不会是一个问题，但你必须确保你只做一次。
@Blundell - 不一定。 Android的开源。设备供应商可以用完全不同的尺寸替换完全不同的图形。出于某种原因，他们喜欢做这样的事情。
不幸的是，您不能在自定义适配器的getView() 中使用此解决方案（如果您回收视图），因为填充将无限增加。为了解决这个问题，我不得不使用这样的东西：boolean isHackNeeded = Build.VERSION.SDK_INT < 17; float scale = context.getResources().getDisplayMetrics().density; if (isHackNeeded) {CheckBox rb = new CheckBox(context); this.PADDING = rb.getPaddingLeft() + Math.round(10.0f * scale); } else { this.PADDING = Math.round(10.0f * scale); }。然后对我膨胀的每个 CheckBox 使用PADDING：check.setPadding(PADDING, check.getPaddingTop() ...

【解决方案4】：

我不认识，但我测试过

<CheckBox android:paddingLeft="8mm" 并且仅将文本向右移动，而不是整个控件。

很适合我。

【讨论】：

我最近没有尝试过这个，所以它肯定可以在特定设备或更新的 Android 操作系统版本上运行。我强烈建议您在不同的设置上进行测试，因为这在我问这个问题时肯定不起作用。
我发现这在 2.3.3 和 4.2 之间的行为有所不同（不确定发生变化的位置）。
你的意思是dp不是mm？

【解决方案5】：

如果您正在创建自定义按钮，例如见change look of checkbox tutorial

然后简单地增加btn_check_label_background.9.png的宽度，方法是在图像的中心再增加一两列透明像素；保留 9-patch 标记。

【讨论】：

【解决方案6】：

为什么不直接扩展 Android CheckBox 以获得更好的填充。这样，每次使用 CheckBox 时都不必在代码中修复它，而只需使用固定的 CheckBox 即可。

首先扩展复选框：

package com.whatever;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.CheckBox;

/**
 * This extends the Android CheckBox to add some more padding so the text is not on top of the
 * CheckBox.
 */
public class CheckBoxWithPaddingFix extends CheckBox {

    public CheckBoxWithPaddingFix(Context context) {
        super(context);
    }

    public CheckBoxWithPaddingFix(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public CheckBoxWithPaddingFix(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public int getCompoundPaddingLeft() {
        final float scale = this.getResources().getDisplayMetrics().density;
        return (super.getCompoundPaddingLeft() + (int) (10.0f * scale + 0.5f));
    }
}

第二次在你的 xml 中创建一个扩展的 CheckBox 而不是创建一个普通的 CheckBox

<com.whatever.CheckBoxWithPaddingFix
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello there" />

【讨论】：

如果操作系统 > 4.2，您应该添加一个 'if' 以避免这样做，因为在 Jelly Bean 他们“修复”了这个。
其实 >= 4.2 (17)。

【解决方案7】：

使用属性android:drawableLeft 而不是android:button。为了在可绘制对象和文本之间设置填充，请使用android:drawablePadding。要定位drawable，请使用android:paddingLeft。

<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:drawableLeft="@drawable/check_selector"
        android:drawablePadding="-50dp"
        android:paddingLeft="40dp"
        />

【讨论】：

嗨，这是一个不错的方法，但请注意，你会得到额外的左边距 bcoz 复选框的默认图像..任何解决方案
设置android:background="@android:color/transparent"，左边距将消失
上面的代码非常适合我的单选按钮，并且在 4.2 操作系统边界上是一致的。谢谢！
这应该排名更高。正如@gnichola 所说，这适用于 Android 版本，是一个非常干净的解决方案。创建一个样式并将其分配到您的主题中，如下所示：<item name="android:checkboxStyle">@style/CheckBox</item> 这样，您就可以定义一次样式并且只引用一次。
还将背景设置为 null（或自定义），否则 lollipop+ 会获得包含整个视图的巨大圆形波纹效果。您可以使用 v21 可绘制按钮，利用标签来放回更合适的波纹。

【解决方案8】：

这种行为在 Jelly Bean 中似乎有所改变。 paddingLeft 技巧添加了额外的填充，使文本看起来太靠右了。其他人注意到了吗？

【讨论】：

感谢您的更新！我已经在我的回答中添加了一条注释。

【解决方案9】：

如果您有复选框或单选按钮的自定义图像选择器，您必须设置相同的按钮和背景属性，例如：

            <CheckBox
                android:id="@+id/filter_checkbox_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:button="@drawable/selector_checkbox_filter"
                android:background="@drawable/selector_checkbox_filter" />

您可以使用背景属性控制复选框或单选按钮填充的大小。

【讨论】：

不，您不必这样做。如果您的自定义背景不同于复选框/单选按钮字形，则这是不可接受的。

【解决方案10】：

Android 4.2 Jelly Bean (API 17) 将文本 paddingLeft 放在 buttonDrawable 中（ints 右边缘）。它也适用于 RTL 模式。

在 4.2 之前 paddingLeft 忽略了 buttonDrawable - 它取自 CompoundButton 视图的左边缘。

您可以通过 XML 解决它 - 在旧机器人上将 paddingLeft 设置为 buttonDrawable.width + requiredSpace。仅在 API 17 上将其设置为 requiredSpace。例如在 values-v17 资源文件夹中使用维度资源和覆盖。

更改是通过 android.widget.CompoundButton.getCompoundPaddingLeft(); 引入的；

【讨论】：

这是这里唯一正确的答案 - 它指出了问题并提供了简单的解决方案，我已在多个商业应用中成功使用过。
如何在 XML 中获取 buttonDrawable.width 或硬编码？
我通过删除 android:background="@android:color/transparent" 设法在旧代码中解决了这个问题。
公认的答案很好而且有效，但这个答案简单而有效。这应该是被接受的答案。

【解决方案11】：

<CheckBox android:drawablePadding="16dip" - 可绘制对象和文本之间的填充。

【讨论】：

【解决方案12】：

如果您想要一个没有代码的简洁设计，请使用：

<CheckBox
   android:id="@+id/checkBox1"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:drawableLeft="@android:color/transparent"
   android:drawablePadding="10dp"
   android:text="CheckBox"/>

诀窍是将android:drawableLeft 的颜色设置为透明，并为android:drawablePadding 分配一个值。此外，透明度允许您在任何背景颜色上使用此技术，而不会产生副作用 - 例如颜色不匹配。

【讨论】：

【解决方案13】：

我刚刚得出结论：

如果您有自定义可绘制对象，请覆盖 CheckBox 并添加此方法：

@Override
public int getCompoundPaddingLeft() {

    // Workarround for version codes < Jelly bean 4.2
    // The system does not apply the same padding. Explantion:
    // http://stackoverflow.com/questions/4037795/android-spacing-between-checkbox-and-text/4038195#4038195

    int compoundPaddingLeft = super.getCompoundPaddingLeft();

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) {
        Drawable drawable = getResources().getDrawable( YOUR CUSTOM DRAWABLE );
        return compoundPaddingLeft + (drawable != null ? drawable.getIntrinsicWidth() : 0);
    } else {
        return compoundPaddingLeft;
    }

}

或者如果你使用系统drawable的话：

@Override
public int getCompoundPaddingLeft() {

    // Workarround for version codes < Jelly bean 4.2
    // The system does not apply the same padding. Explantion:
    // http://stackoverflow.com/questions/4037795/android-spacing-between-checkbox-and-text/4038195#4038195

    int compoundPaddingLeft = super.getCompoundPaddingLeft();

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) {
        final float scale = this.getResources().getDisplayMetrics().density;
        return compoundPaddingLeft + (drawable != null ? (int)(10.0f * scale + 0.5f) : 0);
    } else {
        return compoundPaddingLeft;
    }

}

谢谢你的回答:)

【讨论】：

【解决方案14】：

鉴于@DougW 的响应，我管理版本的操作更简单，我将其添加到我的复选框视图中：

android:paddingLeft="@dimen/padding_checkbox"

dimen 在两个值文件夹中的位置：

价值观

<resources>

    <dimen name="padding_checkbox">0dp</dimen>

</resources>

values-v17 (4.2 JellyBean)

<resources>

    <dimen name="padding_checkbox">10dp</dimen>

</resources>

我有一个自定义检查，使用dps你最好的选择。

【讨论】：

这是迄今为止最好的答案。不过，它确实应该是 values-v17，因为该修复程序是在 API 17 中引入的（根据上面的一些帖子）
一个完美的答案，仅针对较旧的 api（值/维度），我将 padding_checkbox 设置为 0dip（在 API 10 上的边距已经很大）和 htafoya 建议的 values-v17 10dip。

【解决方案15】：

您需要获取您正在使用的图像的大小才能将填充添加到此大小。在 Android 内部，他们得到你在 src 上指定的可绘制对象，然后使用它的大小。由于它是一个私有变量并且没有吸气剂，因此您无法访问它。您也无法获取 com.android.internal.R.styleable.CompoundButton 并从那里获取可绘制对象。

因此您需要创建自己的样式（即 custom_src），或者您可以直接将其添加到 RadioButton 的实现中：

public class CustomRadioButton extends RadioButton {

    private Drawable mButtonDrawable = null;

    public CustomRadioButton(Context context) {
        this(context, null);
    }

    public CustomRadioButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomRadioButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mButtonDrawable = context.getResources().getDrawable(R.drawable.rbtn_green);
        setButtonDrawable(mButtonDrawable);
    }

    @Override
    public int getCompoundPaddingLeft() {
        if (Util.getAPILevel() <= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            if (drawable != null) {
                paddingLeft += drawable.getIntrinsicWidth();
            }
        }
        return paddingLeft;
    }
}

【讨论】：

【解决方案16】：

我没有调整复选框的文本，而是做了以下事情，它适用于所有设备。 1）在XML中，一个接一个地添加checkbox和一个textview；保持一定距离。 2) 将复选框文本大小设置为 0sp。 3) 在复选框旁边的该文本视图中添加相关文本。

【讨论】：

【解决方案17】：

我所做的是在（相对）Layout 内有一个TextView 和一个CheckBox。 TextView 显示我希望用户看到的文本，CheckBox 没有任何文本。这样，我可以在任何我想要的地方设置CheckBox 的位置/填充。

【讨论】：

【解决方案18】：

由于您可能为 android:button 属性使用可绘制选择器，因此您需要添加 android:constantSize="true" 和/或指定默认可绘制对象，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="true">
  <item android:drawable="@drawable/check_on" android:state_checked="true"/>
  <item android:drawable="@drawable/check_off"/>
</selector>

之后，您需要在复选框 xml 中指定 android:paddingLeft 属性。

缺点：

在布局编辑器中，您将在 api 16 及以下的复选框下方显示文本，在这种情况下，您可以通过创建自定义复选框类（如 suggested 但对于 api 级别 16）来修复它。

理由：

这是一个错误，因为 StateListDrawable#getIntrinsicWidth() 调用在 CompoundButton 内部使用，但如果没有当前状态且未使用常量大小，它可能会返回 < 0 值。

【讨论】：

【解决方案19】：

要解决这个问题，您只需将android:singleLine="true" 添加到您的android xml 布局中的checkBox：

<CheckBox 
   android:id="@+id/your_check_box"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:singleLine="true"
   android:background="@android:color/transparent"
   android:text="@string/your_string"/>

不会以编程方式添加任何特殊内容。

【讨论】：

【解决方案20】：

当我从选择器中使用自己的可绘制对象时，复选框图像重叠，我已经使用以下代码解决了这个问题：

CheckBox cb = new CheckBox(mActivity);
cb.setText("Hi");
cb.setButtonDrawable(R.drawable.check_box_selector);
cb.setChecked(true);
cb.setPadding(cb.getPaddingLeft(), padding, padding, padding);

感谢 Alex Semeniuk

【讨论】：

【解决方案21】：

简单的解决方案，在CheckBox属性中添加这一行，将10dp替换为你想要的间距值

android:paddingLeft="10dp"

【讨论】：

【解决方案22】：

xml文件中只需要一个参数

android:paddingLeft="20dp"

【讨论】：

我相信你的意思是paddingStart ;)
@ArtemMostyaev 是的

【解决方案23】：

API 17 及以上，您可以使用：

android:paddingStart="24dp"

API 16 及以下，您可以使用：

android:paddingLeft="24dp"

【讨论】：

很好的答案。我无法想象填充将如何在复选框和文本之间留出空间。通常 Padding Left 表示组件的左侧。

【解决方案24】：

在我的例子中，我使用 XML 中的以下 CheckBox 属性解决了这个问题：

*

android:paddingLeft="@dimen/activity_horizontal_margin"

*

【讨论】：

很好的答案。我无法想象填充将如何在复选框和文本之间留出空间。通常 Padding Left 表示组件的左侧。

【解决方案25】：

我通过更改图像最终解决了这个问题。只是在 png 文件中添加了额外的透明背景。此解决方案适用于所有 API。

【讨论】：

【解决方案26】：

也许为时已晚，但我已经创建了实用方法来管理这个问题。

只需将此方法添加到您的实用程序中：

public static void setCheckBoxOffset(@NonNull  CheckBox checkBox, @DimenRes int offsetRes) {
    float offset = checkBox.getResources().getDimension(offsetRes);
    setCheckBoxOffsetPx(checkBox, offset);
}

public static void setCheckBoxOffsetPx(@NonNull CheckBox checkBox, float offsetInPx) {
    int leftPadding;
    if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.JELLY_BEAN) {
        leftPadding = checkBox.getPaddingLeft() + (int) (offsetInPx + 0.5f);
    } else {
        leftPadding = (int) (offsetInPx + 0.5f);
    }
    checkBox.setPadding(leftPadding,
            checkBox.getPaddingTop(),
            checkBox.getPaddingRight(),
            checkBox.getPaddingBottom());
}

并像这样使用：

    ViewUtils.setCheckBoxOffset(mAgreeTerms, R.dimen.space_medium);

或者像这样：

    // Be careful with this usage, because it sets padding in pixels, not in dp!
    ViewUtils.setCheckBoxOffsetPx(mAgreeTerms, 100f);

【讨论】：

【解决方案27】：

我在 Galaxy S3 mini (android 4.1.2) 上遇到了同样的问题，我只是让我的自定义复选框扩展 AppCompatCheckBox 而不是 CheckBox。现在它完美地工作了。

【讨论】：

【解决方案28】：

对于复选标记和文本之间的空格，请使用：

android:paddingLeft="10dp"

但它变得超过 10dp，因为复选标记周围包含填充（大约 5dp）。如果要删除填充，请参阅How to remove padding around Android CheckBox：

android:paddingLeft="-5dp"
android:layout_marginStart="-5dp"
android:layout_marginLeft="-5dp"
// or android:translationX="-5dp" instead of layout_marginLeft

【讨论】：

如何在文本末尾添加填充？使用 margin_end 会使背景不被填充。
@HaiHack，paddingRight 有效吗？我saw 它有效。
对不起，我的意思是在@CoolMind复选框之前添加空格
@HaiHack，我看到了两个选项。 1) 扩展CheckBox 并以编程方式执行此操作。 2) 在CheckBox 上添加FrameLayout 并带有左填充。
请查看我的答案以获得更好的解决方案@CoolMind stackoverflow.com/a/68556814/5157066

【解决方案29】：

将 minHeight 和 minWidth 设置为 0dp 是我在 Android 9 API 28 上最干净、最直接的解决方案：

<CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="0dp"
        android:minWidth="0dp" />

【讨论】：

【解决方案30】：

@CoolMind 有一个不错的方法，但是它不能在android:paddingLeft 的复选框开头添加空格，而是使用这种方式

<androidx.appcompat.widget.AppCompatCheckBox
                android:id="@+id/cbReason5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white"
                android:button="@null"
                android:drawableStart="@drawable/custom_bg_checkbox"
                android:drawablePadding="8dp"
                android:paddingStart="16dp"
                android:paddingTop="12dp"
                android:paddingEnd="16dp"
                android:paddingBottom="12dp"
                android:text="Whatever"
                android:textColor="@color/textNormal"
                app:buttonCompat="@null" />

android:drawablePadding 应该可以帮到你

【讨论】：