MiTweet 개발일지 5

트윗 작성 화면을 만들 때는 그때그때 생각나는 대로 디자인하다 보니 시간 효율이 좋지 않았다. 타임라인부터는 기획하는 흉내라도 내 보기로 했다.

 

일단 오늘은 타임라인 구현을 위한 기초 작업.

BottomNavigationView 추가

최근 안드로이드 앱을 보면 하단에 탭을 두고 이동할 수 있도록 디자인한 모습이 보인다.

내가 봐도 한화는 안타까움

그동안 Android에서 프래그먼트 사이를 이동하려면 ``FragmentManager``로 시작하는 길고 긴 코드를 써야 했지만, Jetpack에 BottomNavigationView가 추가되어 기능을 쉽게 구현할 수 있게 되었다.

 

과정은 다음과 같다.

• 메뉴 xml 작성
• 레이아웃에 각 프래그먼트를 보여줄 ``host fragment``를 추가
• ``host fragment``에 ``NavController`` 추가

자세한 과정은 검색하면 쉽게 찾을 수 있다.

하단 바가 추가되었다.

아이콘은 구글 머티리얼 아이콘에서 찾았다. 하단 바에 텍스트는 필요하지 않을 듯하여 텍스트를 숨김 처리했다. 

 

그런데 처음 프로젝트를 만들 때 ``Empty Project``가 아닌 ``NavigationFragment``를 포함하는 프로젝트로 만들었기 때문에, 기본으로 설정되어 있던 ``NavigationView``를 ``Drawer``으로 바꿔야 했다. 주요 프래그먼트 간 이동은 ``BottomNavigationView``로 하고, ``Drawer``에는 상대적으로 잘 쓰이지 않는 모먼트 등의 기능을 넣을 예정이다.

DynamicGridImageView 추가

트위터 공앱에서는 사진을 첨부된 수에 따라 격자의 크기를 조정한다. 타임라인뿐만 아니라 나중에 트윗 상세보기 화면을 만들 때도 필요한 뷰이기 때문에 직접 구현하였다.

아직 NavigationView 수정 전이라 Fragment 조각이 남아 있다.

코드는 ``LinearLayout``을 중첩하여 이미지 개수에 따라 메소드를 작성하였다. 무식한 방법이긴 하지만 겨우 사진 보여주는 기능에 시간을 많이 쏟을 필요는 없을 것 같아 단순하게 처리하였다.

 

TIL: 커스텀 뷰를 레이아웃에 넣은 후 코드에서 접근하려면 Kotlin에서도 반드시 ``findViewById()`` 메소드로 뷰를 찾아야 한다. ktx로 아이디에 접근할 수는 있지만 뷰에 작업을 하려고 하면 ``NullPointerException``이 발생한다.

TweetMiniView

타임라인에 트윗을 보여줄 아이템 뷰를 작성하였다. 나중에 이 뷰가 ``RecyclerView``의 아이템으로 들어가게 된다.

통계 아이콘만 작아 보인다면 기분탓

최대한 트윗 상세 화면에 재활용할 수 있게끔 만들려 했는데, 상세 화면에는 좀 더 많은 정보가 들어가야 하는 만큼 뷰 자체를 재사용하긴 어려울 것 같다. 물론 저 형태를 기반으로 더 빠르게 만들 수는 있겠다.

 

답글 개수를 가져오는 방법은 리트윗이나 마음보다 훨씬 복잡하다. 답글 역시 트윗이기 때문에.. 일단 이 부분은 나중에 더 살펴볼 예정.

 

``마음에 들어요`` 버튼은 ``drawable``로 구현하였다. 버튼의 클릭 상태를 체크하는 것보다 이게 더 간단하고 깔끔한 것 같다.

TODO

• 타임라인 구현 - ``RecyclerView``, ``Adapter`` 작성하기
• 트윗 상세 보기 화면 구현
• 스레드 보기 화면 구현