티스토리 뷰

알려주는 이야기/안드로이드

안드로이드 다이얼로그 예제

임리프 2020. 7. 2. 12:12
반응형

다이얼로그?

사용자에게 메시지를 전달할 때 사용을 하며 다이얼로그가 화면에 뜰 때는 주변의 뷰를 누를 수 없다.

메시지 전달이나 입력을 받기 위해 사용을 한다.

 

 

기본 다이얼로그 시작하기

 

다이얼로그 화면 띄우기

 

AlertDialog.Builder(this)
    .setTitle("제목")
    .setMessage("내용")
    .setIcon(R.mipmap.ic_launcher)
    .setNeutralButton("닫기", null)
    .setPositiveButton("확인", null)
    .setNegativeButton("취소", null)
    .show()

다이얼 로그를 만드는 기본적인 코드입니다.

 

  • setTitle : 다이얼로그 제목
  • setMessage : 다이얼로그 내용
  • setIcon : 다이얼로그 이미지
  • setNeutralButton : 다이얼로그 중립 버튼
  • setPositiveButton : 다이얼로그 확인 버튼
  • setNegativeButton : 다이얼로그 취소 버튼

 

 

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

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

</LinearLayout>

 

 

다이얼로그 클릭 이벤트 추가하기

 

inner class DialogListener1: DialogInterface.OnClickListener {
    override fun onClick(dialog: DialogInterface?, which: Int) {
        when(which) {
            DialogInterface.BUTTON_POSITIVE -> textView.text = "POSITIVE 버튼 클릭"
            DialogInterface.BUTTON_NEGATIVE -> textView.text = "NEGATIVE 버튼 클릭"
            DialogInterface.BUTTON_NEUTRAL -> textView.text = "NEUTRAL 버튼 클릭"
        }
    }
}

DialogInterface.OnClickListener를 상속받고 있는 listener 클래스입니다.

 

.setNeutralButton("닫기", DialogListener1())
.setPositiveButton("확인", DialogListener1())
.setNegativeButton("취소", DialogListener1())

그리고 각 버튼의 listener에 만든 listener를 넣어줍니다.

 

 

 

버튼 클릭 시 동작을 하는 것을 확인할 수 있습니다.

 

 

커스텀 다이얼로그 시작하기

 

커스텀 다이얼로그?

기본 다이얼로그에 View를 설정하여 자유로운 모양을 표현할 수 있습니다.

 

 

XML 만들기

 

다이얼로그에 띄어줄 view를 dialog라고 생성하였습니다.

 

dialog.xml

// dialog.xml

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

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

 

activity_main.xml

// activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button2" />

</LinearLayout>

activity_main에서는 버튼 하나를 추가하였습니다.

 

 

 

코드 작성하기

 

MainActivity.kt

button2.setOnClickListener {
    AlertDialog.Builder(this)
        .setTitle("커스텀 다이얼로그 제목")
        .setIcon(R.mipmap.ic_launcher)
        .setView(layoutInflater.inflate(R.layout.dialog, null))
        .setPositiveButton("확인", DialogListener2())
        .setNegativeButton("취소", DialogListener2())
        .show()
}

 

MainActivity에서 위와 같이 setView를 설정을 하게 되면 아래와 같이 커스텀 다이얼로그가 뜨는 것을 확인할 수 있습니다.

 

 

 

 

이제 EditText에 입력을 하면 textView에 입력한 값을 띄어주는 것을 구현할 것입니다.

 

inner class DialogListener2: DialogInterface.OnClickListener {
    override fun onClick(dialog: DialogInterface?, which: Int) {
        val alert = dialog as AlertDialog
        val editText1: EditText? = alert.findViewById(R.id.editText1)
        val editText2: EditText? = alert.findViewById(R.id.editText2)

        textView.text = "${editText1?.text} + ${editText2?.text}"
    }
}

 

listener2라는 클래스를 만들어주고 dialog를 AlerDialog로 가져와 findViewById로 editText의 값을 가져옵니다.

 

 

 

 

 

DatePicker 다이얼로그 구현하기

 

DataPicker?

다이얼로그를 통해 날짜를 선택할 수 있습니다.

 

 

XML 만들기

 

activity_main.xml

// activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button3" />

</LinearLayout>

activity_main에 버튼을 하나 추가합니다.

 

 

 

코드 작성하기

 

button3.setOnClickListener {
    val calendar = Calendar.getInstance()
    val year = calendar.get(Calendar.YEAR)
    val month = calendar.get(Calendar.MONTH)
    val day = calendar.get(Calendar.DAY_OF_MONTH)

    DatePickerDialog(this, DatePickerListener(), year, month, day).show()
}



inner class DatePickerListener: DatePickerDialog.OnDateSetListener {
    override fun onDateSet(view: DatePicker?, year: Int, month: Int, dayOfMonth: Int) {
        textView.text = "$year.$month.$dayOfMonth"
    }
}

 

 

 

 

TimePicker 다이얼로그 구현하기

 

TimePicker?

시간을 선택할 수 있는 다이얼로그입니다.

 

 

XML 만들기

 

activity_main.xml

// activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    ...
    
    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button4" />

</LinearLayout>

activity_main에 버튼을 또 하나 추가합니다.

 

 

 

코드 작성하기

 

button4.setOnClickListener {
    val calendar = Calendar.getInstance()
    val hour = calendar.get(Calendar.HOUR)
    val minute = calendar.get(Calendar.MINUTE)

    TimePickerDialog(this, TimePickerListener(), hour, minute, false).show()
}



inner class TimePickerListener: TimePickerDialog.OnTimeSetListener {
    override fun onTimeSet(view: TimePicker?, hourOfDay: Int, minute: Int) {
        textView.text = "$hourOfDay 시 $minute 분"
    }
}

 

 

 

 

 

 

ProgressDialog 다이얼로그 구현하기

 

ProgressDialog?

작업 중일 때 사용자가 다른 것을 할 수 없도록 하기 위한 다이얼로그입니다. 간단히 말해서 로딩 화면입니다.

 

 

XML 만들기

 

activity_main.xml

// activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    ...
    
    <Button
        android:id="@+id/button5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button5" />

</LinearLayout>

activity_main에 버튼을 또 하나 추가합니다.

 

 

 

코드 작성하기

 

var progress: ProgressDialog? = null

button5.setOnClickListener {
    progress = ProgressDialog.show(this, "제목", "내용")
}

 

위와 같이 작성을 하게 되면 실행은 합니다.

 

하지만 멈추지 않고 계속 혼자 돌아가게 됩니다.

 

이제 프로그래스 다이얼로그를 끄는 코드를 핸들러를 사용하여 작성하겠습니다.

 

 

button5.setOnClickListener {
    progress = ProgressDialog.show(this, "제목", "내용")

    val handler = Handler()

    val thread = Runnable { progress?.cancel() }

    handler.postDelayed(thread, 5000)
}

 

thread를 사용하여 5초가 지나면 프로그래스 다이얼로그를 종료하는 코드입니다.

 

 

 

5초가 지나고 꺼지는 것을 확인할 수 있습니다.

 

 

기본 리스트 다이얼로그 구현하기

 

리스트 다이얼로그?

다이얼로그에 리스트뷰를 표시할 수 있습니다.

다이얼로그에는 3개의 버튼을 배치할 수 있는데 그 이상을 배치하고 싶을 경우 사용하면 됩니다.

 

 

XML 만들기

 

activity_main.xml

// activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    ...
    
    <Button
        android:id="@+id/button6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button6" />

</LinearLayout>

activity_main에 버튼을 또 하나 추가합니다.

 

 

 

 

코드 작성하기

val data1 = arrayOf("1번째", "2번째", "3번째", "4번째", "5번째", "6번째", "7번째")

button6.setOnClickListener {
    AlertDialog.Builder(this)
        .setTitle("리스트 다이얼로그 제목")
        .setNegativeButton("취소", ListListener())
        .setItems(data1, ListListener())
        .show()
}


inner class ListListener: DialogInterface.OnClickListener {
    override fun onClick(dialog: DialogInterface?, which: Int) {
        textView.text = "${which + 1}번째 선택"
    }
}

 

기본 다이얼로그와 같은 코드이지만, setItems로 리스트 뷰에 들어갈 아이템을 넣어주었습니다.

코드를 작성하면 아래와 같이 동작하는 것을 확인할 수 있습니다.

 

 

 

 

커스텀 리스트 다이얼로그 구현하기

 

XML 만들기

 

activity_main.xml

// activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    ...
    
    <Button
        android:id="@+id/button7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextAppearance.AppCompat.Large"
        android:text="Button7" />

</LinearLayout>

activity_main에 버튼을 또 하나 추가합니다.

 

 

custom_dialog.xml

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

    <TextView
        android:id="@+id/list_textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        style="@style/TextAppearance.AppCompat.Large"/>

    <TextView
        android:id="@+id/list_textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        style="@style/TextAppearance.AppCompat.Large"/>

</LinearLayout>

리스트 뷰에 지정할 레이아웃인custom_dialog.xml를 만들어서 위의 코드를 작성합니다.

 

코드 작성하기

val data1 = arrayOf("1번째", "2번째", "3번째", "4번째", "5번째", "6번째", "7번째")

val data2 = arrayOf("1111", "2222", "3333", "4444", "5555", "6666", "7777")


button7.setOnClickListener {

    val list = ArrayList<HashMap<String, Any>>()

    for (i in data1.indices) {
        val map = HashMap<String, Any>()

        map.put("data1", data1[i])
        map.put("data2", data2[i])

        list.add(map)
    }

    val keys = arrayOf("data1", "data2")
    val ids = intArrayOf(R.id.list_textView1, R.id.list_textView2)

    val adapter = SimpleAdapter(this, list, R.layout.custom_dialog, keys, ids)


    AlertDialog.Builder(this)
        .setTitle("커스텀 리스트 다이얼로그 제목")
        .setAdapter(adapter, CustomListListener())
        .setNegativeButton("취소", null)
        .show()
}
        
        

inner class CustomListListener: DialogInterface.OnClickListener {
    override fun onClick(dialog: DialogInterface?, which: Int) {
        textView.text = "${which + 1}번째 선택"
    }
}

커스텀 리스트 뷰 때와 동일한 코드를 사용하여 작성하였습니다.

 

 

 

 

예제 코드

https://github.com/Im-Tae/Blog_Example/tree/master/Android/DialogExample

반응형
저작자표시

'알려주는 이야기 > 안드로이드' 카테고리의 다른 글

안드로이드 option menu  (0) 2020.08.14
안드로이드 스튜디오 에뮬레이터에서 localhost 접속  (0) 2020.07.08
안드로이드 커스텀 어댑터  (0) 2020.07.01
안드로이드 Lottie 라이브러리  (0) 2020.07.01
안드로이드 뷰 페이저  (0) 2020.07.01
댓글