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

Question

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

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

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

Answer 1

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

红线显示整个复选框的 paddingLeft 偏移值

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

事实证明，您无法在 XML 中修复此问题。你已经用代码做到了。这是我的代码片段，硬编码填充增加了 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 的回答。

Answer 2

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

android:paddingLeft="@dimen/padding_checkbox"

在两个值文件夹中找到尺寸：

values

<resources>

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

</resources>

values-v17 (4.2 JellyBean)< /strong>

<resources>

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

</resources>

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

Answer 3

使用属性 android:drawableLeft 而不是 android:button。为了设置可绘制对象和文本之间的填充，请使用android:drawablePadding。要定位可绘制对象，请使用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"
        />

Answer 4

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

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

您可以通过 XML 来解决它 - 在旧版 Android 上将 paddingLeft 设置为 buttonDrawable.width + requiredSpace。仅在 API 17 及更高版本上将其设置为 requiredSpace。例如，使用维度资源并覆盖 value-v17 资源文件夹。

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

Answer 5

是的，您可以通过添加内边距来添加内边距。

android:padding=5dp

Answer 6

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

<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 分配一个值。此外，透明度允许您在任何背景颜色上使用此技术，而不会产生副作用（例如颜色不匹配）。

Answer 7

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

android:paddingStart="24dp"

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

android:paddingLeft="24dp"

Answer 8

就我而言，我使用 XML 中的以下 CheckBox 属性解决了这个问题：

*

android:paddingLeft="@dimen/activity_horizo​​ntal_margin"

*

Answer 9

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

android:paddingLeft="10dp"

Answer 10

我不知道大家，但我测试了

并且仅将文本移动到右侧，而不是整个控件。

它很适合我。

Answer 11

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

android:paddingLeft="10dp"

但它变得超过10dp，因为复选标记周围包含填充（大约5dp）。如果您想删除内边距，请参阅如何删除 Android CheckBox 周围的内边距：

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

Answer 12

为什么不直接扩展 Android CheckBox 以获得更好的填充呢？这样，您不必每次使用 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" />

Answer 13

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

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

Answer 14

我刚刚得出结论：

如果您有自定义可绘制对象，则覆盖 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;
    }

}

或者如果您使用系统可绘制对象，则添加此方法：

@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;
    }

}

感谢您的回答:)

Answer 15

只需要在 xml 文件中有一个参数

android:paddingLeft="20dp"

Answer 16

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

Answer 17

如果有人需要在可绘制对象周围填充试试这个

        <com.google.android.material.checkbox.MaterialCheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:drawableStart="@drawable/button_selector"
        android:padding="@dimen/items_padding" />

Answer 18

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

Answer 19

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

            <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" />

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

Answer 20

我认为这可以帮助你

<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawablePadding="-30dp"
        android:paddingLeft="30dp"
        android:drawableLeft="@drawable/check"
        />

Answer 21

如果您要创建自定义按钮，例如请参阅 更改复选框外观教程

然后只需增加宽度btn_check_label_background.9.png 通过在图像中心添加一列或两列透明像素来实现；保留 9 块标记不变。

Answer 22

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

Answer 23

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

Answer 24

@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 应该可以帮助你

Answer 25

您需要获取正在使用的图像的大小，以便将填充添加到该大小。在 Android 内部，他们获取您在 src 上指定的可绘制对象，然后使用其大小。因为它是一个私有变量并且没有 getter，所以你无法访问它。此外，您无法获取 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;
    }
}

Answer 26

由于您可能为 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 及以下版本的复选框下显示文本，在这种情况下，您可以通过创建自定义复选框类来修复它，例如 建议，但适用于 api 级别 16。

理由：

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

Answer 27

要解决这个问题，您所要做的就是将 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"/>

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

Answer 28

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

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

Answer 29

我通过更改图像最终解决了这个问题。
刚刚在 png 文件中添加了额外的透明背景。
该解决方案在所有 API 上都表现出色。

Answer 30

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

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

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);