728x90
다이얼로그 (Dialog)
- 사용자에게 결정을 내리거나 추가정보를 입력하라는 메시지를 표시하는 작은 창
- 다이얼로그는 화면을 가득 채우지 않으며 보통은 사용자가 다음으로 진행하기 전에 조치를 취해야 하는
모달 이벤트에 사용된다
1. 다이얼로그 구조
- 제목
- 콘텐츠 영역에 상세한 메시지, 목록 또는 맞춤 레이아웃이 채워져 있는 경우에 사용한다
- 단순 메시지 또는 질문을 나타내는 경우에는 없어도 된다 - 콘텐츠 영역
- 메시지, 목록 또는 다른 맞춤 레이아웃을 표시할 수 있다 - 작업 버튼
- 대화 상자 하나에 작업 버튼이 세 개를 초과하면 안 된다
2. 다이얼로그의 만들어보기
우선 뷰바인딩 추가부터..
+ activity_main.xml에 만들어 볼 다이얼로그들을 띄울 버튼 생성
activity_main.xml
더보기
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
<Button
android:id="@+id/btn_alert"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Alert Dialog" />
<Button
android:id="@+id/btn_custom"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Custom Dialog" />
<Button
android:id="@+id/btn_date"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Date picker Dialog" />
<Button
android:id="@+id/btn_time"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Time picker Dialog" />
<Button
android:id="@+id/btn_progress"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Progress Dialog" />
</LinearLayout>
1) 기본 다이얼로그 (Alert Dialog) / MainActivity.kt
더보기
package com.android.ex_view3_dialogue
import android.content.DialogInterface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.app.AlertDialog
import androidx.core.os.bundleOf
import com.android.ex_view3_dialogue.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(binding.root)
// 1. 기본 다이얼로그
binding.btnAlert.setOnClickListener {
var builder = AlertDialog.Builder(this)
// 제목
builder.setTitle("기본 다이얼로그 타이틀")
// 콘텐츠 영역
builder.setMessage("기본 다이얼로그 메시지")
// 제목옆의 아이콘
builder.setIcon(R.mipmap.ic_launcher)
// 다이얼로그안의 버튼 클릭시 할 작업
val listener = object : DialogInterface.OnClickListener {
override fun onClick(dialog: DialogInterface?, which: Int) {
when (which) {
DialogInterface.BUTTON_POSITIVE ->
binding.tvTitle.text = "BUTTON_POSITIVE"
DialogInterface.BUTTON_NEUTRAL ->
binding.tvTitle.text = "BUTTON_NEUTRAL"
DialogInterface.BUTTON_NEGATIVE ->
binding.tvTitle.text = "BUTTON_NEGATIVE"
}
}
}
builder.setPositiveButton("Positive", listener)
builder.setNegativeButton("Negative", listener)
builder.setNeutralButton("Neutral", listener)
builder.show()
}
}
}
2) 커스텀 다이얼로그 (Custom Dialog)
dialog.xml 추가
더보기
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="Name" />
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="AGE" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.kt
더보기
// 2. 커스텀 다이얼로그
binding.btnCustom.setOnClickListener {
val builder = AlertDialog.Builder(this)
builder.setTitle("커스텀 다이얼로그")
builder.setIcon(R.mipmap.ic_launcher)
val v1 = layoutInflater.inflate(R.layout.dialog, null)
builder.setView(v1)
// p0에 해당 AlertDialog가 들어온다. findViewById를 통해 view를 가져와서 사용한다
val listener = DialogInterface.OnClickListener { p0, p1 ->
val alert = p0 as AlertDialog
val edit1: EditText? = alert.findViewById<EditText>(R.id.editText)
val edit2: EditText? = alert.findViewById<EditText>(R.id.editText2)
binding.tvTitle.text = "이름 : ${edit1?.text}"
binding.tvTitle.append(" / 나이 : ${edit2?.text}")
}
builder.setPositiveButton("확인", listener)
builder.setNegativeButton("취소", null)
builder.show()
}
3) 날짜 다이얼로그 (DatePickerDialog)
MainActivity.kt
더보기
// 3. 날짜 다이얼로그
binding.btnDate.setOnClickListener {
// Caleder()를 이용해서 날짜를 가져올 수 있다
val calender = Calendar.getInstance()
val year = calender.get(Calendar.YEAR)
val month = calender.get(Calendar.MONTH)
val day = calender.get(Calendar.DAY_OF_MONTH)
val listener = DatePickerDialog.OnDateSetListener { datePicker, year, month, dayOfMonth ->
binding.tvTitle.text = "${year}년 ${month+1}월 ${dayOfMonth}일"
}
var picker = DatePickerDialog(this, listener, year, month, day)
picker.show()
}
4) 시간 다이얼로그 (TimeDialog)
MainActivity.kt
더보기
// 4. 시간 다이얼로그
binding.btnTime.setOnClickListener {
val calendar = Calendar.getInstance()
val hour = calendar.get(Calendar.HOUR)
val minute = calendar.get(Calendar.MINUTE)
val listener = TimePickerDialog.OnTimeSetListener{ timePicker, hour, minute ->
binding.tvTitle.text = "${hour}시 ${minute}분"
}
val picker = TimePickerDialog(this,listener, hour, minute, false)
picker.show()
}
5) 진행 다이얼로그 (ProgressDialog)
progressbar.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">
<ProgressBar
android:id="@+id/progressbar"
android:layout_width="match_parent"
android:layout_height="76dp"
android:layout_gravity="center"
android:layout_marginTop="48dp"
android:indeterminate="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="loading..."
android:textSize="16sp" />
</LinearLayout>
MainActivity.kt
더보기
// 5. 진행 다이얼로그
binding.btnProgress.setOnClickListener {
val builder = AlertDialog.Builder(this)
builder.setTitle("프로그래스바")
builder.setIcon(R.mipmap.ic_launcher)
val v1 = layoutInflater.inflate(R.layout.progressbar, null)
builder.setView(v1)
builder.show()
}
728x90
'코틀린(Kotlin) > TIL' 카테고리의 다른 글
[코틀린(Kotlin)] 뒤로가기(back) 버튼 클릭 시 다이얼로그 띄우기 onBackPressedCallback (0) | 2024.01.08 |
---|---|
[코틀린(Kotlin)] 알림 (2) | 2024.01.07 |
[코틀린(Kotlin)] 프래그먼트 데이터 전달 (0) | 2024.01.07 |
[코틀린(Kotlin)] 프래그먼트 (Fragment) (0) | 2024.01.07 |
[코틀린(Kotlin)] 리사이클러 뷰 (RecyclerView) (1) | 2024.01.05 |