섹션 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가 있어야 할 영역을 클릭하면 로그도 잘 찍히고 동작은 잘 된다.
아마도 테마에서 색깔 설정을 건드리면서 뭔가 빠진 것 같다.
ColorPrimary 색을 지웠었는데 대충 보라색으로 넣어줬더니 확인버튼의 글자가 보라색으로 잘떴다.
교훈: 복붙할때 함부로 뭐 지우지 말자.
오류해결~ />
날짜가 선택된 이후에는 '날짜를 선택해주세요' 영역의 버튼을 바꿔주도록 하자.
아까와 코드가 조금 달라졌다.
mAlertDialog.findViewById<>().setOnClickListener로
아까는 뷰바인딩한 것에 바로 클릭 함수를 붙여줬는데,
수정 후에는
val DateSelectBtn = mAlertDialog.findViewById<>() 로 뷰바인딩한 객체를 따로 변수로 선언해줬다.
그 다음에 DateSelectBtn.setOnClickListener 로 코드가 간결해졌다.
다시 돌아와서,
'날짜를 선택해주세요' 버튼을 바꿔주려면, 클릭후의 이벤트를 처리하는 영역을 수정해주면 된다.(좌측 사진의 Not yet implemented부분 )
거기에 아까 뷰바인딩한 객체를 이용하여
DateSelectBtn.setText() 함수를 이용하여 선택한 날짜의 변수를 사진과 같이 집어넣어주면 된다.
'날짜를 입력해주세요' 대신 입력한 날짜의 숫자가 잘 들어가 있는 것을 확인할 수 있다.
이제 다음 글에서는 메모를 입력해서 데이터베이스에 저장하고, 불러오는 것까지 해볼 것이다.