[배달의 민족] 따라만들기 11-1편(주문내역 화면)

안녕하세요 허접샴푸입니다!

 

항상 오랜만입니다...

 

오늘은 주문내역 화면을 간단하게 만들어보고자 합니다. (ViewPager2, TabLayout, Fragments)

 

[배민 화면]

 

1. fragment_order.xml에 ViewPager2, TabLayout 및 레이아웃 수정

fragment_order.xml의 Desgin 탭 화면.

위와 같이 코드를 작성할 경우, Design Tab을 보시면 위 그림과 같이, tab_layout, pager이 생성된 것을 확인할 수 있습니다.

참고로 기존 TabLayout의 경우, TabIndicator의 폭이 해당 탭의 가로 최대 크기로 정해져 있습니다. 그래서 이것을 해제하기 위해 app:tabIndicatorFullWidth="false"로 설정하였으며, 인디케이터는 해당 탭의 각 탭 아이템 문자열 길이만큼의 폭을 가지게 됩니다.

 

 

2. d_order package에 sub이라는 package 생성 및 3개의 Fragment 생성하기

이름은 마음대로입니다만 저는 직관적으로 작성하기 위해 각 TabItem의 이름에 맞게 Fragment를 생성하였습니다.

 

 

3. OrderFragment.kt 작성하기 (ViewPager, TabLayout 관련)

위 코드는 ViewBinding을 사용하고 있으며 아래 링크에서 관련 내용을 확인하기 바랍니다.

[1] 우선 title 배열을 만들어서, tabItem의 타이틀 문자열을 저장하였습니다.

 

[2] 그다음 setUpViewPager() 함수 안에서, 뷰 페이저의 어댑터는 FragmentStateAdapter를 상속받는 객체로 지정하였으며, 당연히 저희는 3개의 탭 아이템이 있으므로, 크기가 3인 title.size를 getItemCount() 함수 내에서 리턴합니다.

 

[3] createFragment() 함수는 포지션에 따라 화면에 나타내어야 할 프레그먼트를 지정합니다. 따라서, 0일 때는 배달 및 포장을 담당하는 DeliveryTakeOutFragment()를, 1일 때는 BMartFragment()를, 2일 때는 ShoppingLiveFragment()를 리턴합니다. (참고로 프로그래밍할 때 Index는 0부터 인 것은 다 아는 사실이죠? ㅎㅎ)

 

[4] 이제 ViewPager과 TabLayout을 이어주어야 합니다. 화면이 스와이프 되면, 그에 따라 TabLayout의 글자색과 Indicator 또한 그에 맞게 바뀌어야 하기 때문입니다. 이럴 때 사용하는 것이 TabLayoutMediator입니다. 이를 사용하여 position에 맞게 tab의 text는 위에서 생성한 title 배열 인덱스에 따른 문자열로 설정합니다. 마지막으로는 attach()를 통해 tablayout과 viewpager을 연결시키면 끗!

 

[View Binding]

(Kotlin Android Extensions이 오래전에 Deprecated 되었습니다! 그래서 저는 ViewBinding을 사용하기로 하였습니다)

developer.android.com/topic/libraries/view-binding/migration

Migrate from Kotlin synthetics to Jetpack view binding  |  Android 개발자

 

위 과정이 끝입니다. 참 쉽죠?

 

그럼 아래와 같이 실행이 됩니다. 물론, 저희가 아직 각 탭 아이템에 맞는 Fragment들을 디자인하지 않아서, 빈 화면으로 나옵니다.

 

 

[Github] 현재까지 완성된 코드

github.com/DJDrama/BaeminPractice/tree/11-1-Order-History-ViewPager2%2C-TabLayout

DJDrama/BaeminPractice

 

제발 공감 한번씩 눌러주세요ㅜㅜ

오늘도 허접한 글 봐주셔서 감사합니다.