Android - Khoảng cách giữa CheckBox và văn bản

Có cách nào dễ dàng để thêm phần đệm giữa hộp kiểm trong điều khiển CheckBox và văn bản được liên kết không?

Tôi không thể chỉ thêm không gian hàng đầu, vì nhãn của tôi là nhiều dòng.

Như vậy, văn bản quá gần với hộp kiểm:

Tôi ghét phải trả lời câu hỏi của riêng tôi, nhưng trong trường hợp này tôi nghĩ rằng tôi cần phải làm vậy. Sau khi kiểm tra, @Falmarri đã đi đúng hướng với câu trả lời của mình. Vấn đề là điều khiển CheckBox của Android đã sử dụng thuộc tính android: paddingLeft để lấy văn bản ở đó.

Đường màu đỏ hiển thị giá trị bù paddingLeft của toàn bộ CheckBox

Nếu tôi chỉ ghi đè phần đệm đó trong bố cục XML của mình, thì nó sẽ làm rối bố cục. Đây là cài đặt paddingLeft = "0" nào:

Hóa ra bạn không thể sửa cái này trong XML. Bạn đã làm điều đó trong mã. Đây là đoạn trích của tôi với phần đệm được mã hóa tăng thêm 10dp.

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

Điều này cung cấp cho bạn những điều sau đây, trong đó đường màu xanh lá cây là sự gia tăng của phần đệm. Điều này an toàn hơn mã hóa một giá trị, vì các thiết bị khác nhau có thể sử dụng các ngăn kéo khác nhau cho hộp kiểm.

CẬP NHẬT - Như mọi người gần đây đã đề cập trong câu trả lời dưới đây, hành vi này rõ ràng đã thay đổi trong Jelly Bean (4.2). Ứng dụng của bạn sẽ cần kiểm tra phiên bản nào đang chạy và sử dụng phương pháp thích hợp.

Đối với 4.3+, nó chỉ đơn giản là thiết lập padding_left. Xem câu trả lời của htafoya để biết chi tiết.

Đưa ra phản hồi @DougW, những gì tôi làm để quản lý phiên bản đơn giản hơn, tôi thêm vào chế độ xem hộp kiểm của mình:

android:paddingLeft="@dimen/padding_checkbox"

nơi dimen được tìm thấy trong hai thư mục giá trị:

giá trị

<resources>

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

</resources>

giá trị-v17 (4.2 JellyBean)

<resources>

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

</resources>

Tôi có một kiểm tra tùy chỉnh, sử dụng dps để lựa chọn tốt nhất của bạn.

Sử dụng thuộc tính android:drawableLeftthay vì android:button. Để đặt phần đệm giữa có thể vẽ và sử dụng văn bản android:drawablePadding. Để định vị sử dụng 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"
        />

Android 4.2 Jelly Bean (API 17) đặt bộ đệm văn bảnLeft từ nútDrawable (cạnh phải bên trong). Nó cũng hoạt động cho chế độ RTL.

Trước 4.2 paddingLeft đã bỏ qua nútDrawable - nó được lấy từ cạnh trái của chế độ xem CompoundButton.

Bạn có thể giải quyết nó thông qua XML - đặt paddingLeft thành buttonDrawable. Thong + requiredSpace trên các máy Android cũ hơn. Đặt nó thành requiredSpace chỉ trên API 17 trở lên. Ví dụ: sử dụng tài nguyên thứ nguyên và ghi đè trong thư mục tài nguyên value-v17.

Thay đổi được giới thiệu thông qua android.widget.CompoundButton.getCompoundPaddingLeft ();

Có, bạn có thể thêm phần đệm bằng cách thêm phần đệm.

android:padding=5dp

Nếu bạn muốn một thiết kế sạch sẽ không có mã, hãy sử dụng:

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

Mẹo nhỏ là đặt màu trong suốt cho android:drawableLeftvà gán giá trị cho android:drawablePadding. Ngoài ra, độ trong suốt cho phép bạn sử dụng kỹ thuật này trên bất kỳ màu nền nào mà không có hiệu ứng phụ - như màu không khớp.

API 17 trở lên, bạn có thể sử dụng:

android: paddingStart = "24dp"

API 16 trở xuống, bạn có thể sử dụng:

android: paddingLeft = "24dp"

Trong trường hợp của tôi, tôi đã giải quyết vấn đề này bằng cách sử dụng thuộc tính CheckBox sau trong XML:

*

android: paddingLeft = "@ dimen / Activity_horizontal_margin"

*

Giải pháp đơn giản, thêm dòng này vào thuộc tính CheckBox , thay thế 10dp bằng giá trị khoảng cách bạn muốn

android:paddingLeft="10dp"

Tôi không biết các bạn, nhưng tôi đã thử nghiệm

<CheckBox android:paddingLeft="8mm" và chỉ di chuyển văn bản sang phải, không phải toàn bộ điều khiển.

Nó phù hợp với tôi tốt.

Tại sao không chỉ mở rộng Android CheckBox để có phần đệm tốt hơn thay thế. Bằng cách đó, thay vì phải sửa mã trong mỗi lần bạn sử dụng CheckBox, bạn chỉ có thể sử dụng CheckBox cố định thay thế.

Mở rộng CheckBox đầu tiên:

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

Thứ hai trong xml của bạn thay vì tạo một CheckBox bình thường, hãy tạo một cái mở rộng của bạn

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

Tôi vừa kết luận về điều này:

Ghi đè CheckBox và thêm phương thức này nếu bạn có thể vẽ tùy chỉnh:

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

}

hoặc điều này nếu bạn sử dụng hệ thống 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;
    }

}

Cảm ơn câu trả lời :)

Hành vi này dường như đã thay đổi trong Jelly Bean. Thủ thuật paddingLeft thêm phần đệm bổ sung, làm cho văn bản trông quá xa đúng. Có ai khác nhận thấy điều đó không?

Đối với khoảng trắng giữa dấu kiểm và văn bản sử dụng:

android:paddingLeft="10dp"

Nhưng nó trở nên hơn 10dp, vì dấu kiểm có chứa phần đệm (khoảng 5dp) xung quanh. Nếu bạn muốn xóa phần đệm, hãy xem Cách xóa phần đệm xung quanh Android CheckBox :

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

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

Nếu bạn có bộ chọn hình ảnh tùy chỉnh cho hộp kiểm hoặc radiobutton, bạn phải đặt cùng một nút và thuộc tính nền như thế này:

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

Bạn có thể kiểm soát kích thước của hộp kiểm hoặc phần đệm nút radio với thuộc tính nền.

chỉ cần bạn có một tham số trong tệp xml

android:paddingLeft="20dp"

Đặt minHeight và minWidth thành 0dpgiải pháp rõ ràng và trực tiếp nhất đối với tôi trên 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" />

Nếu bạn đang tạo các nút tùy chỉnh, ví dụ: xem thay đổi giao diện của hộp kiểm

Sau đó, chỉ cần tăng chiều rộng của btn_check_label_background.9.png bằng cách thêm một hoặc hai cột pixel trong suốt ở giữa hình ảnh; để lại các dấu 9-patch như chúng là.

Những gì tôi đã làm, có một TextViewvà một CheckBoxbên trong một (Tương đối) Layout. Các TextViewhiển thị các văn bản mà tôi muốn người dùng để xem, và CheckBoxkhông có bất kỳ văn bản. Bằng cách đó, tôi có thể đặt vị trí / phần đệm của CheckBoxbất cứ nơi nào tôi muốn.

Tôi gặp vấn đề tương tự với Galaxy S3 mini (android 4.1.2) và tôi chỉ đơn giản thực hiện hộp kiểm tùy chỉnh của mình mở rộng AppCompatCheckBox thay vì CheckBox. Bây giờ nó hoạt động hoàn hảo.

Bạn cần lấy kích thước của hình ảnh mà bạn đang sử dụng để thêm phần đệm của bạn vào kích thước này. Trên các thiết bị Android, họ có thể rút được bạn chỉ định trên src và sử dụng kích thước của nó sau đó. Vì đó là một biến riêng tư và không có getters bạn không thể truy cập vào nó. Ngoài ra, bạn không thể lấy com.android.iternal.R.stylizable.CompoundButton và lấy drawable từ đó.

Vì vậy, bạn cần tạo kiểu dáng riêng của mình (ví dụ: custom_src) hoặc bạn có thể thêm nó trực tiếp khi triển khai 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;
    }
}

Vì bạn có thể sử dụng bộ chọn có thể vẽ cho thuộc tính của mình, android:buttonbạn cần thêm android:constantSize="true"và / hoặc chỉ định một mức có thể rút được mặc định như thế này:

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

Sau đó, bạn cần chỉ định android:paddingLeftthuộc tính trong hộp kiểm xml của bạn.

Nhược điểm:

Trong trình chỉnh sửa bố cục, bạn sẽ văn bản nằm dưới hộp kiểm có api 16 trở xuống, trong trường hợp đó bạn có thể sửa nó bằng cách tạo cho bạn lớp hộp kiểm tùy chỉnh như được đề xuất nhưng đối với api cấp 16.

Cơ sở lý luận:

đó là một lỗi vì StateListDrawable#getIntrinsicWidth()cuộc gọi được sử dụng nội bộ CompoundButtonnhưng nó có thể trả về < 0giá trị nếu không có trạng thái hiện tại và không có kích thước không đổi được sử dụng.

Tất cả những gì bạn phải làm để khắc phục vấn đề này là thêm android:singleLine="true"vào checkBoxbố cục Android xml của bạn:

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

và không có gì đặc biệt sẽ được thêm vào theo chương trình.

Hình ảnh hộp kiểm bị chồng chéo khi tôi sử dụng các ngăn kéo của riêng mình từ bộ chọn, tôi đã giải quyết vấn đề này bằng cách sử dụng mã dưới đây:

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

Cảm ơn Alex Semeniuk

Tôi kết thúc với vấn đề này bằng cách thay đổi hình ảnh. Chỉ cần thêm nền trong suốt trong tập tin png. Giải pháp này hoạt động tuyệt vời trên tất cả các API.

Có lẽ đã muộn, nhưng tôi đã tạo các phương thức tiện ích để quản lý vấn đề này.

Chỉ cần thêm phương thức này vào dụng cụ của bạn:

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

Và sử dụng như thế này:

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

hoặc như thế này:

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

Thay vì điều chỉnh văn bản cho Hộp kiểm, tôi đã thực hiện theo cách này và nó đã làm việc cho tôi cho tất cả các thiết bị. 1) Trong XML, thêm hộp kiểm và một khung nhìn văn bản để liền kề nhau; giữ một khoảng cách 2) Đặt kích thước văn bản hộp kiểm thành 0sp. 3) Thêm văn bản tương đối vào văn bản đó bên cạnh hộp kiểm.

<CheckBox android:drawablePadding="16dip" - Phần đệm giữa các hình vẽ và văn bản.