[Android] 다이얼로그 정리

Minjun Kim·2023년 8월 22일
androidlecture
0

Android

목록 보기
20/47
post-thumbnail

📝 스파르타코딩클럽의 '내일배움캠프' 지급 강좌를 정리한 글 입니다.

AlerDialog 클래스를 사용하면 대부분의 다이얼로그 만들 수 있다.

📌 다이얼로그의 영역

1. 제목

  • 생략 가능

2. 콘텐츠 영역

  • 메시지, 목록 또는 커스텀 레이아웃도 표시가능

3. 작업 버튼

  • 대화 상자 하나에 작업 버튼이 3개를 초과하면 안됨

📚 다이얼로그 종류

  • 기본 다이얼로그(AlertDialog)

  • 커스텀 다이얼로그(CustomDialog)

  • 날짜 다이얼로그(DatePickerDialog)

  • 시간 다이얼로그(TimePickerDialog)

  • 진행 다이얼로그(ProgressDialog)

🧩 실습 예제

먼저 각 다이얼로그로 이동하는 레이아웃을 생성한다.

  • 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/btn1_alert"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="dialog" />

    <Button
        android:id="@+id/btn2_custom"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="custom dialog" />

    <Button
        android:id="@+id/btn3_date"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Date picker dialog" />

    <Button
        android:id="@+id/btn4_time"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Time picker dialog" />

    <Button
        android:id="@+id/btn5_porgress"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Progress dialog" />

</LinearLayout>

1. 기본 다이얼로그(AlertDialog)

  • MainActivity.kt
package com.example.test

class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

		// 1. 기본 다이얼로그
		binding.btn1Alert.setOnClickListener {
			var builder = AlertDialog.Builder(this)
			builder.setTitle("기본 다이얼로그 타이틀")
			builder.setMessage("기본 다이얼로그 메세지")
			builder.setIcon(R.mipmap.ic_launcher)

			// 각 버튼을 클릭 시 TextView에 문자열 출력
			val listener = object : DialogInterface.OnClickListener {
				override fun onClick(p0: DialogInterface?, p1: Int) {
					when (p1) {
						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. 커스텀 다이얼로그(CustomDialog)

  • 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: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>
</LinearLayout>

  • MainActivity.kt
package com.example.test

class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

		// 2. 커스텀 다이얼로그
		binding.btn2Custom.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에 해당 AlerDialog가 들어온다.
			val listener = DialogInterface.OnClickListener { p0, p1 ->
				val alert = p0 as AlertDialog
				val edit1: EditText? = alert.findViewById(R.id.editText)
				val edit2: EditText? = alert.findViewById(R.id.editText2)

				binding.tvTitle.text = "이름 : ${edit1?.text}"
				binding.tvTitle.append(" / 나이 : ${edit2?.text}")
			}

			builder.setPositiveButton("확인", listener)
			builder.setNegativeButton("취소", null)

			builder.show()
		}
	}
}


3. 날짜 다이얼로그(DatePickerDialog)

AlerDialog 가 아닌 DatePickerDialog 를 사용한다.

  • MainActivity.kt
package com.example.test

class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

		// 3. 날짜 다이얼로그
		binding.btn3Date.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)

			val listener = DatePickerDialog.OnDateSetListener { datePicker, i, i2, i3 ->
				// i년 i2월 i3일
				binding.tvTitle.text = "${i}년 ${i2 + 1}월 ${i3}일"
			}

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


4. 시간 다이얼로그(TimePickerDialog)

  • MainActivity.kt
package com.example.test

class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

		// 4. 시간 다이얼로그
		binding.btn4Time.setOnClickListener {
			val calendar = Calendar.getInstance()
			val hour = calendar.get(Calendar.HOUR)
			val minute = calendar.get(Calendar.MINUTE)

			val listener = TimePickerDialog.OnTimeSetListener { timePicker, i, i2 ->
				binding.tvTitle.text = "${i}시 ${i2}분"
			}

			// true 일 경우 24시간 으로 표시
			val picker = TimePickerDialog(this, listener, hour, minute, false)
			picker.show()
		}
	}
}


5. 진행 다이얼로그(ProgressDialog)

  • MainActivity.kt
package com.example.test

class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

		// 5. 프로그래스 다이얼로그
		binding.btn5Porgress.setOnClickListener {
			// 권장하지는 않지만 사용은 가능하다.
			val pro = ProgressDialog.show(this, "타이틀입니다.", "메시지입니다.")

			// 핸들러를 통해서 종료 작업을 한다.
			val handler = Handler()
			val thread = Runnable { pro?.cancel() }
			handler.postDelayed(thread, 5000)   // 딜레이 5초
		}
	}
}

  • 위 코드를 작성하면 ProgressDialog.show() 와 Handler() 같이 deprecated 경고문이 뜰 것이다.

  • 예전에는 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
package com.example.test

class MainActivity : AppCompatActivity() {
	private val binding by lazy { ActivityMainBinding.inflate(layoutInflater) }

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(binding.root)

		// 5. 프로그래스 다이얼로그 다른 방식 (커스텀과 비슷)
		binding.btn5Porgress.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()
		}
	}
}
  • 종료 명령어는 builder.dismiss() 이다.

profile
Minjun Kim
응애 나 아기 뉴비
이전 포스트

[Android] Fragment 정리

다음 포스트

[Android] 알림 (Notification) 정리

0개의 댓글