web-dev-qa-db-ja.com

Android-CheckBoxとテキストの間隔

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

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

現状では、テキストはチェックボックスに近すぎます： alt text

androidcheckboxpadding
238
DougW

私は自分の質問に答えるのは嫌いですが、この場合、私はする必要があると思います。それをチェックした後、@ 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());

これにより、以下が得られます。緑の線はパディングの増加です。デバイスによってチェックボックスに異なるドロウアブルが使用される可能性があるため、これは値をハードコーディングするよりも安全です。

alt text

更新-最近の回答で人々が言及したように、この動作はJelly Bean（4.2）で明らかに変更されました。アプリは、実行中のバージョンを確認し、適切な方法を使用する必要があります。

4.3以降では、単にpadding_leftを設定しています。詳細については、htafoyaの回答を参照してください。

322
DougW

@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を使用してください。

125
htafoya

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

70
Roman Trokhymets

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

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

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

変更はAndroid.widget.CompoundButton.getCompoundPaddingLeft（）;を介して導入されました。

34
kotucz

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

Android:padding=5dp

26
Falmarri

コードのないクリーンなデザインが必要な場合は、次を使用します。

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

19
ChuongPham

API 17以降では、次を使用できます。

Android：paddingStart = "24dp"

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

Android：paddingLeft = "24dp"

15
guepardomar

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

*

Android：paddingLeft = "@ dimen/activity_horizo​​ntal_margin"

*

14
Mohammad Zakaria

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

Android:paddingLeft="10dp"
12
Naveed Ahmad

代わりにAndroid CheckBoxを拡張してパディングを改善しないのはなぜですか。この方法では、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));
    }
}

通常のCheckBoxを作成する代わりにxmlで2番目に拡張チェックボックスを作成します

<com.whatever.CheckBoxWithPaddingFix
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="Hello there" />
10
w.donahue

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

<CheckBox Android:paddingLeft="8mm"を使用して、コントロール全体ではなく、テキストを右にのみ移動します。

大丈夫です。

9
Tiago

私はこれについて結論を出しました：

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

}

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

6
PaNaVTEC

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

4
extreme
<CheckBox
        Android:paddingRight="12dip" />
2
AndrewKS

チェックボックスまたはラジオボタンのカスタム画像セレクターがある場合、次のような同じボタンと背景プロパティを設定する必要があります。

            <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プロパティを使用して、チェックボックスまたはラジオボタンのパディングのサイズを制御できます。

2
Ilya Lisway

あなただけがXMLファイルに1つのパラメータを持つ必要があります

Android:paddingLeft="20dp"
2
tej shah

Galaxy S3 mini（Android 4.1.2）でも同じ問題が発生し、CheckBoxの代わりにカスタムチェックボックスを AppCompatCheckBox に拡張しました。今では完全に動作します。

1
Quentin G.

カスタムボタンを作成している場合、たとえば チェックボックスチュートリアルの外観を変更する を参照してください

次に、画像の中央に1つまたは2つの透明ピクセルの列を追加して、btn_check_label_background.9.pngの幅を単純に増やします。 9パッチマーカーはそのままにしておきます。

1
Keith Beardmore

私がやったことは、（相対）TextViewの中にCheckBoxとLayoutを持っていることです。 TextViewには、ユーザーに表示するテキストが表示され、CheckBoxにはテキストがありません。そうすれば、CheckBoxの位置/パディングをどこにでも設定できます。

1
mbmc

遅すぎるかもしれませんが、この問題を管理するユーティリティメソッドを作成しました。

このメソッドを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);
0
Oleksandr

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

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
Jaiprakash Soni

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>

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

短所：

レイアウトエディターでは、API 16以下のチェックボックスの下にテキストが表示されます。その場合、 suggested のようなカスタムチェックボックスクラスを作成することで修正できますが、APIレベル16用です。

理由：

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

0
Gianluca P.

このサイズにパディングを追加するには、使用している画像のサイズを取得する必要があります。 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
hudomju

この問題を解決するには、Android xmlレイアウトのcheckBoxにAndroid:singleLine="true"を追加するだけです。

<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
Muhammed Refaat

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

0
Leo Droidcoder