AndroidでRadioButtonとそのラベルの間にマージンを追加しますか?


88

Androidの組み込みコンポーネントを使用しながら、RadioButtonとラベルの間に少しスペースを追加することは可能ですか?デフォルトでは、テキストは少し縮んで見えます。

<RadioButton android:id="@+id/rb1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="My Text"/>

私はいくつかのことを試しました:

  1. マージンとパディングを指定すると、要素全体(ボタンとテキストを合わせて)の周囲にスペースが追加されるようです。それは理にかなっていますが、私が必要なことをしません。

  2. チェック状態と非チェック状態の画像を指定するXMLを介してカスタムドローアブルを作成し、各画像の右側にいくつかのピクセルを追加します。これは機能するはずですが、現在はデフォルトのUIの外に出ています。(世界の終わりではありませんが、理想的ではありません)

  3. 各ラベルの先頭に空白を追加します。Androidは、「My String」のように先頭のスペース文字をトリミングしているように見えますが、「\ u00A0MyString」のようにUnicodeU + 00A0を指定するとうまくいきます。これは機能しますが、ちょっと汚れているようです。

より良い解決策はありますか?

回答:


120

これを今読んでいる人にとって、受け入れられた答えは、新しいAPIでいくつかのレイアウトの問題を引き起こし、パディングが多すぎます。

API <= 16paddingLeftでは、ラジオボタンを設定して、ラジオボタンのビュー境界を基準にしてパディングを設定できます。さらに、パッチ9の背景も、ビューに対するビューの境界を変更します。

API> = 17では、paddingLeft(またはpaddingStart)はラジオボタンの描画可能に関連しています。同じことがパッチナインについても当てはまります。パディングの違いをわかりやすく説明するには、添付のスクリーンショットを参照してください。

コードを掘り下げると、API17にgetHorizo​​ntalOffsetForDrawablesという新しいメソッドが見つかります。このメソッドは、ラジオボタンの左側のパディングを計算するときに呼び出されます(したがって、図に示されている追加のスペース)。

TL; DRだけの使用paddingLeftであれば、あなたminSdkVersionは> = 17.あなたがAPIをサポートする場合は<= 16、あなたがサポートしている分のSDKとAPIのための別のスタイル17+のためのラジオボタンのスタイルを持っている必要があります。

APIバージョン間の左パディングの違いを示すスクリーンショットを組み合わせる


2
API 17はandroid.os.Build.VERSION_CODES.JELLY_BEAN_MR1ある
KarenAnne

11
これを行う最良の方法は、「values-v17」ディレクトリを使用することです。API 17+ディメンションをリソースxmlに配置し、16以下の標準ディメンションを単なる「値」に配置します。
akent 2014

15
Googleの開発者/管理者が私たちの通常の開発者をどのように扱っているかは驚くべきことです。彼らはいつでも好きなときに好きなことをします。一貫性と完全性は彼らにとって何の意味もありません。
ヤー

66

これで問題が解決するかどうかはわかりませんが、50dip以上の値でラジオボタンの「左パディング」プロパティを試しましたか?


2
これは機能し、デフォルトのドローアブルの幅をカバーするには50dipが必要です。最初は20dipを使用しましたが、テキストが左に移動しました。これは、アンカーポイントがドローアブルの右端ではないためです。ドローアブルの左端です。
ロバートクレイプール2011

58

私はいくつかの方法を試し、エミュレーターとデバイスの両方でこれが正しく機能するようにしました。

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />
  • android:backgroundは、api10にあるように透明である必要があります。固有のパディングがある背景があります(他のAPIでは試していませんが、ソリューションは他のAPIでも機能します)
  • パディングが正しく機能しないため、android:buttonnullである必要があります。
  • android:buttonの代わりにandroid:drawableLeftを指定する必要があります
  • android:drawablePaddingは、ドローアブルとテキストの間にあるスペースです

4
ベストアンサー!android:background = "@ null"を設定することもでき、パディングなしで指定したとおりに表示されます。
saiyancoder 2014年

2
android:button = "@ null"を設定しているときに、ラジオボタンがチェック(クリック)されません。私は何か間違ったことをしています。stackoverflow.com/questions/28052820/…
Shirish Herwade 2015年

@Shirishこのソリューションは、ボタンがクリックされないこととは何の関係もありません。実装したところクリックしました。
ヤー2015年

解決してくれてありがとう!
Vimalathithan Rajasekaran 2016

32

paddingLeftを使用してラジオボタンとそのラベルの間にマージンを追加します

android:paddingLeft="10dip"

カスタムパディングを設定するだけです。

RadioButtonのxmlプロパティ。

<RadioButton
    android:id="@+id/radHighest"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/YourImageResource"
    android:drawablePadding="50dp"
    android:paddingLeft="10dip"
    android:text="@string/txt_my_text"
    android:textSize="12sp" />

完了


22

次のXML属性を使用します。それは私のために働いた

API <= 16の場合

android:paddingLeft="16dp"

API> = 17の場合

android:paddingStart="@16dp"

例えば:

<android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/popularityRadioButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"
        android:paddingEnd="@dimen/radio_button_text"
        android:paddingLeft="@dimen/radio_button_text"
        android:paddingRight="@dimen/radio_button_text"
        android:paddingStart="@dimen/radio_button_text"
        android:text="Popularity"
        android:textSize="@dimen/sort_dialog_text_size"
        android:theme="@style/AppTheme.RadioButton" />

ここに画像の説明を入力してください

さらに:drawablePadding属性が機能しません。ラジオボタンにドローアブルを追加した場合にのみ機能します。例:

<RadioButton
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:button="@null"
    android:drawableEnd="@android:drawable/btn_radio"
    android:drawablePadding="56dp"
    android:drawableRight="@android:drawable/btn_radio"
    android:text="New RadioButton" />

6

今すぐこれを試して確認することはできませんが、属性android:drawablePaddingが必要なことを実行するかどうかを確認しようとしましたか?


1
うーん。試してみましたが、この状況では効果がないようです。提案をありがとう、それは確かに説明から正しく聞こえます:「ドローアブルとテキストの間のパディング」。
allclaws 2010年

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

    checkBox.getPaddingTop(),
    checkBox.getPaddingRight(),
    checkBox.getPaddingBottom());

1

ドローアブルとテキストの間のパディング。これは、xmlファイルに以下の行を追加することで実現されます。 android:drawablePadding="@dimen/10dp"


私はこれを正確に探していました...私を大いに助けました
Shirish Herwade 2017年

2
@dimen/10dp悪い習慣
Vlad 2017

0

私は試しましたが、「android:paddingLeft」は機能します。paddingLeftは、ラジオ画像を元の位置に保ちながら、テキストにのみ影響を与えます。


-1

「android:paddingLeft」は、android4.2.2でのみ正しく機能するようです。

私はAndroidのほぼすべてのバージョンを試しましたが、4.2.2バージョンでのみ動作します。


-1

私はすべてのAPIバージョンで機能するはずだと思う異なるアプローチを使用しています。パディングを適用する代わりに、RadioButtonsの間に空のビューを追加しています。

<View
        android:layout_width="20dp"
        android:layout_height="1dp" />

これにより、20dpのパディングが得られます。


-1

私は答えを探してここに来ました、そして最も簡単な方法は(いくつかの考えの後)ラベル自体の始めにスペースを追加することでした

<RadioGroup
     android:orientation="horizontal"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignRight="@+id/btnChangeMode"
     android:layout_marginTop="10dp"
     android:layout_marginBottom="10dp"
     android:layout_below="@+id/view3"
     android:gravity="center|left"
     android:id="@+id/ledRadioGroup">
<RadioButton
         android:button="@drawable/custom_radio_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text=" On"
         android:layout_marginRight="6dp"
         android:id="@+id/ledon"
         android:textColor="@color/white" />
<RadioButton
         android:button="@drawable/custom_radio_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text=" Off"
         android:layout_marginLeft="6dp"
         android:id="@+id/ledoff"
         android:textColor="@color/white" />

-1

私のために働く:

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true">
            <layer-list>
                <item android:right="5dp">
                    <shape android:paddingLeft="5dp" android:shape="oval">
                     <size android:width="20dp" android:height="20dp" />
                     <solid android:color="@color/blue" />
            </shape>
        </item>
    </layer-list>
</item>
<item android:paddingLeft="5dp" android:state_checked="false">
    <layer-list>
        <item android:right="5dp">
            <shape android:paddingLeft="5dp" android:shape="oval">
                <size android:width="20dp" android:height="20dp" />
                <solid android:color="@color/grey" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

-1
<RadioButton
                android:id="@+id/rb1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@null"
                android:paddingLeft="20dp"
                android:text="1"
                android:textColor="@color/text2"
                android:textSize="16sp"
                android:textStyle="bold" />

これが問題をどのように解決するかを説明するためにいくつかのコメントを追加することを検討してください;)
DeadlyJesus 2017年

-1

このコードはXMLファイルに含めることができます

<RadioButton
android:id="@+id/rButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="50dp"
android:paddingLeft="10dip"
android:text="@string/your_text" />

またはこれをActivityクラスで使用します

radioButton.setPadding(12, 10, 0, 10);

-1

このようなstyle.xmlでスタイルを作成します

<style name="Button.Radio">

    <item name="android:paddingLeft">@dimen/spacing_large</item>
    <item name="android:textSize">16sp</item>
</style>

そのスタイルをラジオボタンに入れます

 <RadioButton
                android:id="@+id/rb_guest_busy"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:text="@string/guest_is_waiting"
                android:textSize="@dimen/font_size_3x_medium"
                android:drawablePadding="@dimen/spacing_large"
                android:textColor="@color/color_text_heading_dark"
                style="@style/Button.Radio"/>

RadioButtonが間接的にボタンを継承するため、ボタンと同じ属性を変更できます。


-1

古い質問だとは思いますが、このソリューションでようやく安心し、APIレベルを忘れてしまいました。

左側の垂直RadioGroupと右側の垂直テキストビュー。

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">
        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RadioGroup>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="Radio 1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="Radio 2"/>
    </LinearLayout>
</LinearLayout>

@Mark Buikema、絶対にラベルではありませんが、ここではラベルのように機能します!クリックラベルが必要な場合は、クリックリスナーをTextViewに追加できます。私のポイントは、Android OSのすべてのバージョンにレイアウトを実装する必要があるということです。違うと思う。
スタンリー・コウ

-1

ラジオボタンの重力属性を使用してみることができます。

<RadioButton
                        android:id="@+id/rb_all"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:checked="true"
                        android:gravity="right|center_vertical"
                        android:padding="@dimen/padding_30dp"
                        android:text="@string/filter_inv_all"
                        android:textColor="@color/black"
                        android:textSize="@dimen/text_size_18" />

これにより、テキストが右端に揃えられます。画像の最初のラジオをチェックしてください。

ここに画像の説明を入力してください

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