web-dev-qa-db-ja.com

androidのラジオボタンの左側にテキストを配置する方法

ラジオボタンのテキストを右側ではなく左側に配置したい

私はこの解決策を見つけました

        <RadioGroup
        Android:id="@+id/radios"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_alignParentLeft="true"
        Android:layout_gravity="right"
        Android:inputType="text"
        Android:orientation="vertical" >

        <RadioButton
            Android:id="@+id/first"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="right"
            Android:background="@color/white"
            Android:button="@null"
            Android:drawablePadding="30dp"
            Android:drawableRight="@Android:drawable/btn_radio"
            Android:text="first"
            Android:textColor="@color/Black"
            Android:textSize="20dip" />

        <RadioButton
            Android:id="@+id/second"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/Black"
            Android:button="@null"
            Android:drawablePadding="30dp"
            Android:drawableRight="@Android:drawable/btn_radio"
            Android:text="second"
            Android:textColor="@color/White"
            Android:textSize="20dp" />

        <RadioButton
            Android:id="@+id/third"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:background="@color/Maroon"
            Android:button="@null"
            Android:drawablePadding="30dp"
            Android:drawableRight="@Android:drawable/btn_radio"
            Android:text="third"
            Android:textColor="@color/Vanilla"
            Android:textSize="20dp" />
    </RadioGroup>

しかし、問題は、テキストの重力が左側にあるということです。アラビア語の単語を書いているので、それを右側に配置することです

enter image description here

48
BasILyoS

追加 Android:gravity="right"は次のように各RadioButtonにあります。

  <RadioGroup
    Android:id="@+id/radios"
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentLeft="true"
    Android:layout_gravity="right"
    Android:inputType="text"
    Android:orientation="vertical" >

    <RadioButton
        Android:id="@+id/first"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="right"
        Android:background="@color/white"
        Android:button="@null"
        Android:drawablePadding="30dp"
        Android:drawableRight="@Android:drawable/btn_radio"
        Android:text="first"
        Android:textColor="@color/Black"
        Android:textSize="20dip" 
        Android:gravity="right"/>

    <RadioButton
        Android:id="@+id/second"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/Black"
        Android:button="@null"
        Android:drawablePadding="30dp"
        Android:drawableRight="@Android:drawable/btn_radio"
        Android:text="second"
        Android:textColor="@color/White"
        Android:textSize="20dp"
         Android:gravity="right"/>

    <RadioButton
        Android:id="@+id/third"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/Maroon"
        Android:button="@null"
        Android:drawablePadding="30dp"
        Android:drawableRight="@Android:drawable/btn_radio"
        Android:text="third"
        Android:textColor="@color/Vanilla"
        Android:textSize="20dp"
        Android:gravity="right" />
</RadioGroup>
58

次の属性をRadioButtonに追加してみてください。機能するはずです。このようにして、ラジオボタンの波及効果を維持できます。

            Android:layoutDirection="rtl"
            Android:textAlignment="textStart"
            Android:layout_gravity="start"

アプリケーションマニフェストでsupportsRtlプロパティをtrueに設定することを忘れないでください。

例えば:

           <RadioGroup
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:orientation="vertical" >

                <RadioButton
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:layout_margin="4dp"
                    Android:layoutDirection="rtl"
                    Android:textAlignment="textStart"
                    Android:layout_gravity="start"
                    Android:text="The test item a"
                    Android:textSize="14sp" />

                 ....                       

            </RadioGroup>

与えるだろう:

enter image description here

96
Irshu

Irsh の答えに基づいて、材料リップル効果を使用して次の結果を生成する次のソリューションを提案します。

Demo

GIFに表示されているように分割線が必要な場合は、ラジオボタンの間に高さ1のビューと背景色を追加するだけです。

<RadioGroup
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:checkedButton="@+id/radioButton1">

    <RadioButton
        Android:id="@+id/radioButton1"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:button="@null"
        Android:drawableRight="?android:attr/listChoiceIndicatorSingle"
        Android:background="?android:selectableItemBackground"
        Android:layoutDirection="rtl"
        Android:layout_gravity="start"
        Android:textAlignment="textStart"
        Android:paddingBottom="10dp"
        Android:paddingLeft="20dp"
        Android:paddingRight="20dp"
        Android:paddingTop="10dp"
        Android:text="Button1"
        Android:textSize="14sp" />

    <RadioButton
        Android:id="@+id/radioButton2"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:button="@null"
        Android:drawableRight="?android:attr/listChoiceIndicatorSingle"
        Android:background="?android:selectableItemBackground"
        Android:layoutDirection="rtl"
        Android:layout_gravity="start"
        Android:textAlignment="textStart"
        Android:paddingBottom="10dp"
        Android:paddingLeft="20dp"
        Android:paddingRight="20dp"
        Android:paddingTop="10dp"
        Android:text="Button2"
        Android:textSize="14sp" />

    <RadioButton
        Android:id="@+id/radioButton3"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:button="@null"
        Android:drawableRight="?android:attr/listChoiceIndicatorSingle"
        Android:background="?android:selectableItemBackground"
        Android:layoutDirection="rtl"
        Android:layout_gravity="start"
        Android:textAlignment="textStart"
        Android:paddingBottom="10dp"
        Android:paddingLeft="20dp"
        Android:paddingRight="20dp"
        Android:paddingTop="10dp"
        Android:text="Button3"
        Android:textSize="14sp" />
</RadioGroup>
20
Max

テキストの描画可能な右側を設定し、Android:drawableRightnullとして設定するAndroid:buttonというプロパティがあります。以下のコードを確認してください:

注:これはサンプルです。すべてのradioButtonに適用できます。

 <RadioButton 
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:button="@null"
             Android:drawableRight="@Android:drawable/btn_radio"
             Android:text="Left"/>
19
RobinHood

追加するだけです:

Android:button="@null"
Android:drawableRight="@Android:drawable/btn_radio"
11
Seyyed

これをxmlに追加します:(4.2以降)

Android:layoutDirection="rtl"

4.2より古いバージョンの場合は、Android.support.v4.viewのViewCompatを使用します。

ViewCompat.setLayoutDirection(findViewById(R.id.radio_button), ViewCompat.LAYOUT_DIRECTION_RTL);
7
masood farmani

非常に単純です。テキストをラジオボタンの左側に表示するには、レイアウトの方向をrtl(==右から左)に変更するだけです。

Android:layoutDirection="rtl"
4
medmahmoudkedda

コードの行を見て混乱しないでください、それは単純な行です

Android:layoutDirection="rtl";//right to left,if you want you can set ltr

これを

        <RadioButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layoutDirection="rtl"
        Android:text="English"
        Android:textSize="24dp"
        />

プレビューの更新を慎重に行って、ブループリントではなくデザインを選択します

4
Saddan

まだ誰もこれを達成する方法を疑問に思っている場合、私の意見ではより良い解決策があります: RadioGroup class extends LineareLayout 単純なラジオボタンとその横にTextViewを追加すると、簡単に同じ効果を得ることができます。

<RadioGroup
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    Android:gravity="center_horizontal"
                    Android:orientation="horizontal">

                    <TextView
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="خانم"/>

                    <RadioButton
                        Android:id="@+id/female"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_marginRight="20dp"
                        />

                    <TextView
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_marginLeft="20dp"
                        Android:text="آقا"/>

                    <RadioButton
                        Android:id="@+id/male"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        />

                </RadioGroup>

これにより、次のようなレイアウトが作成されます。

enter image description here

3
Saeed Entezari

以下のコードのようなトリックを使用して、デフォルトのUIとデフォルトの選択動作を備えたすべてのSDKでこれを実現しました。

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layoutDirection="ltr"
    Android:orientation="vertical"
    Android:padding="10dp">

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_centerVertical="true"
            Android:layout_marginRight="30dp"
            Android:paddingLeft="15dp"
            Android:paddingRight="15dp"
            Android:text="RadioButton 1"
            Android:textColor="@color/Black" />

        <RadioButton
            Android:id="@+id/rb1"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_alignParentRight="true"
            Android:paddingBottom="10dp"
            Android:paddingTop="10dp"
            Android:scaleX="-1" />
    </RelativeLayout>

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_centerVertical="true"
            Android:layout_marginRight="30dp"
            Android:paddingLeft="15dp"
            Android:paddingRight="15dp"
            Android:text="RadioButton 2"
            Android:textColor="@color/Black" />

        <RadioButton
            Android:id="@+id/rb2"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_alignParentRight="true"
            Android:paddingBottom="10dp"
            Android:paddingTop="10dp"
            Android:scaleX="-1" />
    </RelativeLayout>
</LinearLayout>

次に、ボタンを単一選択可能にするために、ボタンonCheckedChangedリスナーのコードを記述し、他のボタンのチェックを外します。

このような:

rb1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean checked) {
        if(checked)
            rb2.setChecked(false);
    }
});
2
SiSa

このコードを試してください:

                     <RadioGroup
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:orientation="vertical" 
                        Android:gravity="right">

                        <RadioButton
                            Android:layout_width="match_parent"
                            Android:layout_height="wrap_content"
                            Android:textDirection="rtl"
                            Android:layout_margin="4dp"
                            Android:layoutDirection="rtl"
                            Android:textAlignment="textStart"
                            Android:layout_gravity="start"
                            Android:text="اول"
                            Android:textSize="15dp"/>
                    </RadioGroup>

結果: 結果を表示

2

"CustomChoiceList"の例 をご覧ください。独自のチェックボックス/ラジオボタンを作成する方法、またはデフォルトのチェックボックス/ラジオボタンを使用してリストビューを作成する方法が説明されています。たとえば、Android設定。res/ layout/sample_main.xmlファイルに特に注意する必要があります。

1
Daniel Höh

RadioButtonsRadioGroupの方向を変更できますAndroid:layoutDirection="rtl"をRadioGroup属性で。

<RadioGroup
    Android:id="@+id/role_radioGroup_ID"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layoutDirection="rtl">
    <RadioButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="@string/manager" />

    <RadioButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:checked="true"
        Android:text="@string/fleetVehicle" />

   <RadioButton
       Android:layout_width="wrap_content"
       Android:layout_height="wrap_content"
       Android:text="@string/personalVehicle" />
</RadioGroup>
1
Hemant Sharma
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            fontPath="@string/font_nunito_light"
            Android:text="Male"
            Android:layout_marginTop="@dimen/dp_10"
            Android:drawablePadding="@dimen/dp_10"
            Android:drawableStart="@drawable/selector_radio"
            Android:button="@null"
            Android:id="@+id/rb_"
            Android:checked="true"
           Android:textSize="@dimen/sp_15"
1
Dishant Kawatra

このコードを試して、値をアラビア語に変更してください。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
              Android:orientation="vertical"
              Android:layout_width="fill_parent"
              Android:layout_height="fill_parent"
        >
    <RadioGroup
            Android:id="@+id/radioGender"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" >

        <RadioButton
                Android:id="@+id/radioMale"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:text="@string/radio_male"
                Android:checked="true" />

        <RadioButton
                Android:id="@+id/radioFemale"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:text="@string/radio_female" />

    </RadioGroup>

    <Button
            Android:id="@+id/btnDisplay"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="@string/btn_display" />

</LinearLayout>
1
user2790339
                            <RadioButton
                                Android:id="@+id/myRb"
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:textAlignment="gravity"
                                Android:gravity="left|center_vertical"
                                Android:layoutDirection="rtl"
                                Android:layout_gravity="start"
                            />

これでRtlがテキストを右に移動し、

1
Rohit Lalwani

マテリアルスタイルを維持するには、Android:drawableRight = "?android:attr/listChoiceIndicatorSingle"を使用します

<RadioButton
   Android:id="@+id/radioButton"
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content"
   Android:button="@null"
   Android:text="rtl button"
   Android:drawableRight="?android:attr/listChoiceIndicatorSingle"/>

誰もこれに言及していないので、誰かがそれをやろうとしている場合、プログラムでそれを行う方法を以下に示します

RadioButton button = new RadioButton(context);
ViewCompat.setLayoutDirection(button, ViewCompat.LAYOUT_DIRECTION_RTL);

// Create the layout params for our buttons
RadioGroup.LayoutParams layoutParams = new 
RadioGroup.LayoutParams(LayoutParams.MATCH_PARENT, 
LayoutParams.WRAP_CONTENT);
button.setLayoutParams(layoutParams);
layoutParams.gravity = Gravity.RIGHT;
button.setTextAlignment(View.TEXT_ALIGNMENT_TEXT_START);
button.setGravity(Gravity.CENTER);
0
murali krish