chapter 10.3 - TagLayout (라이브러리 활용)

이전 글에서는 프래그먼트를 화면 전체에 배치하여 넘겨보는 방식이었습니다.

이전에 만들었던 프래그먼트를 이용하여 현재 보고 있는 프래그먼트가 어디인지를 표시할 수 있는 TagLayout을 이용하겠습니다.

 

2021.06.03 - [안드로이드/클래스101 - 비전공자들을 위한 나만의 안드로이드 앱 만들기] - chapter 10.2 - ViewPager

 

TagLyaout는 지금 사용자가 어느 프래그먼트를 보고 있는지 알려주고 싶을 때 사용합니다.

여러 화면을 구성하는 어플을 이용하면 현재 어디를 보는 것인지를 알려주는 것입니다.

 

플레이스토어

예를 들어, 플레이 스토어 앱을 보면 위와 같이 파란색 상자처럼 어떤 화면을 보는 것인 지를 표시하는 바가 있습니다.

게임을 누르면 게임 화면이, 앱을 누르면 앱 화면이 나옵니다.

아니면 화면을 가로로 넘기면 그에 따라 앱 화면이면 앱을 보고 있다는 위치를 알 수 있습니다.

즉, 원하는 탭을 누르면 해당 페이지로 이동이 가능합니다.

이러한 기능은 안드로이드 기본 기능이 아니어서 라이브러리 설치가 필요합니다.

뷰페이지 연계 라이브러리를 이용합니다.

 

라이브러리를 설명하면 어떠한 기능을 구현하고 싶을 경우, 코드가 너무 복잡하거나 잘 모를 때에 다른 개발자들이 짜 놓은 코드를 사용하는 것을 말합니다.

라이브러리에 관하여 다음에 더 자세하게 다루겠습니다.

 

라이브러리

라이브러리는 Gradle Scripts > build.gradle(Module: ~)로 들어가서 dependencies에 입력합니다.

이번에 사용할 TagLayout은 dependencies의 4번째 줄에 있는 것을 이용하는 것이어서, 최신 버전을 사용하는 분들이라면 기본으로 설치되어 있어서 따로 라이브러리를 설치하지 않아도 됩니다.

 

xml 설정

이미 라이브러리가 설치되어있으므로 activity_main.xml로 가서 TabLayout을 배치하겠습니다.

TabLayout의 코드는 10 ~ 16번 줄에 해당합니다.

11번 줄과 같이 아이디를 부여해줍니다.

원하는 크기를 설정합니다. 12 ~ 13번 줄에 해당합니다.

14번 줄의 경우 위치에 해당하는 곳의 글자 색상을 변경하는 것입니다.

15번 줄의 경우 위치에 해당하는 곳의 글자 밑에 작은 바의 색상을 변경하는 것입니다. 위치를 이동할 때마다 움직이는 바 입니다.

16번 줄의 경우 TabLayout의 크기를 정하는 것입니다. 전체적인 크기가 아닌 TabLayout 내부의 비율을 정하는 것입니다. 만약 이 줄이 없다면 전체 가로의 1:1:1로 배치되지만, 16번 줄이 있으면 글자의 크기만큼의 크기만 만들어집니다.

 

만들어둔 TabLayout을 뷰페이저와 연결하겠습니다. 

25번 줄과 같이 id를 부여한 TabLayout에 setupWithViewPager을 입력한 후 어떤 뷰페이저와 연결할 것인지를 작성하면 끝입니다. 

이처럼 TabLayout을 연결하는 것이 쉬운 이유는 라이브러리를 활용하기 때문입니다.

 

연결은 하였으나 여기까지 작성을 하면 TabLayout에 이름이 없이 빈칸으로 해당 위치에 바만 생겼을 뿐입니다.

이제 이름을 입력하여 어디 프래그먼트인지를 알아볼 수 있게 하겠습니다.

 

프래그먼트 별로 이름을 부여하는 것은 다르게 말하면 위치에 맞게 제목을 뿌리는 것과 같기 때문에 Adapter에서 작성해야 합니다.

우선 각주로 처리한 20 ~ 30번 줄을 보겠습니다.

이름을 부여하는 함수인 getTitle 함수를 오버라이드하겠습니다.

20번 줄에서 보면 CharSequence는 Stirng으로 생각하시면 됩니다.

21 ~ 30번 줄은 기존에 사용했던 if문입니다.

하지만 위에 12 ~ 18번 줄처럼 When을 이용하면 훨씬 간결해집니다.

두 코드는 다르지만 결괏값은 같습니다.

이렇게 짜인 코드가 코틀린다운 문법이라고 합니다.

이처럼 어떤 문법을 사용하냐에 따라 코드의 길이가 차이가 납니다.

 

 

여기까지 작성을 하면 에뮬레이터는 프래그먼트에 위치를 TabLayout을 통해 볼 수 있습니다.

복잡하게 코드를 짜지 않고도 라이브러리를 통해 쉽게 코드를 다루어보았습니다.