(22) 독학으로 앱 만들어보기 (데이터 입력 받기, Custom Dialog)

오늘은 사용자의 입력을 받을 수 있는 기능에 대해 설명한다. 추가 버튼을 누르면 입력 화면이 나오는데 그 화면을 Dialog이라고 부르고 화면을 내 마음대로 만든 것을 Custom Dialog이라고 한다. 시연 영상 보고, 바로 코드와 설명으로 넘어간다. 

 

※구글에 dialog를 검색해서 의미를 보면 이해에 도움이 된다.

구현 코드

 

btnInsertGoal 코드만 보면 된다. 처음 onCreate 함수에서 findViewById를 통해 레이아웃을 변수로 만들고 클릭 시 insertGoal() 함수가 실행되도록 setOnClickListner에 지정을 해주었다. 버튼 클릭에 대한 이해가 필요하다면 아래 글을 참고하면 도움이 된다.

2022.11.19 - [개발] - (15) 독학으로 앱 만들어보기 (버튼 클릭하면 짜잔~)

(15) 독학으로 앱 만들어보기 (버튼 클릭하면 짜잔~)

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.goal_list)
        mContext = this
        dbHelper = DBHelper(this)

        val bttInsertGoal : Button = findViewById(R.id.btn_insert_goal)
        val btnDeleteGoal : Button = findViewById(R.id.btn_del_goal)

        bttInsertGoal.setOnClickListener { insertGoal() }
        btnDeleteGoal.setOnClickListener { deleteGoal() }

        initRecycler()
        this.startForegroundService(Intent(this, LockScreenService::class.java))
        val intent = Intent(this,LockScreenService::class.java)
        ContextCompat.startForegroundService(this,intent)
    }

    private fun insertGoal() {
        lateinit var tmpGoalContent:String
        val dialog = GoalDialog(this)
        dialog.showDialog()
        dialog.setOnClickListener(object : GoalDialog.OnDialogClickListener {
            override fun onClicked(goalContent: String)
            {
                tmpGoalContent = goalContent

                if (tmpGoalContent != ""){
                    dbHelper.insertGoal(GoalData(null,tmpGoalContent,0, 0))
                    goalListAdapter.dataList = dbHelper.selectGoals()
                    goalListAdapter.notifyDataSetChanged()
                }
            }
        })
    }

insertGoal() 함수에 이 글에서 설명하고자 하는 dialog 코드가 있다. dialog를 만들기 위해 GoalDialog 라는 클래스를 변수로 만드는데, GoalDialog는 Custom Dialog를 구현하기 위해 별도로 구현한 클래스다. 

반응형

Custom Dialog Class 코드

 

우선 dialog 생성을 위해 안드로이드에서 기본으로 제공하는 Dialog 라이브러리를 사용해서 dialog 변수를 만들고 Custom Dialog 화면과 Main 화면에서 데이터를 주고받기 위해 onClickListener 라는 변수를 만들었다.

 

실제로 dialog를 화면에 보여주는 함수는 showDialog다. setContentView를 통해 보여주고자 하는 레이아웃을 지정한다. 당연히, 레이아웃은 미리 만들어야 한다. 그 외에 코드는 사용 편의성을 위해 레이아웃에 여러 설정을 추가한 것이고 화면에 보여주게 하는 것은 dialog.show() 코드다. 이 코드가 실행되면 Custom Dialog 화면이 보인다.

2022.04.09 - [개발] - (7) 독학으로 앱 만들어보기 (화면 만들기)

(7) 독학으로 앱 만들어보기 (화면 만들기)

import android.app.Dialog
import android.content.Context
import android.view.WindowManager
import android.widget.EditText
import com.example.cometrue.R
import kotlinx.android.synthetic.main.goal_input_popup.*

class GoalDialog(context: Context)
{
    private val dialog = Dialog(context)
    private lateinit var onClickListener: OnDialogClickListener

    fun setOnClickListener(listener: OnDialogClickListener)
    {
        onClickListener = listener
    }

    fun showDialog()
    {
        dialog.setContentView(R.layout.goal_input_popup)
        dialog.window!!.setLayout(WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT)
        dialog.setCanceledOnTouchOutside(true)
        dialog.setCancelable(true)
        dialog.show()

        val editGoalPopup = dialog.findViewById<EditText>(R.id.edit_insert_goal)
        dialog.btn_insert_goal_popup.setOnClickListener {
            onClickListener.onClicked(editGoalPopup.text.toString())
            dialog.dismiss()
        }
    }

    interface OnDialogClickListener
    {
        fun onClicked(goalContent: String)
    }

}

dialog.show()를 통해 화면을 오픈했다면 화면을 닫는 것도 만들어야 한다. 빈화면을 클릭하면 화면이 닫히는게 기본이고 그 외에도 목표 추가 버튼을 클릭하면 화면이 닫히게 했다. dialog.dismiss() 코드가 화면을 닫는 코드다. onClickListener.onClicked 함수는 사용자가 입력한 목표 내용을 dialog -> main 으로 넘겨주기 위한 코드다.

입력한 목표 DB에 저장하기

 

Custom Dialog에서 사용자가 입력한 데이터를 전달 받아서 DB에 저장하는 코드는 아래와 같다. 사용자가 아무것도 입력하지 않을 수 있으니 if (tmpGoalContent !="")로 빈 값을 체크했다. 값이 존재한다면 sqlite db에 저장하고 recycleview에 업데이트가 되도록 했다.

   private fun insertGoal() {
        lateinit var tmpGoalContent:String
        val dialog = GoalDialog(this)
        dialog.showDialog()
        dialog.setOnClickListener(object : GoalDialog.OnDialogClickListener {
            override fun onClicked(goalContent: String)
            {
                tmpGoalContent = goalContent

                if (tmpGoalContent != ""){
                    dbHelper.insertGoal(GoalData(null,tmpGoalContent,0, 0))
                    goalListAdapter.dataList = dbHelper.selectGoals()
                    goalListAdapter.notifyDataSetChanged()
                }
            }
        })
    }

 

다음 글은 핸드폰에서 잠금 버튼이 ON/OFF 되는 것을 캐치해서 잠금화면 Activity를 실행하는 내용에 대해 설명한다. 이제는 기초 공부가 되어있지 않다면 코드 이해가 불가능에 가까워지고 있다. 이해가 잘 되지 않는 다면 이 글은 시리즈 물로 작성하고 있기 때문에 천천히 읽어보면 좋을 거 같다.

 

2023.01.23 - [개발] - (21) 독학으로 앱 만들어보기 (코틀린 sqlite select)

(21) 독학으로 앱 만들어보기 (코틀린 sqlite select)

2023.01.05 - [개발] - (18) 독학으로 앱 만들어보기 (RecycleView 1편)

(18) 독학으로 앱 만들어보기 (RecycleView 1편)