<Kotlin 코틀린> 커스텀 다이얼로그 생성하기(아이폰 처럼 꾸며봤어요!)

이렇게! 아이폰처럼 다이얼로그가 나오도록 한번 만들어보겠습니다!

 

우선 레이아웃 2가지를 추가해주도록 하겠습니다.

 

일단 confirm_dialog.xml 

이 화면은 확인버튼 하나만 있는 다이얼로그에요!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"

    android:orientation="vertical">

    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:background="@drawable/radius"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"

            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="10dp"
                android:text="알 림"
                android:textColor="#000000"
                android:id="@+id/title"
                android:textStyle="bold"
                android:textSize="15dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:textAlignment="center"
                android:text="새로운 버전이 있습니다.\n업데이트 하시겠습니까?"
                android:textColor="#000000"
                android:id="@+id/body"
                android:textSize="12dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#cdcdcd">
            </View>

            <Button
                android:id="@+id/Confirm"

                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:background="@null"
                android:textColor="#2A71CD"
                android:text="확 인" />


        </LinearLayout>
    </LinearLayout>
</LinearLayout>

그 다음에는 alert_dialog.xml

이녀석은 확인버튼과 취소버튼 둘다 존재합니다!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:background="@drawable/radius"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"

            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginTop="10dp"
                android:text="알 림"
                android:textColor="#000000"
                android:id="@+id/title"
                android:textStyle="bold"
                android:textSize="15dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:textAlignment="center"
                android:text="새로운 버전이 있습니다.\n업데이트 하시겠습니까?"
                android:textColor="#000000"
                android:id="@+id/body"
                android:textSize="12dp" />
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#cdcdcd">
        </View>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/Confirm"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="0.5"
                android:background="@null"
                android:textColor="#2A71CD"
                android:text="확 인" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:layout_weight="0"
                android:background="#cdcdcd">
            </View>

            <Button
                android:id="@+id/cancel"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:background="@null"
                android:layout_weight="0.5"
                android:textColor="#2A71CD"
                android:text="취 소" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

 

지금 이렇게 만드신 다음에 radius에서 에러가 날거에요.

 

자 이제 drawable안에

 

이렇게하셔서 이름은 radius로 지어주세요.!!

 

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

코드는 이렇게 해주시면 됩니다.  #F0F0F0이 아이폰 배경색이랑 제일 유사하더라구요. (포토샵에서 스포이드 찍음 ㅎ..)

모서리를 둥글게 하기위해 radius를 20dp정도 주었습니다..!

 

자! 이제 CustomDialog 클래스를 하나 만들어주겠습니다!

class CustomDialog(context: Context) : AppCompatActivity() {

    private val dialog = Dialog(context)
    private lateinit var body : TextView
    private lateinit var confirm : Button
    private lateinit var cancel : Button
    val TAG = "로그 "

    fun start(bodyMessage : String, mode : Int, dialogMode : Int, context : Context) {
        //dialogMode = 2 (확인 버튼과 취소 버튼 존재함.)
        //dialogMode = 1 (확인 버튼만 존재함)
        //mode변수값에 따라 다르게 클릭 리스너 이벤트 활동이 달라짐 (소스참고)
        //mode 값에 따라서 클릭리스너를 셋팅합니다!

        supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
        dialog.window!!.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)) //여백을 제거함( 이부분은 주석처리하고 어떻게 다이얼로그가 생성되는지 보는게 이해하는게 가장 빠름) ex) TRANSPARENT값은 투명함.

        when(dialogMode){
            1 ->{ //확인버튼 하나만 있음!
                dialog.setContentView(R.layout.confirm_dialog)

                body = dialog.findViewById(R.id.body)
                body.setText(bodyMessage)

                confirm = dialog.findViewById(R.id.Confirm)
                confirm.setOnClickListener { //확인버튼
                    when(mode){
                        1 -> {
                            dialog.dismiss() //다이얼로그 닫히는 메소드
                        }
                        2 -> {
							dialog.dismiss()
                        }
                    }
                }
            }
            2 ->{ //취소와 확인 둘다 있음!
                dialog.setContentView(R.layout.alert_dialog)
                body = dialog.findViewById(R.id.body)
                body.setText(bodyMessage)

                confirm = dialog.findViewById(R.id.Confirm)
                cancel = dialog.findViewById(R.id.cancel)

                cancel.setOnClickListener{ //취소버튼
                    
                    when(mode){
                        1 -> {
                        	dialog.dismiss()
                        }
                        2 ->{
                            dialog.dismiss()
                        }
                    }
                }

                confirm.setOnClickListener { //확인버튼
                    when(mode){
                        1 -> {
                        
                        }
                        2 -> {
                            
                        }
                    }
                }
            }
        }
        dialog.setCancelable(false)    //다이얼로그 이외의 화면 터치시 닫히지 않음!
        dialog.show()
    }
}

자 여기서 dialogMode 변수에따라서 다이얼로그에 모양이 바뀔거에요

 

dialogMode값이 1이면 확인버튼만 있는 다이얼로그!

 

2이면 확인버튼과 취소버튼 둘다 있는 다이얼로그가 나옵니다.!

 

그리고 mode변수에 값에따라서 클릭시 발생하는 이벤트 처리를 어떤식으로 할건지 처리 할 수 있습니다!

 

dialog.window!!.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

이 코드가 없으면 다이얼로그가 둥글한 모양에서 배경이 이상하게 좀 남아있는 이쁘지 않은 모양이 됩니다.

궁금하면 주석하고 해보세요!

 

자 이제 메인에서 사용 해볼게요.

 

사용하고자하는 클래스에서 전역변수로

 

var dialog : CustomDialog? = null

dialog = CustomDialog(this)

이렇게 만들어주시고!

 

dialog!!.start("!보여지고 싶은 메세지!",mode값(int),dialogMode값(int),this@MainActivity2)

원하시는 곳에서 이렇게 적어주시면! 이제 다이얼로그가 땋 나옵니다!

 

궁금하신건 댓글 달아주세요!