Android - Jarak antara Kotak centang dan teks

Apakah ada cara mudah untuk menambahkan padding di antara kotak centang di kontrol kotak centang, dan teks yang terkait?

Saya tidak bisa hanya menambahkan spasi, karena label saya multi-baris.

Seperti apa adanya, teks terlalu dekat dengan kotak centang:

Saya benci menjawab pertanyaan saya sendiri, tetapi dalam hal ini saya pikir saya perlu. Setelah memeriksanya, @ Falmarri berada di jalur yang benar dengan jawabannya. Masalahnya adalah bahwa kontrol kotak centang Android sudah menggunakan properti android: paddingLeft untuk mendapatkan teks di mana itu.

Garis merah menunjukkan nilai offset paddingLeft dari seluruh kotak centang

Jika saya hanya mengganti bantalan itu di tata letak XML saya, itu mengacaukan tata letak. Inilah yang dilakukan pengaturan paddingLeft = "0":

Ternyata Anda tidak dapat memperbaikinya dalam XML. Anda sudah melakukannya dalam kode. Ini cuplikan saya dengan peningkatan padding hardcoded sebesar 10dp.

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

Ini memberi Anda yang berikut, di mana garis hijau adalah peningkatan padding. Ini lebih aman daripada nilai hardcoding, karena perangkat yang berbeda dapat menggunakan drawables yang berbeda untuk kotak centang.

UPDATE - Seperti orang baru-baru ini disebutkan dalam jawaban di bawah, perilaku ini tampaknya telah berubah di Jelly Bean (4.2). Aplikasi Anda perlu memeriksa versi mana yang sedang berjalan, dan menggunakan metode yang sesuai.

Untuk 4.3+ itu hanya mengatur padding_left. Lihat jawaban htafoya untuk detailnya.

Diberikan tanggapan @DougW, apa yang saya lakukan untuk mengelola versi lebih sederhana, saya tambahkan ke tampilan kotak centang saya:

android:paddingLeft="@dimen/padding_checkbox"

tempat dimen ditemukan dalam dua folder nilai:

nilai-nilai

<resources>

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

</resources>

values-v17 (4.2 JellyBean)

<resources>

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

</resources>

Saya punya pemeriksaan khusus, gunakan dps untuk pilihan terbaik Anda.

Gunakan atribut android:drawableLeftalih-alih android:button. Untuk mengatur padding antara drawable dan text use android:drawablePadding. Untuk memposisikan penggunaan yang dapat ditarik 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) menempatkan teks paddingLeft dari buttonDrawable (ints right edge). Ini juga berfungsi untuk mode RTL.

Sebelum 4.2 paddingLeft mengabaikan buttonDrawable - itu diambil dari tepi kiri tampilan CompoundButton.

Anda dapat menyelesaikannya melalui XML - atur paddingLeft ke buttonDrawable.width + requiredSpace pada android yang lebih lama. Setel ke diperlukanSpace hanya pada API 17 ke atas. Misalnya menggunakan sumber daya dimensi dan menimpa dalam folder sumber daya nilai-v17.

Perubahan itu diperkenalkan melalui android.widget.CompoundButton.getCompoundPaddingLeft ();

Ya, Anda dapat menambahkan padding dengan menambahkan padding.

android:padding=5dp

Jika Anda ingin desain yang bersih tanpa kode, gunakan:

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

Triknya adalah mengatur warna menjadi transparan untuk android:drawableLeftdan memberikan nilai android:drawablePadding. Selain itu, transparansi memungkinkan Anda untuk menggunakan teknik ini pada warna latar belakang apa pun tanpa efek samping - seperti ketidakcocokan warna.

API 17 dan di atasnya, Anda dapat menggunakan:

android: paddingStart = "24dp"

API 16 dan di bawah, Anda dapat menggunakan:

android: paddingLeft = "24dp"

Dalam kasus saya, saya memecahkan masalah ini menggunakan atribut CheckBox berikut ini di XML:

*

android: paddingLeft = "@ dimen / activity_horizontal_margin"

*

Solusi sederhana, tambahkan baris ini di properti CheckBox , ganti 10dp dengan nilai spasi yang Anda inginkan

android:paddingLeft="10dp"

Saya tidak kenal teman-teman, tapi saya diuji

<CheckBox android:paddingLeft="8mm" dan hanya memindahkan teks ke kanan, bukan seluruh kontrol.

Ini cocok untuk saya.

Mengapa tidak memperpanjang Kotak Centang Android agar memiliki lapisan yang lebih baik sebagai gantinya. Dengan begitu alih-alih harus memperbaikinya dalam kode setiap kali Anda menggunakan Kotak Centang, Anda hanya dapat menggunakan Kotak Centang yang diperbaiki.

Kotak Perluas Pertama:

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

Kedua di xml Anda alih-alih membuat Kotak Centang normal, buatlah kotak yang diperluas

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

Saya baru saja menyimpulkan ini:

Ganti Kotak centang dan tambahkan metode ini jika Anda memiliki drawable yang dapat disesuaikan:

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

}

atau ini jika Anda menggunakan sistem 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;
    }

}

Terima kasih atas jawabannya :)

Perilaku ini tampaknya telah berubah dalam Jelly Bean. Trik paddingLeft menambahkan padding tambahan, membuat teks terlihat terlalu jauh ke kanan. Adakah yang memperhatikan itu?

Untuk ruang antara tanda centang dan penggunaan teks:

android:paddingLeft="10dp"

Tetapi menjadi lebih dari 10dp, karena tanda centang berisi padding (sekitar 5dp) di sekitar. Jika Anda ingin menghapus bantalan, lihat Cara menghapus bantalan di Android Kotak Centang :

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

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

Jika Anda memiliki pemilih gambar khusus untuk kotak centang atau radiobutton, Anda harus mengatur properti tombol dan latar belakang yang sama seperti ini:

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

Anda dapat mengontrol ukuran kotak centang atau bantalan tombol radio dengan properti latar belakang.

hanya Anda yang perlu memiliki satu parameter dalam file xml

android:paddingLeft="20dp"

Mengatur minHeight dan minWidth menjadi 0dpsolusi terbersih dan terarah bagi saya di 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" />

Jika Anda membuat tombol khusus, mis. Lihat perubahan tampilan tutorial kotak centang

Kemudian cukup tambahkan lebar btn_check_label_background.9.png dengan menambahkan satu atau dua kolom piksel transparan di bagian tengah gambar; biarkan penanda 9-patch seperti apa adanya.

Apa yang saya lakukan, adalah memiliki TextViewdan CheckBoxdi dalam (Relatif) Layout. The TextViewmenampilkan teks yang saya ingin pengguna untuk melihat, danCheckBox tidak memiliki teks. Dengan begitu, saya bisa mengatur posisi / padding dari CheckBoxmana pun saya mau.

Saya memiliki masalah yang sama dengan mini Galaxy S3 (android 4.1.2) dan saya hanya membuat kotak centang ubahsuaian saya memperpanjang AppCompatCheckBox bukannya CheckBox. Sekarang ini berfungsi dengan baik.

Anda perlu mendapatkan ukuran gambar yang Anda gunakan untuk menambahkan padding Anda ke ukuran ini. Di Android internal, mereka mendapatkan drawable yang Anda tentukan di src dan gunakan ukurannya setelahnya. Karena ini adalah variabel pribadi dan tidak ada getter yang tidak dapat Anda akses. Anda juga tidak bisa mendapatkan com.android.internal.R.styleable.CompoundButton dan dapatkan gambarnya dari sana.

Jadi, Anda perlu membuat style Anda sendiri (yaitu custom_src) atau Anda dapat menambahkannya langsung dalam implementasi RadioButton Anda:

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

Karena Anda mungkin menggunakan pemilih yang dapat ditarik untuk android:buttonproperti Anda, Anda perlu menambahkan android:constantSize="true"dan / atau menentukan drawable default seperti ini:

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

Setelah itu Anda perlu menentukan android:paddingLeft atribut di kotak centang xml Anda.

Cons:

Di editor tata letak Anda akan teks masuk di bawah kotak centang dengan api 16 dan di bawah, dalam hal ini Anda dapat memperbaikinya dengan membuat Anda kelas kotak centang kustom seperti yang disarankan tetapi untuk api level 16.

Alasan:

itu adalah bug karena StateListDrawable#getIntrinsicWidth()panggilan digunakan secara internal, CompoundButtontetapi dapat mengembalikan < 0nilai jika tidak ada kondisi saat ini dan tidak ada ukuran konstan yang digunakan.

Semua harus Anda lakukan untuk mengatasi masalah ini adalah dengan menambahkan android:singleLine="true"ke checkBoxdalam tata letak xml android Anda:

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

dan tidak ada yang istimewa yang akan ditambahkan secara pemrograman.

Gambar kotak centang tumpang tindih ketika saya menggunakan drawables saya sendiri dari pemilih, saya telah menyelesaikan ini menggunakan kode di bawah ini:

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

Terima kasih untuk Alex Semeniuk

Saya berakhir dengan masalah ini dengan mengubah gambar. Baru saja menambahkan latar belakang ekstra transparan dalam file png. Solusi ini berfungsi sangat baik di semua API.

Mungkin sudah terlambat, tetapi saya telah membuat metode utilitas untuk mengelola masalah ini.

Cukup tambahkan metode ini ke utilitas Anda:

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

Dan gunakan seperti ini:

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

atau seperti ini:

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

Alih-alih menyesuaikan teks untuk Kotak Centang, saya telah melakukan hal berikut dan itu bekerja untuk saya untuk semua perangkat. 1) Dalam XML, tambahkan kotak centang dan tampilan teks yang berdekatan satu demi satu; menjaga jarak. 2) Atur ukuran teks kotak centang ke 0sp. 3) Tambahkan teks relatif ke tampilan teks di sebelah kotak centang.

<CheckBox android:drawablePadding="16dip" - Padding antara drawables dan teks.