#2. 나만의 메모장 만들기 UI

우선 어려웠다....

UI를 만드는 건 어렵지 않았지만.. 설계가 끝나고 안드로이드 내장 DB인 SQLite 대신 ROOM 라이브러리를 사용해서 보다 쉽게 구현하고 싶어서 공부를 해봤는데, 공부 도중 AAC, MVVM을 이용하여 구현돼있는 예제들을 보고 MVVM 디자인 패턴에 맞춰서 만들어 보려고 했지만 

 

아직인 거 같았다. 

디자인 패턴은 좀 더 안드로이드에 익숙해지고 코틀린도 공부하고 넘어가야지 처음부터 욕심부리다가 이도 저도 아니게 될 거 같은 생각이 들었다. 좀 더 열심히 하자...ㅠ

---

 

 

오늘은 메모가 저장될 공간과 메모를 작성할 공간의 초기 UI를 잡아준 거 까지 포스팅할 예정이다.

중간에 데이터 바인딩 부분은 디자인 패턴 사용하려고 시도했다가 실패하고 코드 수정 안 하고 그대로 사용한 거 이기 때문에 액티비티에서 findViewById를 사용해서 찾아 주시면 됩니다.

 

1. 클래스

 

 

현재까지 구현된 클래스는

 

메모가 저장될 공간 = MainActivity

메모를 작성할 공간 = SaveMemoActivity

 

로 구현했다. 

drawable 에는 ic_add , ic_close, ic_save 총 3개를 추가해줬고 button을 위해 만들어 준 것이다.

 

layout에는 activity_main, memorecycler_itemview를 이용해서 메인에 뿌려지는 xml과 그 안에 들어있는 리사이클 러뷰에 대한 xml이 있고, 메모를 작성할 공간에 적용할 activity_save_memo.xml로 구현되어있다.

 

마지막 menu는 SaveMemoActivity 클래스에서 오른쪽 상단에 디스크 모양으로 보여주고 클릭하면 작성된 메모를 저장할 수 있게 만들어 주기 위해 따로 만들어 주었다. (아래 3번 그림으로 추가해놓겠습니다)

 

 

2. 메모가 저장되는 공간

 

MainActivity , activity_main.xml, memorecycler_itemview 참조

 

우선 디비에 아무것도 저장되어 있지 않기 때문에 테스트 한 결과물을 캡처한 사진이다.

1) 리사이클 러뷰를 이용해서 현재 저장되는 메모의 번호, 제목, 본문 내용, 이미지 총 4개를 담을 수 있게 구현했다.

 

2) floatingactionbutton으로 플러스 모양을 만들었고 클릭하면 메모를 작성할 수 있는 페이지로 넘어간다.

 

 

3. 메모 작성 공간

 

 

현재 가장 고민되는 부분이다. 이미지 부분만 없으면 간단하게 내용 부분만 입력하고 오른쪽 상단에 있는 디스크 모양을 클릭하면 다이어로그 창이 나타나면서 제목을 적을 수 있는 텍스트 창을 나오게 하면 끝이다. 

 

하지만 현재 이미지 뷰로 틀만 잡아놨고, 동적으로 이미지 뷰를 생성하기에도 애매 해고, 리사이클 러뷰와 그리드 뷰를 섞어서 이미지를 담고 있게 해야 할지 고민이 된다.... 이 부분은 고민 좀 하고 다음번에 올리겠습니다. 

 

 

 

---

 

소스는 아래 깃 주소에 들어가셔서 보시면 됩니다.

https://github.com/leewoongi/MemoPad

 

좀 더 자세히 코드를 보고 싶으시면 
https://github.com/leewoongi/MemoPad/commit/65e0158ff686237a5fce994fe1cdfad8c4d6bcfc

 

여기서 ctrl + f 누르셔서

MainActivity, SaveMemoActivity , activity_main.xml, memorecycler_itemview, ic_add 검색하셔서 초록색 바탕으로 돼 있는 걸 보시면 됩니다. 

 

참고로 ic_add는 drawable에서 오른쪽 마우스 클릭 후 vector asset을 이용했습니다.