라디오 다이얼로그 컴포넌트 제작기

좋은 코드는...추상화가 잘 된것.

당연함.

어디서든 갖다 쓸 수 있고. 다형성이 적절히 보장된 것...

 

 

최적은 아니지만 어쨌든 내 노력을 갈아서 했으니 기록하고자 오랜만에 글을 쓴다.

 

만든건 다이얼로그! 대부분의 다이얼로그가 존재하지만

라디오 버튼 + 텍스트 필드가 있는 기본 다이얼로그가 추가로 필요해서 만들었다.

 

 

1. 일단 공통 테마부터 만들어준다

    <!--Dialog Theme-->
    <style name="DialogTheme" parent="Theme.AppCompat.Dialog">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@color/opacity100</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:windowMinWidthMajor">100%</item>
        <item name="android:windowMinWidthMinor">100%</item>
    </style>

다이얼로그는 뭐..다 비슷하게 생겨먹었으니까 공통 테마를 하나 만들어준다. 

 

 

2. 사용하고자 하는데서 상속해준다

class TwoBtnWithRadioDialog(
    context: Context,
    private val title: String,
    private val sub_text: String,
    private val radioButtonList: Array<String>,
    private val textfieldVisible: Boolean,
    private val textfieldHint: String,
    private val leftListener: View.OnClickListener,
    private val rightListener: View.OnClickListener,
) :
    Dialog(context, R.style.DialogTheme)

이런식으로! 뷰를 공통적으로 가져가기 위함이다. 라디오가 아니라 원버튼, 투버튼 기본 다이얼로그 만들때 그대로 갖다쓰면 된다.

 

파라미터 목록을 보니 아직까지 완벽하게 예쁜 추상화가 된 것은 아닌것같지만...어쨌든...다음은 생성자다.

타이틀 / 서브텍스트 / 라디오버튼 리스트 / 텍스트필드 노출 여부 / 텍스트필드 힌트 / 왼 오 버튼 리스너 이렇게..받는다.

얘들의 각각 xml내 위치는 뭐 원하는데..ㅎㅎ넣으면 되고,

 

 

3. 라디오 그룹에 받은 리스트만큼 연결해준다

라디오는 그룹만 일단 생성해준다.(xml)

 <RadioGroup
            android:layout_marginTop="23sp"
            android:id="@+id/radio_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/title_text"
            app:layout_constraintStart_toStartOf="@id/text_field_layout">
        </RadioGroup>

안의 리스트들은 바뀌겠지만.. 그룹은 어차피 하나니까 미리 생성해서 저기 아이디를 기억하고,

        val parentLayout = binding.radioGroup

이렇게 pl로 선언해준다.

그 다음, 받은 라디오 리스트들을 연결해준다.

        for (i in 0..radioButtonList.size - 1) parentLayout.addView(addRadioBtn(radioButtonList[i]))

이렇게~

 

나머지 텍스트필드나..뭐 이런건 그냥 받은거 바인딩만 하면 되고,

 

 

3. 마지막으로 리스너까지 연결해준다

아래처럼 연결하면 끝이다.

 binding.okBtn.setOnClickListener {
            dismiss()
            if (leftListener != null) {
                binding.okBtn.setOnClickListener(leftListener)
                binding.okBtn.performClick()
            }
        }

        binding.cancelBtn.setOnClickListener {
            dismiss()
            if (rightListener != null) {
                binding.cancelBtn.setOnClickListener(rightListener)
                binding.cancelBtn.performClick()
            }
        }

 

 

4. 사용예시

 val reportReasonList = arrayOf(
                    context.getString(R.string.study_club_report_desc_1),
                    context.getString(R.string.study_club_report_desc_2),
                    context.getString(R.string.study_club_report_desc_3),
                    context.getString(R.string.study_club_report_desc_4)
                )
                
                
                 TwoBtnWithRadioDialog(
                        context,
                        context.getString(R.string.study_club_report_raason_need_to_choose),
                        context.getString(R.string.study_club_report_precaution),
                        reportReasonList,
                        true,
                        context.getString(R.string.study_club_report_raason_reqiuire), {
                            listener.onReportPost(item)
                        }, {}).show()