섹션 6. 다이어트 메모 앱 만들기(4) - 다이얼로그 띄우기

지난 글에서는 스플래시 화면을 만들었다.

 

이번시간에서는 먼저 글을 메모할 글쓰기 버튼을 만들어주자.

activity_main.xml로 가자.

아이콘 사진 아무거나 다운받아서 drawable 폴더에 넣어주고, 이미지뷰 생성

constraintLayout으로 바꿔주고 글쓰기버튼 오른쪽 아래에 붙여주기

리스트뷰도 만들어주기

 

이제 버튼을 클릭하면 실행될 이벤트를 작성하자

메인액티비티로~

글쓰기 버튼 뷰 바인딩 해서 뷰 객체 만들고 setOnClickListener 함수 써주기

 

setOnClickListener 함수를 이용해 버튼을 클릭하면 다이얼로그를 띄울 것이다.

다이얼로그란?

팝업 형태의 창

 

다이얼로그 레이아웃을 먼저 만들어주자.

레이아웃파일 만드는법: layout 폴더 우클릭-New-LayoutResource File

이름은 custom_dialog로 하자.

다음과 같이 레이아웃 작성해준다.

EditText, 실선, 버튼 추가해줬다.

 

이제 메인액티비티에서 다이얼로그 기능을 만들자.

setOnClickListener 안에 있는 dialog는 그냥 이렇게 쓰는거구나~ 하고 사용법을 익히면 된다.

// Dialog 실행 구문
val mDialogView = LayoutInflater.from(this).inflate(R.layout.custom_dialog, null)
val mBuilder = AlertDialog.Builder(this)
    .setView(mDialogView)
    .setTitle("운동 메모 다이얼로그")
    
val mAlertDialog = mBuilder.show()

실행해보면

글쓰기 아이콘을 클릭했을 때 다이얼로그가 잘 뜨는 것을 확인할 수 있다.

 

 

'이제 날짜를 선택해주세요' 버튼의 이벤트를 처리해보자

메인액티비티에서

위와 같이 날짜를 선택해주는 다이얼로그를 만들어주자.

 

실행해보면

날짜선택 다이얼로그가 잘 뜬다.

 

날짜 선택한 다음의 이벤트가 없는데, 로그를 넣어서 확인해보자.

* month 는 +1 해줘야 함

잘찍히는걸 확인할 수 있다.

*원래 {month + 1}이라고 해줘야 계산된 숫자가 찍힌다.

 

<오류노트

문제가 있었다. 첫번째 화면을 보면 날짜 선택을 하고 가운데 화면처럼 OK/CANCEL 버튼이 떠야 하는데 안뜬다.

OK가 있어야 할 영역을 클릭하면 로그도 잘 찍히고 동작은 잘 된다.

아마도 테마에서 색깔 설정을 건드리면서 뭔가 빠진 것 같다.

res-values 폴더의 themes.xml 파일

ColorPrimary 색을 지웠었는데 대충 보라색으로 넣어줬더니 확인버튼의 글자가 보라색으로 잘떴다.

교훈: 복붙할때 함부로 뭐 지우지 말자.

오류해결~ />

 

날짜가 선택된 이후에는 '날짜를 선택해주세요' 영역의 버튼을 바꿔주도록 하자.

아까와 코드가 조금 달라졌다.

mAlertDialog.findViewById<>().setOnClickListener로

아까는 뷰바인딩한 것에 바로 클릭 함수를 붙여줬는데,

수정 후에는

val DateSelectBtn = mAlertDialog.findViewById<>() 로 뷰바인딩한 객체를 따로 변수로 선언해줬다.

그 다음에 DateSelectBtn.setOnClickListener 로 코드가 간결해졌다.

 

다시 돌아와서,

'날짜를 선택해주세요' 버튼을 바꿔주려면, 클릭후의 이벤트를 처리하는 영역을 수정해주면 된다.(좌측 사진의 Not yet implemented부분 )

거기에 아까 뷰바인딩한 객체를 이용하여

DateSelectBtn.setText() 함수를 이용하여 선택한 날짜의 변수를 사진과 같이 집어넣어주면 된다.

 

'날짜를 입력해주세요' 대신 입력한 날짜의 숫자가 잘 들어가 있는 것을 확인할 수 있다.

 

이제 다음 글에서는 메모를 입력해서 데이터베이스에 저장하고, 불러오는 것까지 해볼 것이다.