게시판 구현 복기

이번에 개발하게된 게시판은 탭 형태의 메뉴를 갖고 있고 메뉴별로 수직 형태 리스트를 갖고 있고 각 리스트별 ui가 다른 게시판입니다.

카테고리별 게시판을 개발하면서 어떤 컴포넌트를 어떤 식으로 활용하면 좋을지 많은 고민을 했고, ui 구조 전체를 바꾸는 경우도 있었습니다. 

다음 ui 작업시 같은 시행 착오를 줄이기 위해 복기용으로 해당 포스팅을 작성합니다.

 

Viewpager2 사용 후기

처음엔 tablayout + viewpager2 > recyclerview(vertical) 로 구현

메뉴는 tablayout으로 구현하고 메뉴 간 스와이프 이동으로 viewpager를 사용했고, fragment를 사용해야하는 viewpager1보단 리사이클러뷰 어뎁터를 사용할 수 있는 viewpager2를 사용했는데 많은 개발자들이 남긴 포스팅과 같이 불안정한 부분이 많았습니다.

(부들부들..)

 

높이를 꼭 Match_parent로 해야하기 때문에 다른 view와 함께 사용하기 부적절 했습니다. ( 하단 광고 ) 그래도 편하기 때문에 하단 뷰 만큼 패딩 값을 주고 사용 했지만 setCurentItem 을 사용해서 페이지간 애니메이션 없이 이동을 사용했을때 버벅이는 증상이 있어 작업 했던 부분들을 모두 날리고 viewpager로 변경했습니다.

( 작성한 코드들도 날리고, 시간도 날리고..  무엇보다 프래그먼트와 엑티비티간 불안정함이 너무 싫었..) 

 

동적 메뉴구성시 유의 사항

상황에 따라 메뉴의 구성이 달라지기 때문에 리싸이클러뷰를 초기 선택해서 구현 했는데, 메뉴 별 레이아웃 커스텀이 편리했지만 각 메뉴가 선택 됐을때 화면의 중간 지점으로 이동시켜줘야 하는등 번거로움이 있었습니다. 그래서 다시 탭으로 변경해서 구현했습니다.  용도에 맞게 나온 컴포넌트를 사용해서 ui를 구현하는게 제일 좋다고 다시 한번 느꼈습니다. 

 

무한루프 Viewpager

마지막 메뉴에서 스와이프를 하면 처음 메뉴로 돌아오는 무한루프 구조를 2가지 방법으로 시도 했습니다.

- 구현해야하는 메뉴보다 2개를 더 미리 선언하는 방식 (item size = n+2)

- 1000개 이상의 전체 아이템 풀을 만들어서 n개만큼 반복해서 보여주는 방식 

 

item size = n+2 방식

ABCD 4개의 실제 데이터를 갖고 있는 탭이 있다고 하면 CDABCD 의 구성을 갖도록 설정합니다 ( 총 6개 , 실제 데이터 4개 ) 

데이터 로딩이 끝난 첫 화면의 포지션은 2로(A) 지정합니다. 그리고 끝 아이템에 도달했을땐 포지션 1(D)로 이동합니다. 이동시 애니메이션 옵션을 false로 지정합니다. 저는 탭레이아웃과 함께 사용했고 탭을 클릭 했을때도 페이지를 이동해야 했기 때문에 탭 이벤트를 실행시켰습니다. 

     vpComments.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageScrollStateChanged(state: Int) {
                super.onPageScrollStateChanged(state)
                if (state == ViewPager2.SCROLL_STATE_IDLE) {
                    if (currentCommentPosition == 0) {
                        tabLayout.getTabAt(tabLayout.tabCount - 2)?.select()
                    } else if (currentCommentPosition == 1) {
                        // 마지막으로 이동할 경우
                        tabLayout.getTabAt(tabLayout.tabCount - 1)?.select()
                    } else{
                        tabLayout.getTabAt(currentCommentPosition - 2)?.select()
                    }

                } else if (state == ViewPager2.SCROLL_STATE_DRAGGING && currentCommentPosition == commentAdapter.itemCount) {
                    tabLayout.getTabAt(0)?.select()
                }
            }

            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                currentCommentPosition = position

            }
        })

viewpager2와 함께 사용했었는데 페이지를 이동하는 과정이 매끄럽지 못하고 버벅이는 증상등으로 viewpager로 변경했습니다. viewpager로 변경 후  탭의 개수만큼 모든 뷰를 한번에 그리도록 했더니 이또한 버벅이는 증상이 발생해 무한루프의 방식을 변경하게 됐습니다. 

 

1000개 이상의 아이템풀 생성 방식

1000번 이상의 스와이프가 가능하도록 total size를 조정해 첫 화면의 포지션은 그 값의 중간 값으로 했습니다. ( ex) total size = 1000, init position = 500 ) 양쪽에 2개씩 뷰를 미리 그려놓는 방식으로 구현하니 버벅이는 증상이 없어졌습니다. 

포스팅을 하면서 들은 의문이지만 왜 첫번째 방식으로 양쪽에 2개씩만 미리 그려놓도록 하는 방식은 안했을까요..? 

 

다음엔 조금 더 신중하게 생각하면서 작업해야겠네요! 

 

ui 작업하는게 제일 뿌듯하지만 아직도 어려운 부분은 많은것 같습니다.

 

결과적으로 viewpager2의 구현은 간단하나 응용면에서 시기상조 같습니다. 토이프로젝트나 시현용이 아니면 사용 안할래요~