[UMC/Android] 5주차 - 메모 어플 만들기

5주차 - 메모 어플 만들기

자급자족 만들어본 대표이미지

👾 할 커스텀 목록

• 메모 작성 날짜 기록
• item 클릭 시 메모 이동 후 내용 수정가능
• 메모 작성 완료시 Custom Dialog 띄우기
• 휴지통 클릭 시 삭제
• 간단한 splash 화면 구현하기.
• back시 Custom Dialog 띄우기
• 메모 title 텍스트 색 변경하는 palette Dialog 만들기,텍스트 변경된 색 저장하기
• 닉네임 입력받고 00님의 메모 title 설정하기

👾 구현 영상 및 설명

구현 영상

💥 Splash 화면

• 앱 실행시 약 2초간 뜨는 화면으로 직접 디자인 후 실행되도록 하였다.

👤 이름 입력창

• 닉네임을 입력하는 창이 나온다. 입력하지 않고 버튼을 누를시 닉네임을 입력하라는 Toast Message가 뜨도록 하였다.

📝 Memo 화면

• 닉네임 입력창에서 입력한 닉네임이 반영되어 ㅇㅇ님의 메모가 최상단에 뜬다.
• 메모 리스트에서 + 버튼을 누르면 새로운 메모를 작성 할 수 있다.
• 제목과 내용을 작성할 수 있고, 작성한 현재 날짜가 달력 옆에 표기된다.
• 제목 옆 브러쉬 아이콘을 누르면 제목의 글자 색을 바꿀 수 있는 palette dialog가 나온다. dialog에서 바꾸고싶은 색을 클릭시 제목 글자색이 변경된다. 그리고 바뀐 글자색은 item에서도 보이고 다시 들어가도 적용된다!
• 메모 작성 완료 후 하단 체크버튼을 클릭시 Custom Dialog가 뜨도록 하였다.
• 아니오를 누르면 현재 메모상태에 머물도록, 예를 누르면 저장되어 리스트에 새롭게 메모가 추가되도록 하였다.
• 제목을 작성하지 않고 메모를 등록 할 시 제목을 입력하라는 Toast Message가 뜨도록 하였다.

📝 Memo 목록 화면

• 메모 리스트에 item 하나를 클릭시 해당 메모가 저장되어있는 메모창으로 넘어가고, 이를 수정할 수 있다.
• 메모 수정시 현재 수정한 날짜로 값이 변경되어 저장된다.
• 메모 리스트 item의 휴지통 버튼을 클릭하면 해당 메모는 삭제되어 리스트에서도 보이지 않는다.
• item에는 제목과, 메모를 작성한 날짜, 메모의 내용이 뜨도록 하였다.
• 단 메모의 내용이 15글자가 넘어가거나 또는 줄바꿈이 있을 시 그 이후 글자는 … 으로 중략하여 나타냈다.

👾 코드

https://github.com/ss99x2002/UMC_Android

👾 트러블슈팅

1️⃣ DataBinding 문제

• 문제: xml에 onClick::”@{()→onClose}” 를 해도 버튼 클릭시 아무런 반응이 일어나지 않았다.
• 원인: DataBinding시에는 클래스의 바인딩하는 방식이 달랐고 ViewBinding방식으로 binding 해둬서 함수 구현이 적용되지 않았다.
• 해결: DataBindingUtil 적용해서 binding하니 실행되었다.

2️⃣ EditText 값 없는지 확인하기

• 문제: editText.text==null 로 조건문을 이용해 값 존재여부를 파악하려 했으나 조건에 걸리지 않았다.
• 원인 및 해결 : editText의 값 존재여부는 editText.text.isEmpty()를 이용해 파악해야한다.

3️⃣ Back 버튼시 Custom Dialog 발생시키기

• 문제: 과제4처럼 뒤로가기 발생시 Custom Dialog를 띄우고자 했으나, dialog가 안나오는 문제 발생.
• 원인: 근본적인 원인은 onStop과 onRestart 생명주기에 대한 잘못된 이해 때문이다.
  • onStop은 다른 Activity가 기존 Activity를 완전히 가릴때 활성화 됨.
  • onRestart는 Activity가 정지된 후 다시 시작될 때 호출 됨.
  • 과제4는 텍스트를 입력하는 화면 → 확인하는 화면 이후 확인하는 화면에서 뒤로가기로 텍스트를 입력하는 화면으로 왔을 때. onRestart() 가 새롭게 다시 실행된다. 즉 텍스트를 확인하는 화면이 아닌 입력하는 화면에 dialog가 뜨는 것이였다.
• 해결: 내가 만들고자 하는 기능은 메모 Activity → 메모 list Activity 로 뒤로가기를 누르게되면 확인하는 dialog가 뜨도록 하는것이기 때문에 onBackpressed를 활용 해 dialog를 띄우면 된다.
  • 근데 onBackpressed가 deprecated 되었기 때문에 callBack을 추가해서 기능을 구현하였다.

4️⃣ Custom Dialog 사이즈 문제

• 문제: xml 파일에서 만든 dialog가 내 생각과는 다르게 많이 좁아지게 나옴
• 원인: xml에서 dialog를 만들 때 너비를 match parent로 주고 margin을 start와 end에 각각 주어서 크기를 만들었는데, margin이 생략된 채 match parent로 실행되었기 때문이다.
• 해결: WindowManager.LayoutParams.*WRAP_CONTENT* 로 바꾸고 dialog 큰 layout 내 요소들의 크기들을 조정하여 원하는 크기로 만들었다.

👾 배운점

1️⃣ DataBinding

• 이제껏 ViewBinding 만 쓰다가 xml에 DataBinding을 적용해보았다. 특히 CustomDialog를 만들때 직접 Dialog interface를 만들어 사용했기 때문에 더욱 편리했다.
• dataBinding 시에는 class에 기존의 binding을 선언하는 방식과는 달랐다.

binding = DataBindingUtil.setContentView(this,R.layout.activity_memo)
        setContentView(binding.root)
// 다음과같이 binding을 선언해줘야 dataBinding이 된다.

• 기존의 onClick를 override해서 함수를 적용할수도 있고, @{()→variable.func} 형태로도 적용할 수 있다.

2️⃣ Dialog Interface 만들기

• 기존의 안드로이드에서 제공하는 dialog가 아닌 직접 디자인한 Custom Dialog를 적용하고 싶어서 직접 dialog interface를 만들었다! (confirm dialog와, palette dialog)
• 클릭리스너로 두개의 함수를 만들어서 예 버튼 클릭시 onConfirm() 아니오 클릭시 onClose() 함수가 실행되도록 하였다.
• 해당 부분은 사용할 activity에서 override하면 된다.

//중략
interface DialogClickListener{
        fun onClose()
        fun onConfirm()
    }

3️⃣ Android Splash 권고사항

• 현재 memo 앱에서는 Splash Activity를 메인으로 설정하고, 메모 리스트 Activity로 넘어가도록 만들었다.  (그래서 기본 splash + 내가 만든 splash 화면까지 두개가 뜬다 ^^; 이 방법은 앱 다시 시작시 한번 더 리소스들을 로드해야하는 불필요한 대기 시간이 발생하기 때문에 아래와 같은 권고사항을 따르는게 좋다.)  관련블로그 -> https://sungbin.land/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C12-%EC%8A%A4%ED%94%8C%EB%9E%98%EC%8B%9C-%EB%8C%80%EC%9D%91%ED%95%98%EA%B8%B0-1729f69dc33f
• 현재 Android API 12에서 Splash 화면을 Theme을 이용해서 만드는것이 권고되어있었고, 여러 속성을 이용해 앱의 아이콘 벡터를 가운데 설정하고, 백그라운드 배경색을 지정하여 Splash 화면을 만들 수 있다고 한다.