728x90
이번 포스팅에선 코틀린으로 커스텀 다이얼로그를 만드는 방법에 대해 포스팅하겠습니다.
자바로 만드는 방법에 대해선 아래 포스팅을 참고해 주세요.
이 포스팅에서 사용된 모든 예제 코드는 아래 주소에서 확인하실 수 있습니다.
stickode.com/detail.html?no=2147
먼저 메인 액티비티의 xml을 만들겠습니다. 텍스트뷰 하나를 놓을 건데, 다이얼로그에서 이름을 입력하고 완료 버튼을 누르면 입력한 문자가 텍스트뷰에 들어가도록 할 겁니다.
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:padding="16dp"
tools:context=".MainActivity">
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="이름이 무엇인가요?"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
그 다음 다이얼로그의 xml을 만들어줍니다. 여기서 만든 모양대로 다이얼로그가 만들어지게 됩니다.
저는 EditText와 버튼 2개가 있는 형태의 다이얼로그를 만들겠습니다.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="@+id/name_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:hint="여기에 이름을 입력해 주세요"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:layout_marginEnd="20dp"
android:orientation="horizontal">
<Button
android:id="@+id/cancel_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="취소"/>
<Button
android:id="@+id/finish_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="완료"/>
</LinearLayout>
</LinearLayout>
이제 이 xml을 사용하는 다이얼로그 코틀린 파일을 만들어줘야 합니다.
클릭 리스너를 정의하고 버튼별 클릭 리스너를 정의해줍니다.
import android.app.Dialog
import android.content.Context
import android.view.WindowManager
import android.widget.EditText
import kotlinx.android.synthetic.main.custom_dialog.*
class CustomDialog(context: Context)
{
private val dialog = Dialog(context)
private lateinit var onClickListener: OnDialogClickListener
fun setOnClickListener(listener: OnDialogClickListener)
{
onClickListener = listener
}
fun showDialog()
{
dialog.setContentView(R.layout.custom_dialog)
dialog.window!!.setLayout(WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT)
dialog.setCanceledOnTouchOutside(true)
dialog.setCancelable(true)
dialog.show()
val edit_name = dialog.findViewById<EditText>(R.id.name_edit)
dialog.cancel_button.setOnClickListener {
dialog.dismiss()
}
dialog.finish_button.setOnClickListener {
onClickListener.onClicked(edit_name.text.toString())
dialog.dismiss()
}
}
interface OnDialogClickListener
{
fun onClicked(name: String)
}
}
이제 메인 액티비티 파일을 작성해야 합니다. 지금 이 상태로 앱을 빌드하면 텍스트뷰가 화면에 보이는데, 이걸 눌러도 아무 반응도 없습니다.
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity()
{
override fun onCreate(savedInstanceState: Bundle?)
{
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
textview.setOnClickListener {
val dialog = CustomDialog(this)
dialog.showDialog()
dialog.setOnClickListener(object : CustomDialog.OnDialogClickListener {
override fun onClicked(name: String)
{
textview.text = name
}
})
}
}
}
다이얼로그 코틀린 파일에서 만든 인터페이스를 액티비티에서 사용해서, 다이얼로그에서 입력한 내용을 메인 액티비티의 텍스트뷰에 setText()하는 간단한 코드입니다.
여기까지 완성했다면 빌드해서 확인해 봅시다.
다이얼로그에서 입력한 내용이 액티비티의 텍스트뷰에 잘 들어가는 걸 볼 수 있습니다.
'안드로이드 코틀린' 카테고리의 다른 글
[Kotlin][Android] 달력 만들기 (1) | 2021.06.17 |
---|---|
[Kotlin][Android] 스톱워치 만들기 (0) | 2021.06.07 |
[Kotlin][Android] 그래프 만들기 (6) | 2021.06.04 |
[Kotlin][Android] SST(SpeechToText) 기능 구현하기 (0) | 2021.05.31 |
[Kotlin][Android] 앱 잠금 화면 만들기 (1) | 2021.05.30 |