Android - ช่องว่างระหว่างช่องทำเครื่องหมายและข้อความ

มีวิธีง่าย ๆ ในการเพิ่มช่องว่างภายในช่องทำเครื่องหมายในตัวควบคุมกล่องกาเครื่องหมายและข้อความที่เกี่ยวข้อง?

ฉันไม่สามารถเพิ่มช่องว่างนำหน้าได้เพราะป้ายกำกับของฉันเป็นหลายบรรทัด

ตามที่เป็นอยู่ข้อความอยู่ใกล้กับช่องทำเครื่องหมายมากเกินไป:

ฉันเกลียดที่จะตอบคำถามของตัวเอง แต่ในกรณีนี้ฉันคิดว่าฉันต้อง หลังจากตรวจสอบมันออกมา @Falmarri อยู่ในเส้นทางที่ถูกต้องพร้อมกับคำตอบของเขา ปัญหาคือตัวควบคุมกล่องกาเครื่องหมายของ Android ใช้คุณสมบัติ 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());

นี่จะให้สิ่งต่อไปนี้แก่คุณโดยที่เส้นสีเขียวคือการเพิ่มช่องว่างภายใน สิ่งนี้ปลอดภัยกว่าการเข้ารหัสค่าเนื่องจากอุปกรณ์ต่าง ๆ สามารถใช้ drawables ที่แตกต่างกันสำหรับช่องทำเครื่องหมาย

อัปเดต - ตามที่ผู้คนได้กล่าวถึงเมื่อเร็ว ๆ นี้ในคำตอบด้านล่างพฤติกรรมนี้มีการเปลี่ยนแปลงอย่างเห็นได้ชัดใน Jelly Bean (4.2) แอปของคุณจะต้องตรวจสอบเวอร์ชันที่ใช้งานอยู่และใช้วิธีการที่เหมาะสม

สำหรับ 4.3+ เพียงแค่ตั้งค่า padding_left ดูคำตอบของ htafoya สำหรับรายละเอียด

เมื่อได้รับการตอบสนอง @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 เพื่อเลือกที่ดีที่สุดของคุณ

ใช้แอตทริบิวต์แทนandroid:drawableLeft android:buttonเพื่อที่จะตั้ง padding android:drawablePaddingระหว่างการใช้ android:paddingLeftการวางตำแหน่งการใช้ drawable

<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) วางข้อความเป็นส่วนขยายจาก buttonDrawable (ints right edge edge) มันยังใช้งานได้กับโหมด RTL

ก่อนที่ 4.2 paddingLeft ละเว้นปุ่มกดวาดได้ - ถูกนำมาจากขอบด้านซ้ายของมุมมอง CompoundButton

คุณสามารถแก้ปัญหาได้ผ่านทาง XML - ตั้งค่า paddingLeft เป็น buttonDrawable.width + requiredSpace บน Android ที่เก่ากว่า ตั้งค่าเป็น RequiredSpace บน API 17 ขึ้นไปเท่านั้น ตัวอย่างเช่นใช้ทรัพยากรมิติและแทนที่ในโฟลเดอร์ทรัพยากร values-v17

การเปลี่ยนแปลงถูกนำเสนอผ่าน android.widget.CompoundButton.getCompoundPaddingLeft ();

ใช่คุณสามารถเพิ่มช่องว่างภายในได้โดยการเพิ่มช่องว่างภายใน

android:padding=5dp

หากคุณต้องการการออกแบบที่ไม่มีรหัสให้ใช้:

<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นอกจากนี้ความโปร่งใสยังช่วยให้คุณสามารถใช้เทคนิคนี้กับสีพื้นหลังใด ๆ โดยไม่มีผลข้างเคียงเช่นสีไม่ตรงกัน

API 17 ขึ้นไปคุณสามารถใช้:

หุ่นยนต์: paddingStart = "24dp"

API 16 และต่ำกว่าคุณสามารถใช้:

หุ่นยนต์: paddingLeft = "24dp"

ในกรณีของฉันฉันแก้ไขปัญหานี้โดยใช้คุณสมบัติ CheckBox ต่อไปนี้ใน XML:

* * * *

หุ่นยนต์: paddingLeft = "@ dimen / activity_horizontal_margin"

* * * *

วิธีง่ายๆเพิ่มบรรทัดนี้ในคุณสมบัติกล่องกาเครื่องหมายแทนที่10dpด้วยค่าระยะห่างที่คุณต้องการ

android:paddingLeft="10dp"

ฉันไม่รู้จักพวก แต่ได้ทำการทดสอบ

<CheckBox android:paddingLeft="8mm" และย้ายข้อความไปทางขวาไม่ใช่การควบคุมทั้งหมด

มันเหมาะกับฉันดี

ทำไมไม่ขยายแอนดรอยด์เช็คบ็อกซ์ของ Android ให้ดีขึ้นแทน ด้วยวิธีนี้แทนที่จะต้องแก้ไขในรหัสทุกครั้งที่คุณใช้กล่องกาเครื่องหมายคุณสามารถใช้กล่องกาเครื่องหมายคงที่แทน

กล่องกาเครื่องหมายขยายแรก:

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 ของคุณแทนที่จะสร้างเช็กบ็อกซ์ปกติสร้างส่วนขยายของคุณ

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

ฉันเพิ่งสรุปเกี่ยวกับเรื่องนี้:

แทนที่ช่องทำเครื่องหมายและเพิ่มวิธีนี้ถ้าคุณมี 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) {
        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;
    }

}

ขอบคุณสำหรับคำตอบ :)

พฤติกรรมนี้มีการเปลี่ยนแปลงใน Jelly Bean เคล็ดลับ paddingLeft เพิ่มช่องว่างภายในเพิ่มเติมทำให้ข้อความดูขวาเกินไป มีใครสังเกตเห็นอีกไหม?

สำหรับช่องว่างระหว่างเครื่องหมายถูกกับการใช้ข้อความ:

android:paddingLeft="10dp"

แต่มันจะกลายเป็นมากกว่า 10dp เพราะเครื่องหมายถูกบรรจุรอบ (ประมาณ 5dp) หากคุณต้องการลบการแพ็ดดูที่วิธีการลบการแพ็ดเดิ้ลรอบกล่องกาเครื่องหมาย Android :

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

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

หากคุณมีตัวเลือกภาพที่กำหนดเองสำหรับช่องทำเครื่องหมายหรือ RadioButton คุณต้องตั้งค่าคุณสมบัติปุ่มและพื้นหลังเช่นนี้:

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

คุณสามารถควบคุมขนาดของช่องทำเครื่องหมายหรือช่องว่างภายในปุ่มด้วยคุณสมบัติพื้นหลัง

คุณเท่านั้นที่จะต้องมีหนึ่งพารามิเตอร์ในไฟล์ xml

android:paddingLeft="20dp"

การตั้งค่า 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" />

หากคุณกำลังสร้างปุ่มที่กำหนดเองเช่นดูการเปลี่ยนรูปแบบของช่องทำเครื่องหมายบทช่วยสอน

จากนั้นเพิ่มความกว้างของ btn_check_label_background.9.png โดยเพิ่มคอลัมน์พิกเซลโปร่งใสหนึ่งหรือสองคอลัมน์ที่กึ่งกลางภาพ ปล่อยเครื่องหมาย 9 แพทช์ตามที่เป็น

สิ่งที่ฉันได้จะมีTextViewและCheckBoxภายใน Layout(ญาติ) TextViewแสดงข้อความที่ผมต้องการให้ผู้ใช้เห็นและCheckBoxไม่ได้มีข้อความใด ๆ ด้วยวิธีนี้ฉันสามารถกำหนดตำแหน่ง / ระยะห่างจากที่CheckBoxใดก็ได้ที่ฉันต้องการ

ฉันมีปัญหาเดียวกันกับ Galaxy S3 mini (android 4.1.2) และฉันได้ทำช่องทำเครื่องหมายที่กำหนดเองของฉันขยายAppCompatCheckBox แทน CheckBox ตอนนี้มันทำงานได้อย่างสมบูรณ์

คุณต้องมีขนาดของภาพที่คุณใช้เพื่อเพิ่มการเพิ่มขนาดนี้ ใน internals Android พวกเขาจะได้รับ drawable ที่คุณระบุใน src และใช้ขนาดของมันในภายหลัง เนื่องจากเป็นตัวแปรส่วนตัวและไม่มีผู้ให้บริการคุณจึงไม่สามารถเข้าถึงได้ นอกจากนี้คุณไม่สามารถรับ 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;
    }
}

ในขณะที่คุณอาจใช้ตัวเลือก drawable สำหรับandroid:buttonคุณสมบัติของคุณคุณต้องเพิ่ม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>

หลังจากนั้นคุณต้องระบุandroid:paddingLeftแอตทริบิวต์ในช่องทำเครื่องหมาย xml ของคุณ

จุดด้อย:

ในเครื่องมือแก้ไขเลย์เอาต์คุณจะเห็นข้อความที่อยู่ใต้ช่องทำเครื่องหมายด้วย api 16 และด้านล่างในกรณีนี้คุณสามารถแก้ไขได้โดยสร้างคลาสของช่องทำเครื่องหมายที่คุณกำหนดเองตามที่แนะนำแต่สำหรับ api ระดับ 16

เหตุผล:

เป็นบั๊กเนื่องจากการStateListDrawable#getIntrinsicWidth()โทรถูกใช้ภายในCompoundButtonแต่อาจส่งคืน< 0ค่าหากไม่มีสถานะปัจจุบันและไม่มีการใช้ขนาดคงที่

ทั้งหมดที่คุณต้องทำเพื่อเอาชนะปัญหานี้คือการเพิ่มandroid:singleLine="true"ไปcheckBoxในรูปแบบ XML ของคุณหุ่นยนต์:

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

และไม่มีอะไรพิเศษจะถูกเพิ่มโดยทางโปรแกรม

ภาพเช็คบ็อกซ์ซ้อนทับกันเมื่อฉันใช้ 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

ฉันจบลงด้วยปัญหานี้ด้วยการเปลี่ยนภาพ เพิ่งเพิ่มพื้นหลังโปร่งใสพิเศษในไฟล์ png โซลูชันนี้ใช้งานได้ดีเยี่ยมกับ API ทั้งหมด

อาจจะช้า แต่ฉันได้สร้างวิธีการอรรถประโยชน์เพื่อจัดการปัญหานี้

เพียงเพิ่มวิธีการนี้ในอุปกรณ์ของคุณ:

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

แทนที่จะปรับข้อความสำหรับช่องทำเครื่องหมายฉันได้ทำสิ่งต่อไปนี้และมันทำงานกับฉันสำหรับอุปกรณ์ทั้งหมด 1) ใน XML เพิ่มช่องทำเครื่องหมายและมุมมองข้อความที่อยู่ติดกับคนอื่น; รักษาระยะห่าง 2) ตั้งค่าขนาดช่องข้อความเป็น 0sp 3) เพิ่มข้อความที่เกี่ยวข้องกับมุมมองข้อความนั้นถัดจากช่องทำเครื่องหมาย

<CheckBox android:drawablePadding="16dip" - ช่องว่างระหว่าง drawable และข้อความ