เพิ่มระยะขอบระหว่าง RadioButton และป้ายกำกับใน Android หรือไม่

เป็นไปได้ไหมที่จะเพิ่มช่องว่างระหว่าง RadioButton และป้ายกำกับในขณะที่ยังใช้ส่วนประกอบในตัวของ Android โดยค่าเริ่มต้นข้อความจะดูเป็นรอยเล็กน้อย

<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" แต่การระบุ Unicode U + 00A0 เช่นเดียวกับใน "\ u00A0My String" จะเป็นเคล็ดลับ วิธีนี้ใช้งานได้ แต่ดูเหมือนสกปรก

วิธีแก้ปัญหาที่ดีกว่านี้หรือไม่?

สำหรับใครก็ตามที่อ่านตอนนี้คำตอบที่ได้รับการยอมรับจะนำไปสู่ปัญหาการจัดวางบางอย่างใน API รุ่นใหม่ที่ทำให้เกิดช่องว่างภายในมากเกินไป

ใน API <= 16 คุณสามารถตั้งค่าpaddingLeftบนปุ่มตัวเลือกเพื่อตั้งค่าช่องว่างภายในที่สัมพันธ์กับขอบเขตมุมมองของปุ่มตัวเลือก นอกจากนี้พื้นหลังแพตช์เก้ายังเปลี่ยนขอบเขตมุมมองที่สัมพันธ์กับมุมมอง

บน API> = 17 paddingLeft(หรือpaddingStart) สัมพันธ์กับปุ่มตัวเลือกที่ดึงได้ เช่นเดียวกันกับเกี่ยวกับแพทช์เก้า หากต้องการแสดงความแตกต่างของช่องว่างภายในให้ดีขึ้นโปรดดูภาพหน้าจอที่แนบมา

หากคุณเจาะลึกโค้ดคุณจะพบเมธอดใหม่ใน API 17 ชื่อgetHorizontalOffsetForDrawables getHorizontalOffsetForDrawablesวิธีนี้เรียกว่าเมื่อคำนวณช่องว่างด้านซ้ายสำหรับปุ่มตัวเลือก (ดังนั้นจึงมีช่องว่างเพิ่มเติมที่แสดงในภาพ)

TL; DR เพียงใช้paddingLeftถ้าของคุณminSdkVersionคือ> = 17 หากคุณรองรับ API <= 16 คุณควรมีรูปแบบปุ่มตัวเลือกสำหรับ SDK ขั้นต่ำที่คุณรองรับและอีกสไตล์สำหรับ API 17+

ไม่แน่ใจว่าวิธีนี้จะช่วยแก้ปัญหาของคุณได้หรือไม่ แต่คุณได้ลองใช้คุณสมบัติ "Padding left" ของ Radio Button ที่มีค่าตั้งแต่ 50dip ขึ้นไป

ฉันลองหลายวิธีและเสร็จสิ้นโดยอันนี้ทำงานได้อย่างถูกต้องทั้งบนตัวจำลองและอุปกรณ์:

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />

• android: พื้นหลังต้องโปร่งใสเนื่องจากดูเหมือนว่าใน api10 มีพื้นหลังที่มี paddings ภายใน (ไม่ได้ลองกับ apis อื่น แต่วิธีแก้ปัญหาก็ใช้ได้กับคนอื่นด้วย)
• android: ปุ่มต้องเป็นโมฆะเนื่องจากการพายจะทำงานไม่ถูกต้อง
• ต้องระบุandroid: drawableLeftแทนandroid: button
• android: drawablePaddingคือช่องว่างที่จะอยู่ระหว่าง drawable และข้อความของคุณ

เพิ่มอัตรากำไรขั้นต้นระหว่างRadioButtonของฉลากโดยpaddingLeft :

android:paddingLeft="10dip"

เพียงแค่ตั้งค่าของคุณเองpadding

คุณสมบัติ xml ของ RadioButton

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

เสร็จแล้ว

ใช้แอตทริบิวต์ 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แอตทริบิวต์ไม่ทำงาน จะใช้งานได้ก็ต่อเมื่อคุณเพิ่ม drawable ในปุ่มตัวเลือกของคุณ สำหรับเช่น:

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

ตอนนี้ไม่สามารถลองตรวจสอบได้ แต่คุณลองดูว่าแอตทริบิวต์android: drawablePaddingทำสิ่งที่คุณต้องการหรือไม่?

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

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

ช่องว่างระหว่าง drawables และข้อความ จะทำได้โดยการเพิ่มบรรทัดด้านล่างในไฟล์ xml android:drawablePadding="@dimen/10dp"

ฉันได้ลองแล้ว "android: paddingLeft" จะใช้งานได้ paddingLeft จะส่งผลต่อข้อความในขณะที่ให้ภาพวิทยุอยู่ในตำแหน่งเดิม

ดูเหมือนว่า "android: paddingLeft" จะทำงานได้อย่างถูกต้องภายใต้ Android 4.2.2 เท่านั้น

ฉันได้ลองใช้ Android เกือบทุกเวอร์ชันแล้วและใช้ได้กับเวอร์ชัน 4.2.2 เท่านั้น

ฉันใช้แนวทางอื่นที่คิดว่าน่าจะใช้ได้กับ API ทุกเวอร์ชัน แทนที่จะใช้ช่องว่างภายในฉันกำลังเพิ่มมุมมองที่ว่างเปล่าระหว่างไปยัง RadioButtons:

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

สิ่งนี้ควรให้ระยะห่าง 20dp

ฉันมาที่นี่เพื่อหาคำตอบและวิธีที่ง่ายที่สุด (หลังจากคิดบางอย่าง) คือเพิ่มระยะห่างที่จุดเริ่มต้นของป้ายกำกับ

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

สำหรับฉันทำงาน:

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

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

คุณสามารถโค้ดนี้ในไฟล์ 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" />

หรือใช้สิ่งนี้ในชั้นเรียนกิจกรรม

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

สร้างสไตล์ใน 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 สืบทอดทางอ้อม

ฉันรู้ว่ามันเป็นคำถามเก่า แต่ด้วยวิธีแก้ปัญหานี้ในที่สุดฉันก็สบายใจและลืมเรื่องระดับ 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>

คุณสามารถลองใช้แอตทริบิวต์แรงโน้มถ่วงของปุ่มตัวเลือก

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

สิ่งนี้จะจัดข้อความให้ชิดขวาสุด ลองดูวิทยุเครื่องแรกในภาพ