코틀린 공부21

다양한 다이얼로그

 다이얼로그란 사용자와 상호 작용하는 대화 상자를 의미합니다.

토스트 메시지 띄우기

 

토스트(toast)는 화면 아래쪽에 잠깐 보였다가 사라지는 문자열 다이얼로그를 말합니다. 토스트는 Toast의 함수인 makeText() 함수로 만듭니다.

open static fun makeText(context: Context!, text: CharSequence!, duration: Int): Toast!

open static fun makeText(context: Context!, resId: Int, duration: Int): Toast!

makeText() 사용 예시

val toast1 = Toast.makeText(this,"종료하려면 한번더 눌러주세요!",Toast.LENGTH_SHORT)
toast1.show()

Toast.makeText(this,"종료하려면 한번더 눌러주세요!",Toast.LENGTH_SHORT).show()

세 번째 매개변수인 duration은 토스트가 화면에 출력되는 시간을 의미합니다. LENGTH_LONG과  LENGTH_SHORT를 사용합니다.

val LENGTH_LONG: Int // 3초

val LENGTH_SHORT: Int // 5초

 

토스트가 화면에 보이거나 사라지는 순간을 콜백으로 감지해 특정 로직을 수행하게 할 수도 있습니다.  콜백 기능은 API 레벨 30 버전에서 추가되었기 때문에 API레벨 호환성을 고려해서 작성해야 합니다.

참고

https://developer.android.com/guide/topics/ui/notifiers/toasts?hl=ko 

토스트 메시지 개요  |  Android 개발자  |  Android Developers

---

날짜 또는 시간 입력받기

 

앱에서 사용자에게 날짜나 시간을 입력받는 데 사용하는 다이얼로그를 피커 다이얼로그라고 합니다. 날짜를 입력받을 때는 DatePickerDialog를, 시간을 입력받을 때는 TimePickerDialog를 사용합니다.

 

DatePickerDialog생성자

DatePickerDialog(context: Context, listener: DatePickerDialog.OnDateSetListener?, year: Int , month: Int, dayOfMonth: Int)

생성자의 두 번째 매개변수인 listener는 DatePickerDialog.OnDateSetListener구현 객체를 동록 하면 다이얼로그에서 사용자가 설정한 날짜를 콜백 함수로 얻을 수 있습니다. 나머지 Int형 매개변수들은 처음에 보이는 날짜 값입니다. month 값은 0~11까지 넣을 수 있고 여기서 0은 1월을 의미합니다.

 

DatePickerDialog사용 예시

var calendar = Calendar.getInstance()
var year = calendar.get(Calendar.YEAR)
var month = calendar.get(Calendar.MONTH)
var day = calendar.get(Calendar.DAY_OF_MONTH)

var listener = DatePickerDialog.OnDateSetListener { _, i, i2, i3 ->
    textView1.text = "${i}년 ${i2 + 1}월 ${i3}일"
}

var picker = DatePickerDialog(this, listener, year, month, day)
picker.show()

 

TimePickerDialog생성자

TimePickerDialog(context: Context!, listener: TimePickerDialog.OnTimeSetListener!, hourOfDay: Int, minute: Int, is24HourView: Boolean)

생성자의 두 번째 매개변수인 listener는 DatePicker와 마찬가지로 구현 객체를 동록 하면 다이얼로그에서 사용자가 설정한 시간을 콜백 함수로 얻을 수 있습니다. 나머지 Int형 매개변수들은 처음에 보이는 시간 값입니다. 

 

 

 

TimePickerDialog사용 예시

var calendar = Calendar.getInstance()
var hour = calendar.get(Calendar.HOUR)
var minute = calendar.get(Calendar.MINUTE)

var listener = TimePickerDialog.OnTimeSetListener { _, i, i2 ->
    textView1.text = "${i}시 ${i2}분"
}

// boolean is24HourView : true일 때 24시간,false일 때 12시간
var picker = TimePickerDialog(this, listener, hour, minute, false)

picker.show()

 

참고

https://developer.android.com/reference/android/app/DatePickerDialog?hl=ko

https://developer.android.com/reference/android/app/TimePickerDialog?hl=ko 

https://ddolcat.tistory.com/581

 

[android : kotlin] 코틀린 다이얼로그 (Dialog) 사용 예제 - AlertDialog, DatePickerDialog, TimePickerDialog

 

---

알림 창 띄우기

 

다이얼로그의 기본은 AlertDialog입니다. 위에서 설명한 picker다이얼로그들 또한 AlertDialog의 하위 클래스입니다.

알림 창은 크게 제목, 내용, 버튼 영역으로 3가지로 구분할 수 있습니다. 각 영역을 설정하지 않을 경우 그 영역은 표시되지 않습니다.

AlertDialog의 생성자는 접근 제한자가 protected로 선언돼서 객체를 직접 생성할 수는 없습니다. 그 대신 AlertDialog.Builder를 제공하므로 이 빌더를 생성하고 빌더의 세터 함수로 정보를 지정할 수 있습니다.

open fun setIcon(iconId: Int): AlertDialog.Builder!
open fun setTitle(title: CharSequence!): AlertDialog.Builder!
open fun setMessage(message: CharSequence!): AlertDialog.Builder!

알림 창에 버튼을 지정하는 함수

open fun setPositiveButton(text: CharSequence!, listener: DialogInterface.OnClick Listener!): AlertDialog.Builder!
open fun setNegativeButton(text: CharSequence!, listener: DialogInterface.OnClick Listener!): AlertDialog.Builder!
open fun setNeutralButton(text: CharSequence!, listener: DialogInterface.OnClick Listener!): AlertDialog.Builder!

각 함수의 첫 번째 매개변수는 버튼의 문자열이며 두 번째 매개변수는 사용자가 버튼을 클릭했을 때 처리할 이벤트 핸들러입니다.  만약 버튼을 클릭했을 때 처리할 내용이 없다면 null을 대입하면 됩니다. null대입시 버튼을 클릭하면 창이 닫힙니다. 그리고 이 세 함수들로 구분하는 이유는 어떤 버튼이 클릭되었는지 구분하기 위해서입니다.

목록을 제공하고 이 중 하나를 선택받는 알림 창을 만들고자 한다면 setItems(), setMultiChoiceItems(), setSingleChoiceItems() 함수를 이용합니다. 함수에서 첫 번째 매개변수는 배열 정보이며 이곳의 문자열이 목록에 출력됩니다.

open fun setItems(items: Array!, listener: DialogInterface.On ClickListener!): AlertDialog.Builder!
open fun setMultiChoiceItems(items: Array!, checkedItems: BooleanArray!, listener: DialogInterface.OnMultiChoiceClickListener!): AlertDialog.Builder!
open fun setSingleChoiceItems(items: Array!, checkedItem: Int, listener: DialogInterface.OnClickListener!): AlertDialog.Builder!

 

setItems() 사용 예시

d_button1.setOnClickListener {
    var builder = AlertDialog.Builder(this)
    builder.setTitle("좋아하는 과일을 선택하세요.")
    builder.setNegativeButton("취소", null)

	var dataArr = arrayOf("배", "귤", "사과", "자두", "복숭아")
    var listener1 = DialogInterface.OnClickListener { _, which ->
        textView1.text = "${dataArr[which]}"
    }

    builder.setItems(dataArr, listener1)

    builder.show()
}

 

setMultiChoiceItems() 함수는 다중 선택을 위한 체크박스가 함께 출력되는 항목입니다.

setMultiChoiceItems() 사용 예시

d_button2.setOnClickListener {
    var selectItems = ArrayList<Int>()

	var builder = AlertDialog.Builder(this)
    builder.setTitle("좋아하는 과일을 선택하세요.(중복 선택 가능)")
    var dataArr = arrayOf("배", "귤", "사과", "자두", "복숭아")
    builder.setMultiChoiceItems(
        dataArr,
        null,
        object : DialogInterface.OnMultiChoiceClickListener {
            override fun onClick(dialog: DialogInterface?, which: Int, isChecked: Boolean) {
                if (isChecked) {
                    selectItems.add(which)
                } else if (selectItems.contains(which)) {
                    selectItems.remove(which)
                }
            }

        })


    var listener2 = DialogInterface.OnClickListener { _, which ->
        textView1.text = ""
        for (i in 0 until selectItems.size) {
            textView1.append("\n($i) : ${dataArr[selectItems[i]]}")
        }
    }

    builder.setPositiveButton("확인", listener2)

    builder.setNegativeButton("취소", null)

    builder.show()
}

setSingleChoiceItems() 함수는 하나만 선택할 수 있는 라디오 버튼으로 구성된 항목을 만들어 줍니다

setSingleChoiceItems() 사용 예시

d_button3.setOnClickListener {
    var selectItem: Int = 0

    var builder = AlertDialog.Builder(this)
    builder.setTitle("좋아하는 과일을 선택하세요.(택1)")
	var dataArr = arrayOf("배", "귤", "사과", "자두", "복숭아")
    builder.setSingleChoiceItems(
        dataArr, 0
    ) { _, which -> selectItem = which }


    var listener2 = DialogInterface.OnClickListener { _, _ ->
        textView1.text = "${dataArr[selectItem]}"
    }

    builder.setPositiveButton("확인", listener2)

    builder.setNegativeButton("취소", null)

    builder.show()
}

빌더의 setCancelable() 함수는 사용자가 기기의 뒤로 가기 버튼을 눌렀을 때, 다이얼로그의 setCanceledOnTouchOutside() 함수는 알림 창의 바깥 영역을 터치했을 때 매개변수가 true이면 닫고 false이면 닫지 않습니다.

setCancelable(cancelable: Boolean)

참고

https://developer.android.com/reference/android/app/AlertDialog.Builder

AlertDialog.Builder  |  Android Developers

https://ddolcat.tistory.com/582

[android : kotlin] 코틀린 ( 커스텀 리스트형, 다중 선택형, 단일 선택형) 다이얼로그 사용 예제 -setIte

 

---

커스텀 다이얼로그 만들기

 

개발자가 원하는 형태로 창을 구성하고 싶을 때 사용하는 것을 커스텀 다이얼로그라고 합니다. 커스텀 다이얼로그 또한  AlertDialog를 이용합니다. LayoutInflater 클래스는 레이아웃 XML 파일을 코드에서 초기화(흔히 전개라고도 표현)하는 기능을 제공합니다.

초기화를 해주는 작업으로는...

1. get SystemService() 함수로 LayoutInflater를 얻습니다.
2. inflate() 함수를 호출하면서 초기화할 레이아웃 XML 파일 정보를 매개변수로 전달

val inflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val rootView = inflater.inflate(R.layout.activity_one, null)

뷰 바인딩 기법을 이용한다면 XML 초기화 코드를 조금 더 쉽게 작성할 수 있습니다.

val binding = ActivityOneBinding.inflate(layoutInflater)
val rootView = binding.root

inflate() 함수를 호출하면 매개변수로  layoutInflater 객체를 전달만 해주면 자동으로 초기화되고 루트 뷰 객체를 얻을 수 있습니다.

 

커스텀 다이얼로그를 만드는 방법은 다이얼로그를 구성하는 레이아웃 XML 파일을 만들어야 합니다. 그 후 이 XML 파일을 LayoutInflater로 초기화해서 다이얼로그에 적용하게 되면 Alert Dialog의 setView() 함수에 매개변수로 뷰 객체를 전달하여 창의 내용 영역에 출력할 수 있게 됩니다.

---