TabLayout과 viewPager2 연결하기

tabLayout은 활용은 viewPager2와 같이 쓰일 때, 매우 효과적입니다. 슬라이드 기능 밖에 없는 viewPager2에 직관적으로 현재 page가 어떤 page인지 알 수 있으니까요! 또 viewPager2를 사용한 앱도 많습니다. 대표적으로는 네이버 웹툰이 있겠네요. 네이버 웹툰에서 월,화,수...일 이렇게 지정되어져서 보이는 부분이 바로 tabLayout입니다.

 

1. 의존성 추가

 tabLayout을 사용하기 위해서는 의존성을 추가해 줘야합니다. 따라서 위의 방식처럼 최근 버전으로 추가해 주세요.

 

2. xml 추가

저번에 viewPager2를 생성하는 방법을 다룬 글에서 사용한 코드에다가,  tabLayout만 추가하고 chain들만 조금 바꿔줬습니다. 

 

3.TabLayoutMediator

xml에 tabLayout과 viewPager2를 선언했으면 이제 코드를 작성하여 이 둘을 연결시켜 줘야합니다. 그것을 바로 도와주는 것이 TabLayoutMediator입니다. 

 

TabLayoutMediator의 인자값 구성을 보면 첫번 째 인자는 tabLayout, 두번 째 인자는 viewPager2, 그리고 마지막은 tabLayout의 각 탭의 구성 값을 설정할 수 있는 메서드로 구성되어져 있습니다. 만약 탭의 구성 요소들을 월요일~금요일이라고 한다면 각 탭은 "월요일",~"금요일" 탭이 생성되어져야 합니다. 이를 위해서 탭의 이름을 별도로 관리하고 있는 리스트를 생성하고 해당 탭에 적용하기 위해서 TextView를 만들어 보겠습니다.

 

tabElement라는 리스트를 생성하여 탭의 구성 text값을 관리하도록 합니다. 이후, textView를 생성하고 리스트의 요소 값들을 지정해 주면 월요일에서 금요일까지의 탭이 생성되게 됩니다. 이때 position을 통해서 리스트를 순회하게 되기 때문에 position 값을 사용하여 리스트의 요소 값을 불러옵니다. (이는 아래의 내용을 설명 후에 다시 한번 설명하겠습니다.)

 

여기서 중요한 것이 있습니다. TabLayoutMediator를 선언하기 전에는 반드시 viewPager2Adapter를 viewPager2에 set 해준 후에 TabLayoutMediator를 선언해 줘야합니다. 이유는 TabLayoutMediator 메서드 마지막 부분의 attach 메서드가 반드시 viewPager2가 어댑터를 가진 후에 호출되기 때문입니다. 

 

구글 문서에서 보여지는 것처럼 viewPager2가 어댑터를 얻기 전에 attach 메서드가 호출되면 IllegalStateException 에러가 호출된다고 하네요. 전 여러번.. 겪었으니까 여기서 만큼은 시도해 보지 않겠습니다. 

 

다시 position을 통해서 리스트의 요소값을 어떻게 가져올 수 있게 되는지 부연 설명해보겠습니다. 위의 설명처럼 viewPager2가 어댑터를 set한 이후에 attach 메서드가 호출됩니다. 이를 통해 adapter에서 선언한 페이지 개수를 알 수 있게 되고 이를 통해서 tab의 갯수를 몇개 선언해야 하는지도 알 수 있게 됩니다. 따라서 인자로 넘어오는 position 값은 page의 수를 1부터 지정한 값까지 순차적으로 들어오게 되기 때문에 리스트의 요소들을 모두 순회할 수 있게 되는 것입니다. 

 

4.결과