Android - CheckBox和文本之间的间距

时间:2010-10-27 21:14:37

标签: android checkbox padding

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

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

按原样,文本太靠近复选框了: alt text

30 个答案:

答案 0 :(得分:322)

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

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

alt text

如果我只是在我的XML布局中覆盖那个填充,它会弄乱布局。这是paddingLeft =“0”的设置:

alt text

原来你无法在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());

这将为您提供以下内容,其中绿线是填充的增加。这比硬编码值更安全,因为不同的设备可以为复选框使用不同的drawable。

alt text

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

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

答案 1 :(得分:125)

鉴于@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作为您的最佳选择。

答案 2 :(得分:70)

使用属性android:drawableLeft代替android:button。要在drawable和text之间设置填充,请使用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"
        />

result

答案 3 :(得分:34)

Android 4.2 Jelly Bean(API 17)将文本paddingLeft置于buttonDrawable(右侧边缘)。它也适用于RTL模式。

在4.2 paddingLeft忽略buttonDrawable之前 - 它是从CompoundButton视图的左边缘拍摄的。

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

更改是通过android.widget.CompoundButton.getCompoundPaddingLeft();

引入的

答案 4 :(得分:26)

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

android:padding=5dp

答案 5 :(得分:19)

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

<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指定一个值。此外,透明度允许您在任何背景颜色上使用此技术,而没有副作用 - 如颜色不匹配。

答案 6 :(得分:15)

API 17及更高版本,您可以使用:

  

机器人:paddingStart =&#34; 24dp&#34;

API 16及以下版本,您可以使用:

  

机器人:paddingLeft =&#34; 24dp&#34;

答案 7 :(得分:14)

在我的情况下,我使用XML中的以下CheckBox属性解决了这个问题:

*

  

机器人:paddingLeft = “@扪/ activity_horizo​​ntal_margin”

*

答案 8 :(得分:12)

简单解决方案,在 CheckBox 属性中添加此行,将 10dp 替换为所需的间距值

android:paddingLeft="10dp"

答案 9 :(得分:10)

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

First Extend 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创建扩展的

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

答案 10 :(得分:9)

我不认识男人,但我测试了

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

这很适合我。

答案 11 :(得分:6)

我刚刚结束了这个:

如果您有自定义drawable,请覆盖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;
    }

}

感谢您的回答:)

答案 12 :(得分:4)

此行为在Jelly Bean中似乎已更改。 paddingLeft技巧增加了额外的填充,使文本看起来太过正确。还有其他人注意到了吗?

答案 13 :(得分:2)

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

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

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

答案 14 :(得分:2)

在Android 9 API 28上,将minHeight和minWidth设置为copyData = this.model.data; searchValueChange(value: string) { if(value){ this.model.data = this.model.data.filter( (item) => item[0].data.includes(e.value) || item[1].data.includes(e.value) ) }else{ this.model.data = this.copyData } } 是最干净,最直接的解决方案:

0dp

答案 15 :(得分:2)

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

android:paddingLeft="20dp"

答案 16 :(得分:2)

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

答案 17 :(得分:1)

我所做的是在(相对)TextView内有CheckBoxLayoutTextView显示我希望用户看到的文字,CheckBox没有任何文字。这样,我可以在任何地方设置CheckBox的位置/填充。

答案 18 :(得分:1)

我遇到了与Galaxy S3 mini(android 4.1.2)相同的问题,我只是将自定义复选框扩展为AppCompatCheckBox而不是CheckBox。现在它完美无缺。

答案 19 :(得分:1)

如果您要创建自定义按钮,例如见change look of checkbox tutorial

然后通过在图像中心添加一列或两列透明像素来增加btn_check_label_background.9.png的宽度;保留9个补丁标记。

答案 20 :(得分:0)

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

答案 21 :(得分:0)

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

cytoscape()

但是它变得大于10dp,因为复选标记周围包含填充(大约5dp)。如果要删除填充,请参见How to remove padding around Android CheckBox

android:paddingLeft="10dp"

答案 22 :(得分:0)

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

只需将此方法添加到您的utils:

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

答案 23 :(得分:0)

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

答案 24 :(得分:0)

当我使用自己的选择器drawables时,复选框图像重叠,我已使用下面的代码解决了这个问题:

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

答案 25 :(得分:0)

要解决此问题,您需要做的就是将android:singleLine="true"添加到a​​ndroid 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"/>

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

答案 26 :(得分:0)

由于你可能为android:button属性使用了一个drawable选择器,你需要添加android:constantSize="true"和/或指定一个默认的drawable:

<?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值。

答案 27 :(得分:0)

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

所以你需要创建自己的样式(即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;
    }
}

答案 28 :(得分:-1)

我没有调整Checkbox的文本,而是完成了以下操作,它适用于所有设备。 1)在XML中,将复选框和文本视图一个接一个地添加到相邻的位置;保持一定距离。 2)将复选框文本大小设置为0sp。 3)在复选框旁边的文本视图中添加相对文本。

答案 29 :(得分:-3)

<CheckBox android:drawablePadding="16dip" - drawables和text之间的填充。