안녕하세요, 반갑습니다!
오늘은 많은 예시 중 바로 단 '1개'만 선택해야 하는 UI 를 만들어보겠습니다.
우리는 인터넷 쇼핑이나 게임 등 여러방면에서 많이 볼 수 있습니다.
오직 단 한개만 선택되어야 하는 UI,
라디오 버튼(Radio Button)
단순히 라디오 버튼(Radio Button) 하나만 쓸 수도 있습니다.
하지만, 여러개 예시 중 단 하나만 선택되어야 하는 게 라디오 버튼(Radio Button)의 기본!
그리고 그 기능을 더욱 다루기 쉽게 도와줄 라디오 버튼(Radio Button) 을 사용하겠습니다.
1. .xml 파일에 라디오 그룹(Radio Group) 과 라디오 버튼(Radio Button) 배치하기
예시로 쓸 라디오 버튼(Radio Button)들을 라디오 그룹(Radio Group)으로 아래와 같이 감쌀 수 있습니다.
<RadioGroup
android:id="@+id/rg1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="@+id/rg1Result"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="@+id/rb1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="삼겹살" />
<RadioButton
android:id="@+id/rb2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="족발" />
<RadioButton
android:id="@+id/rb3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="치킨" />
</RadioGroup>
그리고 라디오 그룹(Radio Group) 은 LinearLayout 과 동일하게 방향을 설정할 수 있습니다.
android:orientation="horizontal/vertical" 속성으로 지정할 수 있습니다.
<RadioGroup
android:orientation="horizontal" //가로
.
.
.
</RadioGroup> 
<RadioGroup
android:orientation="vertical" //세로
.
.
.
</RadioGroup> 
2. 라디오 그룹(Radio Group) 에 Listener 연결하기
onCreate() 안에 라디오 그룹(Radio Group)에 setOnCheckedChangeListener() 을 연결해 줍니다.
이 라디오 그룹(Radio Group) 안의 각 버튼을 클릭하게 되면,
클릭시 checkedId 파라미터를 통해 전달되는 버튼의 각 아이디를 확인할 수 있습니다.
rg1.setOnCheckedChangeListener { group, checkedId ->
when(checkedId) {
.
.
.
}
}
그래서 이렇게 when() 으로 각 라디오 버튼(Radio Button) 에 따라 분기처리해 줄 수 있습니다.
when(checkedId) {
R.id.rb1 -> r1Result.text = "오늘 저녁은? ${rb1.text}!"
R.id.rb2 -> r1Result.text = "오늘 저녁은? ${rb2.text}!"
R.id.rb3 -> r1Result.text = "오늘 저녁은? ${rb3.text}!"
}
자, 이제 앱을 실행 후 테스트를 해보면,
아래와 같이 단 하나만 선택할 수 있습니다.
어떤가요? 잘 작동하시나요?
축하합니다!
아, 이렇게 라디오 그룹(Radio Group) 하나로 감싸면 간단하게 단 하나만 선택될 수 있도록 할 수 있습니다.
가독성도, 관리적인 측면에서도 훨씬 좋구요.
다음에는 이 라디오 버튼(Radio Button) 을 커스터마이징(Customizing) 하는 방법도 포스팅해보겠습니다.
감사합니다.