IT

Android에서 사용자 지정 라디오 단추 추가

itgroup 2023. 9. 20. 20:16
반응형

Android에서 사용자 지정 라디오 단추 추가

안드로이드의 일반 버튼에 대한 라디오 버튼 효과를 얻으려고 합니다.

아래에 간단한 안드로이드 라디오 버튼이 있습니다.

enter image description here

이에 대한 코드는 ::

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="RadioButton1" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton2" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton3" />
    </RadioGroup>


</RelativeLayout>

아래와 같이 사용자 지정하는 방법:

enter image description here

감사합니다!

[EDIT] 답변 중 하나의 코드 사용

enter image description here

그런데 버튼 이름이 선택 옵션에 가려져 어떻게 제거해야 합니까?

{EDIT} 추가 변경 사항

마지막으로 모든 변경사항은 적어도 내가 3개의 라디오 버튼 중에서 어떤 버튼을 선택했는지 알아야 합니다.. 아래와 같이 얻는 것이 가능합니까?

enter image description here

이미지를 참조하는 배경 그림이나 선택기(아래와 같이)를 추가하고 단추를 투명하게 만듭니다.

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:text="RadioButton1" />

라디오 버튼을 선택했을 때 다른 리소스를 사용하도록 하려면 다음과 같은 선택기 배경을 작성합니다.

res/drawable/your buttonbackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/b"
        android:state_checked="true"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/b" />
</selector>

위의 셀렉터에서, 우리는 두 개의 드로우어블을 참조합니다.a그리고.b, 다음은 이를 만드는 방법입니다.

res/drawable/a.xml - 선택한 상태

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#53aade" />
</shape>

res/drawable/b.xml - 일반 상태

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#555555" />
</shape>

추첨 자료에 대한 자세한 내용은 여기: http://developer.android.com/guide/topics/resources/drawable-resource.html

저는 수락된 답변을 업데이트하고 불필요한 것들을 제거하였습니다.

저는 다음 이미지를 위한 XML을 작성하였습니다.

enter image description here

사용자의 XML 코드:RadioButton다음과 같습니다.

<RadioGroup
        android:id="@+id/daily_weekly_button_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="@dimen/_80sdp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:checked="true"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Daily"
            android:textColor="@color/radio_flat_text_selector" />

        <RadioButton
            android:id="@+id/radio1"
            android:gravity="center"
            android:layout_width="@dimen/_80sdp"
            android:layout_height="wrap_content"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:paddingLeft="@dimen/_16sdp"
            android:paddingTop="@dimen/_3sdp"
            android:paddingRight="@dimen/_16sdp"
            android:paddingBottom="@dimen/_3sdp"
            android:text="Weekly"
            android:textColor="@color/radio_flat_text_selector" />

</RadioGroup>

radio_flat_selector.xml배경 선택기의 경우:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_flat_selected" android:state_checked="true" />
    <item android:drawable="@drawable/radio_flat_regular" />
</selector>

radio_flat_selected.xml선택한 버튼에 대해:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="1dp"
        />
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

radio_flat_regular.xml일반 선택기의 경우:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="1dp" />
    <solid android:color="#fff" />
    <stroke
        android:width="1dp"
        android:color="@color/colorAccent" />
</shape>

위의 3가지 파일 코드가 모두 들어갈 것입니다.drawable/폴더.

이제 우리도 필요합니다.TextColor Selector(색상 선택): 텍스트의 색을 그에 따라 변경합니다.

radio_flat_text_selector.xml텍스트 색 선택기용

(사용)color/이 파일의 폴더입니다.)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_checked="false" />
    <item android:color="@color/colorWhite" android:state_checked="true" />
</selector>

참고: 이러한 유형의 솔루션에 대해 여러 답변을 참조했지만 좋은 솔루션을 찾지 못하여 작성했습니다.

당신에게 도움이 되기를 바랍니다.

감사해요.

Evan의 답변에서 나온 동일한 XML 파일 형식을 사용하되 형식을 지정하는 데는 그리기 가능한 파일 하나만 사용하면 됩니다.

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:button="@android:color/transparent"
    android:checked="true"
    android:text="RadioButton1" />

그리고 각각의 그릴 수 있는 파일:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" >
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" />            
         </shape>
    </item>

    <item android:state_checked="true">
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" /> 
         </shape>
    </item>  

    <item>
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#cccccc" />
             <solid android:color="#ffffff" />            
         </shape>
    </item>
</selector>

세팅android:background그리고.android:button라디오 버튼을 눌러도 대답이 안 되는 것 같았어요그리기 가능한 이미지가 배경으로 표시되고 있었습니다(비록android:button다음과 같이 라디오 버튼 텍스트에 투명)으로 설정되고 있었습니다.

android:background="@drawable/radiobuttonstyle"
    android:button="@android:color/transparent"

그래서 사용자 정의 그리기 가능한 라디오 버튼 style.xml로 라디오 버튼이 주어졌습니다.

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Maintenance"
    android:id="@+id/radioButton1"
    android:button="@drawable/radiobuttonstyle"
      />

radiobuttonstyle.xml은 다음과 같습니다.

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/ic_radio_checked"></item>
  <item android:state_checked="false" android:drawable="@drawable/ic_radio_unchecked"></item>
</selector>

사용자 지정 버튼 스타일의 라디오 버튼이 작동한 후.

enter image description here

CompoundButton 클래스의 "Button" 속성을 XML 그리기 가능 경로(my_checkbox)로 채워야 합니다.XML 그리기 가능에서 다음을 입력해야 합니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" android:drawable="@drawable/checkbox_not_checked" />
     <item android:state_checked="true" android:drawable="@drawable/checkbox_checked" />
     <item android:drawable="@drawable/checkbox_not_checked" /> <!-- default -->
</selector>

my_checkbox는 선택하지 않았을 때는 당신의 체크박스이고 선택하지 않았을 때는 당신의 체크박스인 당신의 PNG 그리기 가능한 체크박스의 당신의 파일명으로 바꾸는 것을 잊지 마세요.

크기의 경우 레이아웃 파라미터를 직접 업데이트합니다.

기본 라디오 버튼을 숨기려면 모든 시각적 피드백이 그리기 가능한 배경에서 처리되므로 버튼을 투명하게 만드는 대신 제거하는 것이 좋습니다.

android:button="@null"

또한 여러 라디오 버튼이 있으므로 스타일을 사용하는 것이 좋습니다.

<RadioButton style="@style/RadioButtonStyle" ... />

<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
    <item name="android:background">@drawable/customButtonBackground</item>
    <item name="android:button">@null</item>
</style>

당신은 세슬린 관습이 필요할 것입니다.버튼배경그림도 그릴 수 있습니다.

맞춤형 그리기 가능을 추가하는 가장 좋은 방법은 다음과 같습니다.

<RadioButton
    android:id="@+id/radiocar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@android:color/transparent"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:drawableRight="@mipmap/car"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:text="yourtexthere"/>

사용자 정의 그리기 가능에 의한 그림자 오버레이는 여기서 제거됩니다.

간단한 방법으로 시도해 봅니다.

  1. 그리기 가능한 폴더에 새 레이아웃을 만들고 이름을 custom_radio button으로 지정합니다(이름을 변경할 수도 있습니다).

     <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_checked="false" 
android:drawable="@drawable/your_radio_off_image_name" />
 <item android:state_checked="true" 
android:drawable="@drawable/your_radio_on_image_name" />
</selector>

  2. 레이아웃 작업에 사용

    <RadioButton
 android:id="@+id/radiobutton"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:button="@drawable/custom_radiobutton"/>

커스텀 버튼 설정이 안 돼서 오는 사람?나는 라디오 버튼이 작동하지 않는 것을 알았지만 안드로이드 x.app compat.위젯.앱 컴파트 라디오 버튼이 작동했습니다.

그래서 라디오 버튼을 이렇게.

 <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/your_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@drawable/radio_button_selector"
            android:text="Your choice" />

이런 셀렉터로.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_button_selected" android:state_checked="true" />
    <item android:drawable="@drawable/radio_button_unselected" android:state_checked="false" />
</selector>

효과가 있을 겁니다

아래 코드는 사용자 지정 라디오 버튼의 예입니다.아래의 단계를 따릅니다.

  1. Xml 파일.

     <FrameLayout
     android:layout_width="0dp"
     android:layout_height="match_parent"
     android:layout_weight="0.5">

     <TextView
         android:id="@+id/text_gender"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="left|center_vertical"
         android:gravity="center"
         android:text="@string/gender"
         android:textColor="#263238"
         android:textSize="15sp"
         android:textStyle="normal"

         />

     <TextView
         android:id="@+id/text_male"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:layout_marginLeft="10dp"
         android:gravity="center"
         android:text="@string/male"
         android:textColor="#263238"
         android:textSize="15sp"
         android:textStyle="normal"/>

     <RadioButton
         android:id="@+id/radio_Male"
         android:layout_width="28dp"
         android:layout_height="28dp"
         android:layout_gravity="right|center_vertical"
         android:layout_marginRight="4dp"
         android:button="@drawable/custom_radio_button"
         android:checked="true"
         android:text=""
         android:onClick="onButtonClicked"
         android:textSize="15sp"
         android:textStyle="normal"

         />
 </FrameLayout>

 <FrameLayout
     android:layout_width="0dp"
     android:layout_height="match_parent"
     android:layout_weight="0.6">

     <RadioButton
         android:id="@+id/radio_Female"
         android:layout_width="28dp"
         android:layout_height="28dp"
         android:layout_gravity="right|center_vertical"
         android:layout_marginLeft="10dp"
         android:layout_marginRight="0dp"
         android:button="@drawable/custom_female_button"
         android:text=""
         android:onClick="onButtonClicked"
         android:textSize="15sp"
         android:textStyle="normal"/>

     <TextView
         android:id="@+id/text_female"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="left|center_vertical"
         android:gravity="center"
         android:text="@string/female"
         android:textColor="#263238"
         android:textSize="15sp"
         android:textStyle="normal"/>

     <RadioButton
         android:id="@+id/radio_Other"
         android:layout_width="28dp"
         android:layout_height="28dp"
         android:layout_gravity="center_horizontal|bottom"
         android:layout_marginRight="10dp"
         android:button="@drawable/custom_other_button"
         android:text=""
         android:onClick="onButtonClicked"
         android:textSize="15sp"
         android:textStyle="normal"/>

     <TextView
         android:id="@+id/text_other"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="right|center_vertical"
         android:layout_marginRight="34dp"
         android:gravity="center"
         android:text="@string/other"
         android:textColor="#263238"
         android:textSize="15sp"
         android:textStyle="normal"/>
 </FrameLayout>

2. 라디오 단추에 사용자 지정 xml 추가

2.1.그 외 추첨 가능한

custom_other_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/select_radio_other" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.2.여성 뽑기 가능

custom_female_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/select_radio_female" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />

</selector>

2.3. 남성 뽑기 가능

custom_radio_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/select_radio_male" />
    <item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>
  1. 출력 : 출력화면 입니다.

TL;DR 사용android:drawableStart해 대신 합니다.android:button합니다. android:button.@null 예:

android:button="@null"
android:drawableStart="@drawable/radio_selector"

긴 버전:

이유는 잘 모르겠지만 안드로이드 11(API 레벨 30)을 실행하는 기기에서 테스트했을 때 여기 있는 기존 답변은 제게 맞지 않았습니다.그래서 다음과 같은 대안이나 해킹을 시도해 보았는데 효과가 있었습니다.참조용 라디오 버튼 구성 요소의 xml 샘플:

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:drawableStart="@drawable/radio_selector"
    android:drawablePadding="5dp"
    android:text="@string/radioOption1" />

사용하고 있습니다.android:drawableStart 수 있는 또는신 선택 할 수 있습니다.android:button . 를 하는 것도 마세요.android:button.@null

이것이 뒤늦은 답변이라는 것을 알지만, developer.android.com 을 통해 보면, 토글 버튼이 당신의 상황에 이상적일 것으로 보입니다.

Toggle button image http://developer.android.com/guide/topics/ui/controls/togglebutton.html

물론 다른 제안사항을 사용하여 배경 그림을 그릴 수 있으면 원하는 맞춤형 모양을 얻을 수 있습니다.

<ToggleButton 
    android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:textOn="On"
    android:textOff="Off"
    />

이제 최종 편집을 수행하고 단추에 "헤일로" 효과를 부여하려면 다른 사용자 지정 선택기를 사용하여 이 작업을 수행할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" > <!-- selected -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="3px"
                android:color="@android:color/holo_blue_bright" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item> <!-- default -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="1px"
                android:color="@android:color/darker_gray" />
            <corners
                android:radius="5dp" />
        </shape>
    </item> 
</selector>

언급URL : https://stackoverflow.com/questions/19163628/adding-custom-radio-buttons-in-android

반응형

'IT' 카테고리의 다른 글

Linked Server를 사용하여 MSSQL에서 MariaDB를 업데이트하면 SSIS에서 오류가 발생함  (0) 2023.09.20
도커 파일에서 RUN mkdir를 실행할 수 없습니다.  (0) 2023.09.20
json과 xml의 장점과 단점은 무엇입니까?  (0) 2023.09.20
C#에서 참조된 XSD에 대해 XML 유효성 검사  (0) 2023.09.20
오라클에서 날짜를 2개 빼서 시 분 단위로 결과를 얻는 방법  (0) 2023.09.20

'IT'의 다른글

  • 현재글Android에서 사용자 지정 라디오 단추 추가

관련글

댓글

티스토리툴바