커스텀 다이얼로그를 만들어보자! (안드로이드/코틀린)

오늘은 커스텀 다이얼로그를 만들기 위해 하루를 소비했습니다,,,,,

 

지금까지는 Material3에서 제공하는 다이얼로그만 사용했었는데 팀 프로젝트를 하다보니

커스텀 다이얼로그가 필요하게 되어서 처음으로 만들어 보게 되었습니다

 

※주의※

난이도가 매우 쉽습니다,,, 

 

1, 먼저 CustomDialog를 구현할 Fragment를 만들어 줍니다!

CustomDialog 프래그먼트를 만들어준다

1, val title:String : 이제 Dialog의 title부분에 넣어줄 텍스트를 받기 위해 지정

2, val message:String : Dialog의 message 부분에 넣어줄 텍스트를 받기 위해 지정

3, Fragment()를 상속 받는 것이 아니라 DialogFragment()를 상속 받아야함

 

이 부분에서는 이 정도를 생각해주시면 좋을 거 같습니다!

 

2, dialog_custom.xml 작업

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/dialog_border"
    android:elevation="5dp"
    android:minWidth="300dp"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        android:id="@+id/textTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <TextView
        android:id="@+id/textMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="TextView" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"
        android:orientation="horizontal"
        android:paddingLeft="180dp">

        <Button
            android:id="@+id/buttonNo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:background="@drawable/button_radius"
            android:text="취소"
            android:textColor="@color/white" />

        <Button
            android:id="@+id/buttonOK"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@drawable/button_radius"
            android:text="확인"
            android:textColor="@color/white" />
    </LinearLayout>
</LinearLayout>

저는 이렇게 작업하였고

 

이렇게 만들어 주었습니다!

 

Dialog의 background는 이렇게 만들어 주었습니다 drawable에서 만들어 줬습니다

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

</shape>

 

 

3, CustomDialog 내부 코드 작성

 

위처럼 코드를 작성 해주시면 됩니다!

빨간줄을 친 부분은 위의 title과 message이며 

다른 Activity나 Fragment에서 사용할 때 넣어주면 됩니다!

 

Fragment에서 사용

 

사용할 때에는 위의 코드처럼 사용하면 되고 Fragment이기 때문에

빨간줄을 친 것처럼 넣어주시면 됩니다!

 

근데!!!!!!!!!!!!
클릭 이벤트는 어떻게 처리해야할까?!?

 

4, 클릭 이벤트 설정

 

4 - 1 : 인터페이스를 만들어준다 (CustomDialog에서 만들어줌)

interface OnButtonClickListener{
        fun okButtonClick()
        fun noButtonClick()
    }

저는 확인 버튼과 취소 버튼이 있었기 때문에 2개의 메서드를 만들어주었습니다

 

 

4 - 2 : 클릭 이벤트 설정과 실행하는 객체를 만들어준다 (CustomDialog에서 만들어줌)

//클릭 이벤트 설정
    fun setButtonClickListener(buttonClickListener: OnButtonClickListener){
        this.buttonCilckListener = buttonClickListener
    }


    //클릭 이벤트 실행
    private lateinit var buttonCilckListener: OnButtonClickListener

 

4 - 3 : CustomDialog에서 버튼 클릭 이벤트 부분에 넣어준다

 

빨간줄을 쳐준 부분을 추가해줍니다!

 

우선 CustomDialog 부분 전체 코드는 이렇습니다!

class CustomDialog(val title:String, val message:String) : DialogFragment() {

    lateinit var binding: DialogCustomBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        binding = DialogCustomBinding.inflate(layoutInflater)

        //레이아웃 배경을 투명하게 해줌
        dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

        binding.textTitle.text = title
        binding.textMessage.text = message

        binding.buttonOK.setOnClickListener {
            buttonCilckListener.okButtonClick()
            dismiss()
        }

        binding.buttonNo.setOnClickListener {
            buttonCilckListener.noButtonClick()
            dismiss()
        }



        return binding.root
    }

    interface OnButtonClickListener{
        fun okButtonClick()
        fun noButtonClick()
    }


    //클릭 이벤트 설정
    fun setButtonClickListener(buttonClickListener: OnButtonClickListener){
        this.buttonCilckListener = buttonClickListener
    }


    //클릭 이벤트 실행
    private lateinit var buttonCilckListener: OnButtonClickListener
}

 

 

5, 화면에서 구현하기

구현

 

위의 빨간줄을 친 부분을 입력하면 implement가 됩니다

이후 override된 부분에 클릭 이벤트를 넣어주시면 잘 됩니다!!

 

이건 커스텀 블로그.mp4

1.81MB

구현 영상

 

느낀점

: 위에선 하루라고 했지만 어제부터 지금까지 계속 CustomDialog를 만들기 위해서 찾아봤던 거 같습니다,,,,

처음 만들어 보았는데 많이 어렵네여,, 그래도 이렇게 하나하나 만들다보면 언젠가는 수월하게 할 수 있겠죠,,,?

더 열심히 해야할 거 같습니다,,,