Android-CheckBoxとテキストの間隔


256

CheckBoxコントロールのチェックボックスと関連するテキストの間にパディングを追加する簡単な方法はありますか?

ラベルが複数行なので、先頭にスペースを追加することはできません。

現状のまま、テキストはチェックボックスに近すぎます。 代替テキスト


1
簡単な解決策は、TextViewwith drawableLeftおよびuse drawablePaddingを使用してテキストにスペースを与えることです。コードでは、選択状態と非選択状態を切り替えるだけです。
Muhammad Babar 2014年

ドローアブルとテキストの間隔を設定するはずのand​​roid:drawablePaddingという新しいxml属性に気づきました。私は試しませんでしたが、この問題に対するグーグルの「事後の」修正だと思います。
Peri Hartman

回答:


333

自分の質問には答えたくありませんが、この場合は答える必要があると思います。それをチェックした後、@ Falmarriは彼の答えで正しい軌道に乗っていました。問題は、AndroidのCheckBoxコントロールがすでにandroid:paddingLeftプロパティを使用してテキストを取得することです。

赤い線は、CheckBox全体のpaddingLeftオフセット値を示しています

代替テキスト

XMLレイアウトでそのパディングをオーバーライドするだけでは、レイアウトが台無しになります。以下はpaddingLeft = "0"の設定でできることです。

代替テキスト

XMLではこれを修正できないことがわかりました。あなたはコードでそれをしなければなりません。これは、ハードコードされたパディングが10 dp増加したスニペットです。

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の回答を参照してください。


108
自分の質問への回答に問題はありません。おそらく他の誰かがこの問題を抱えている可能性があり、あなたは良い総合的な回答をしました。
AndrewKS

4
ただ設定することの何が問題になっていますpaddingLeft="48sp"か?スケールと方向を変更しても、ここでは問題なく機能します。あなたのコードは私にアイテムのリストに不規則なパディング値を与えました。
harpo

5
@harpo-別のデバイスメーカーがチェックボックスに別のグラフィックを使用しないという保証はありません。つまり、ハードコードされたパディングが別のデバイスの視覚的なレイアウトを壊す可能性があります。私は現在のパディングを読んでそれに追加しているので問題はありませんが、一度だけ実行することを確認する必要があります。
DougW 2011年

2
@Blundell-必ずしもそうではありません。Androidのオープンソース。デバイスベンダーは、まったく異なるグラフィックを、まったく異なるサイズに置き換えることができます。彼らはなぜかそのようなことをするのが好きです。
DougW、

2
残念ながら、getView()パディングが際限なく増加するため、このソリューションをカスタムアダプターで使用することはできません(ビューをリサイクルする場合)。この問題を解決するには、次のようなものを使用する必要がありましたboolean isHackNeeded = Build.VERSION.SDK_INT < 17; float scale = context.getResources().getDisplayMetrics().density; if (isHackNeeded) {CheckBox rb = new CheckBox(context); this.PADDING = rb.getPaddingLeft() + Math.round(10.0f * scale); } else { this.PADDING = Math.round(10.0f * scale); }。そして使用しPADDING、すべてのチェックボックスIのインフレートのために:check.setPadding(PADDING, check.getPaddingTop() ...
アレックスSemeniuk

133

@DougWの応答を考えると、バージョンを管理するために行うことはより簡単なので、チェックボックスビューに追加します。

android:paddingLeft="@dimen/padding_checkbox"

dimenは2つの値のフォルダーにあります。

<resources>

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

</resources>

values-v17(4.2 JellyBean)

<resources>

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

</resources>

私はカスタムチェックを持っています、あなたの最良の選択にdpsを使用してください。


2
これが今のところ最良の答えです。ただし、values-v17修正はAPI 17で導入されたものであるはずです(上記のいくつかの投稿による)
icecreamman '22

古いAPI(値/ディメンション)の場合は完璧な答えです。padding_checkboxを0dip(API 10のマージンは既に巨大です)に設定し、htafoyaが示唆するようにvalues-v17 10dipを設定します。
Yar

70

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

結果


1
こんにちは、これはいい方法ですが、チェックボックスのデフォルト画像の左マージンbcozが追加されることに注意してください。そのためのソリューション
Code_Life

4
セットandroid:background="@android:color/transparent"と左マージンは消えます
マデューズ

2
上記のコードは私のラジオボタンに対して完全に機能し、4.2 OSの境界全体で一貫しています。ありがとう!
gnichola 2013

1
これははるかに高くランク付けされます。@gnicholaが言ったように、これはAndroidバージョン全体で機能し、非常にクリーンなソリューションです。スタイルを作成して、次のようにテーマに割り当てます。 <item name="android:checkboxStyle">@style/CheckBox</item> これにより、スタイルが1回定義され、1回だけ参照されます。
Rosomack 14

1
また、背景をnull(またはカスタム)に設定します。それ以外の場合、lollipop +はビュー全体を囲む大きな円の波紋効果を取得します。あなたは、<リップル>タグで、より適切なリップルバックを置くためにはを利用V21ボタンの描画可能に使用することができます。
トム・

34

Android 4.2 Jelly Bean(API 17)は、buttonDrawable(intの右端)からテキストpaddingLeftを配置します。RTLモードでも機能します。

4.2以前は、paddingLeftはbuttonDrawableを無視していました-これは、CompoundButtonビューの左端から取得されました。

XMLを介してそれを解決できます-古いandroidのpaddingLeftをbuttonDrawable.width + requiredSpaceに設定します。API 17以降でのみrequiredSpaceに設定します。たとえば、ディメンションリソースを使用し、values-v17リソースフォルダーでオーバーライドします。

この変更は、android.widget.CompoundButton.getCompoundPaddingLeft();によって導入されました。


4
これが唯一の正しい答えです。問題を特定し、簡単な解決策を提供します。これは複数の商用アプリでうまく使用できました。
madej 2014年

1
XMLでbuttonDrawable.widthを取得するにはどうすればよいですか?それをハードコーディングしますか?
Jared Kells 2014年

1
古いコードのを削除して、この問題をなんとか修正しましたandroid:background="@android:color/transparent"
Sebek 2014年

受け入れられた答えは素晴らしく機能していますが、これはシンプルで効果的です。これは受け入れられるべき答えです。
Reaz Murshed 2015

27

はい、パディングを追加することでパディングを追加できます。

android:padding=5dp


4
これは実際に動作します...一種の。1つは、すべてのパディングではなく、paddingLeftのみが必要です。ただし、paddingLeftはすでに約40 dpの値に設定されているようです。> 40dpに設定すると移動し、<40dpに設定するとチェックボックスの下に移動します。私はこれに懸念があるので、これを正しいものとしてマークし、別の質問を開きます。
DougW 2010年

さて、私はあなたのレイアウトを見てみなければわかりません。
Falmarri、

はい、動作しません。特にsamsungデバイスで問題が発生しました。
Ranjith Kumar

1
パディングを追加してパディングを追加することは合法なことです!
セルミリオン2018

21

コードのないすっきりとしたデザインが必要な場合は、次を使用します。

<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。また、透明度を使用すると、色の不一致などの副作用なしに、この手法を背景色に使用できます。


16

API 17以上では、以下を使用できます。

android:paddingStart = "24dp"

API 16以下では、以下を使用できます。

android:paddingLeft = "24dp"


1
とても良い答えです。パディングがチェックボックスとテキストの間にどのようにスペースを与えるか想像できません。通常、Padding Leftは、コンポーネントの左側を意味します。
Mohamed Ibrahim 2016

14

私の場合、XMLで次のCheckBox属性を使用してこの問題を解決しました。

*

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

*


とても良い答えです。パディングがチェックボックスとテキストの間にどのようにスペースを与えるか想像できません。通常、Padding Leftは、コンポーネントの左側を意味します。
Mohamed Ibrahim 2016

13

簡単な解決策、この行をCheckBoxプロパティに追加し、10dpを目的の間隔の値に置き換えます

android:paddingLeft="10dp"

10

私は人を知りませんが、私はテストしました

<CheckBox android:paddingLeft="8mm" コントロール全体ではなく、テキストを右に移動するだけです。

それは私にぴったりです。


1
私は最近これを試していませんので、これが特定のデバイスまたはより新しいAndroid OSバージョンで動作することは確かに可能です。ただし、私がこの質問をしたとき、これは間違いなく機能しなかったので、さまざまなセットアップでテストすることを強くお勧めします。
DougW 2011

これは2.3.3と4.2の間で異なる動作をするように見えます(変更がどこで発生したかはわかりません)。
2013

mmではなくdpを意味しますか?
Chrispix 2014年

10

代わりに、Android 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の2番目に、拡張チェックボックスを作成します

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

2
OS> 4.2の場合に回避するために「if」を追加する必要があります。これは、Jelly Beanでは「修正」されているためです。
Martin Marconcini、2013年

1
実際には4.2以上(17)。
Aleks N. 2014

6

私はこれについて結論付けました:

カスタムドローアブルがある場合は、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;
    }

}

答えてくれてありがとう:)


4

この動作はJelly Beanで変更されたようです。paddingLeftトリックは、追加のパディングを追加して、テキストが遠くに見えるようにします。他の誰かがそれに気づきますか?


更新していただきありがとうございます!これについての回答にメモを追加しました。
DougW 2013年

4

チェックマークとテキストの間のスペースには、次を使用します。

android:paddingLeft="10dp"

ただし、チェックマークの周囲にパディング(約5 dp)が含まれているため、10 dp以上になります。パディングを削除する場合は、Android CheckBoxの周囲のパディングを削除する方法をご覧ください。

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

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

@AndrewKS-テスト済み。予想どおり、これにより、チェックボックスとテキストの間ではなく、コントロール全体にパディングが追加されます。
DougW 2010年

おそらく、テキストを別のTextViewに置く方がよいでしょう。
AndrewKS 2010年

@AndrewKS-使いやすさに関して悪い考え。ユーザーがテキストをタップしてチェックボックスを選択/選択解除できるようにしたい。また、Webページで行う場合と同じように、多くのアクセシビリティ機能が無効になります。
DougW 2010年

Bad idea for usabilityいいえ、ちがいます。チェックボックスとテキストビューの両方を線形レイアウトに配置し、その線形レイアウトをタッチ可能にします。
Falmarri、

1
-1この回答は、画像とテキストの間のギャップに関する質問で提起された問題に対処していません
David Laing

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プロパティで制御できます。


いいえ、これを行う必要はありません。チェックボックス/ラジオボタンのグリフとは異なるカスタムの背景がある場合、これは受け入れられません。
2013年

2

xmlファイルに必要なパラメーターは1つだけです

android:paddingLeft="20dp"

2

0dpAndroid 9 API 28 では、minHeightとminWidthをに設定することが、最もクリーンで直接的なソリューションでした。

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


1

私がやったことは、a TextViewとa CheckBoxを(相対)内に持つことLayoutです。TextView私は、ユーザーが見たいというテキストを表示し、CheckBox任意のテキストを持っていません。そのようにして、私はCheckBox好きな場所の位置/パディングを設定できます。



0

このサイズにパディングを追加するには、使用している画像のサイズを取得する必要があります。Android内部では、srcで指定したドローアブルを取得し、後でそのサイズを使用します。これはプライベート変数であり、アクセスできないゲッターがないためです。また、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;
    }
}

0

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>

その後android:paddingLeft、チェックボックスxmlで属性を指定する必要があります。

短所:

レイアウトエディターでは、api 16以下のチェックボックスの下にテキストが表示されます。その場合推奨のように、しかしapiレベル16のカスタムチェックボックスクラスを作成して修正できます。

根拠:

StateListDrawable#getIntrinsicWidth()呼び出しは内部で使用されるため、これはバグですが、現在の状態がなく、一定のサイズが使用されていない場合は、値をCompoundButton返すことがあり< 0ます。


0

この問題を克服するためにあなたがしなければならないすべてはあなたのandroid xmlレイアウトに追加するandroid:singleLine="true"こと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"/>

特別なものはプログラムで追加されません。


0

セレクターから独自のドローアブルを使用すると、チェックボックスの画像が重なっていたので、以下のコードを使用してこれを解決しました:

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に感謝


0

画像を変更することで、この問題が発生します。pngファイルに余分な透明な背景を追加しました。このソリューションは、すべてのAPIで優れた働きをします。


0

多分それは遅いですが、私はこの問題を管理するためのユーティリティメソッドを作成しました。

このメソッドをユーティリティに追加するだけです:

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

チェックボックスのテキストを調整する代わりに、私は次のことを行い、すべてのデバイスでうまくいきました。1)XMLでは、チェックボックスとテキストビューを隣接するものに次々に追加します。ある程度の距離を保ちます。2)チェックボックスのテキストサイズを0spに設定します。3)チェックボックスの横のテキストビューに相対テキストを追加します。


-3

<CheckBox android:drawablePadding="16dip" -ドローアブルとテキストの間のパディング。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.