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"에서와 같이 선행 공백 문자를 자르는 것처럼 보이지만 "\ u00A0My String"에서와 같이 유니 코드 U + 00A0을 지정하면 트릭이 수행됩니다. 이것은 작동하지만 다소 더러워 보입니다.

더 나은 솔루션이 있습니까?

답변:


120

지금이 글을 읽는 모든 사람에게 받아 들여진 대답은 새로운 API에서 너무 많은 패딩을 유발하는 레이아웃 문제로 이어질 것입니다.

API <= 16 paddingLeft에서는 라디오 버튼의 뷰 경계에 상대적인 패딩을 설정하도록 라디오 버튼을 설정할 수 있습니다 . 또한 패치 9 배경은 뷰에 대한 뷰 경계도 변경합니다.

API> = 17에서 paddingLeft(또는 paddingStart)은 라디오 버튼 드로어 블과 관련됩니다. 약 패치 9에도 동일하게 적용됩니다. 패딩 차이를 더 잘 설명하려면 첨부 된 스크린 샷을 참조하십시오.

코드를 자세히 살펴보면 API 17에서 getHorizontalOffsetForDrawables 라는 새 메서드를 찾을 수 있습니다. 이 메서드는 라디오 버튼의 왼쪽 패딩 (따라서 그림에 표시된 추가 공간)을 계산할 때 호출됩니다.

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

15
Google 개발자 / 관리자가 일반적인 개발자를 어떻게 대하는지 놀랍습니다. 그들은 원할 때마다 원하는 것을합니다. 일관성과 무결성은 그들에게 아무 의미가 없습니다.
Yar

66

이 방법으로 문제가 해결되는지 확실하지 않지만 50dip 이상의 값을 사용하여 라디오 버튼의 "Padding left"속성을 사용해 보셨습니까?


2
이것은 작동하며 기본 드로어 블의 너비를 덮으려면 50dip이 필요합니다. 처음에는 20dip을 사용했고 텍스트가 왼쪽으로 이동했습니다! 고정 지점이 드로어 블의 오른쪽 가장자리가 아니기 때문입니다. 드로어 블의 왼쪽 가장자리입니다.
Robert Claypool 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 : button 은 패딩이 제대로 작동하지 않으므로 null 이어야 합니다.
  • android : button 대신 android : drawableLeft 를 지정해야 합니다.
  • android : drawablePadding 은 드로어 블과 텍스트 사이에있는 공간입니다.

4
최고의 답변! android : background = "@ null"을 설정할 수도 있으며 패딩없이 설명한대로 표시됩니다.
saiyancoder

2
android : button = "@ null"을 설정할 때 라디오 버튼이 선택 (클릭)되지 않습니다. 나는 뭔가 잘못하고있다. 도와주세요 stackoverflow.com/questions/28052820/…
Shirish Herwade

@Shirish이 솔루션은 버튼을 클릭하지 않는 것과 관련이 없습니다. 방금 구현했고 클릭됩니다.
Yar

솔루션에 감사드립니다!
Vimalathithan Rajasekaran

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

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

2
@dimen/10dp나쁜 연습
블라드

0

나는 "android : paddingLeft"가 작동합니다. paddingLeft는 라디오 이미지를 원래 위치에 유지하면서 텍스트에만 영향을줍니다.


-1

"android : paddingLeft"는 android 4.2.2에서만 올바르게 작동하는 것 같습니다.

나는 거의 모든 버전의 안드로이드를 시도했으며 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

-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, 당연히 그것은 레이블이 아니지만 여기서 레이블처럼 작동합니다! 클릭 레이블을 원하면 클릭 리스너를 TextViews에 추가 할 수 있습니다. 내 요점은 모든 버전의 Android OS에 대한 레이아웃을 구현해야한다는 것입니다. 아니에요.
Stanley Kou

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