본 글은 [깡쌤의 안드로이드 프로그래밍 with 자바 - 2022 - 쌤즈] 의 내용을 발췌한 것입니다.
좀더 자세한 내용은 책 혹은 인강(www.ssamz.com)을 통해 확인해 주세요.
9.3. TabLayout
앱 화면을 구현할 때, 탭의 이용 비율이 높습니다. material 라이브러리가 제공되기 전에는
TabHost라는 클래스를 이용하여 탭 화면을 만들었습니다. 복잡한 앱이 개발되기 시작하면서 더 다양한
기능을 처리하는 탭 화면이 필요해졌고, 이를 지원하기 위해 TabLayout 뷰가 제공되었습니다.
즉, TabLayout은 탭 화면에서 탭 버튼을 다양하게 구성하기 위한 뷰입니다. 단순히 탭 버튼을 동일한
간격으로 나열하는 것뿐만 아니라, 탭 버튼이 많을 때는 스크롤을 이용할 수도 있고 다양한 방식으로
정렬할 수 있습니다. 또한 TabLayout과 ViewPager2를 연동할 수도 있습니다.
위의 그림은 Play 스토어 앱의 화면입니다. TabLayout으로 탭 화면을 구현한 영역이 3군데
있습니다. 1번 영역의 탭 화면은 가로 방향으로 스크롤이 됩니다. 2번 영역의 탭 버튼은 가로 방향으로
배치되었습니다. 또한 3번 영역의 탭 버튼은 화면을 모두 차지하지 않고 왼쪽 정렬되어 있습니다.
이처럼 TabLayout 뷰는 탭 화면을 다양하게 구성할 수 있도록 합니다.
<androidx.constraintlayout.widget.ConstraintLayout >
<com.google.android.material.tabs.TabLayout />
<FrameLayout>
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
위의 레이아웃 XML에서 TabLayout과 FrameLayout을 위아래로 배치하였습니다. 탭 화면은
TabLayout으로 구성하였으며, 탭 버튼을 클릭했을 때 출력할 화면은 FrameLayout을
사용하였습니다.
TabLayout의 탭 버튼이 클릭이 되었을 때 나오는 화면은 FrameLayout 이외에 어떤 뷰를 이용해도
상관없습니다. 하지만 탭 화면의 특성상, 탭 버튼이 나올 때 하나의 뷰만 출력하는 것이 일반적이므로
대부분 FrameLayout을 이용합니다.
이처럼, TabLayout은 탭 버튼이 들어가는 부분의 레이아웃입니다. 해당 영역의 버튼 구성은 레이아웃
XML에서 할 수도 있고, 코드에서 할 수도 있습니다. 먼저 코드로 탭 버튼을 구성하는 방법에 대해
살펴보겠습니다.
TabLayout.Tab tab1 = binding.tabLayout.newTab();
tab1.setText("tab1");
binding.tabLayout.addTab(tab1);
TabLayout.Tab tab2 = binding.tabLayout.newTab();
tab2.setText("tab2");
binding.tabLayout.addTab(tab2);
TabLayout.Tab tab3 = binding.tabLayout.newTab();
tab1.setText("tab3");
binding.tabLayout.addTab(tab3);Tab은 TabLayout에 들어갈 탭 버튼 하나를 지칭하는 클래스이며, newTab() 함수로 만듭니다. Tab
객체에 setText (), setIcon () 함수로 버튼을 구성하는 문자열과 이미지를 지정합니다. 이렇게 만들어진
Tab 객체를 addTab() 함수의 매개변수로 전달하면, 탭 버튼이 TabLayout에 추가됩니다.
TabLayout에 출력할 탭 버튼을 동적으로 구성할 때는 이처럼 코드에서 구현하면 됩니다. 하지만
대부분의 탭 버튼은 정적으로 구성됩니다. 탭 버튼의 개수, 문자열 등을 정적으로 구성한다면, 레이아웃
XML 파일에서 구현하는 것이 더 간편합니다. 레이아웃 XML 파일에서 탭 버튼을 명시할 때는
TabLayout 하위에 TabItem만 구성하면 됩니다.
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="409dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" >
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab2" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab3" />
</com.google.android.material.tabs.TabLayout>TabLayout은 탭 버튼 부분을 위한 레이아웃입니다. 각 탭 버튼을 클릭했을 때 이벤트 프로그램을 통해
원하는 화면이 나오게 제어해주어야 합니다. 이를 위해 OnTabSelectedListener가 제공됩니다.
binding.tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
// 탭 버튼을 선택할 때 이벤트
@Override
public void onTabSelected(TabLayout.Tab tab) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
if(tab.getPosition() == 0){
transaction.replace(R.id.contentLayout, oneFragment);
}else if(tab.getPosition() == 1){
transaction.replace(R.id.contentLayout, twoFragment);
}else if(tab.getPosition() == 2){
transaction.replace(R.id.contentLayout, threeFragment);
}
transaction.commit();
}
// 다른 탭 버튼을 눌러 선택된 탭 버튼이 해제될 때 이벤트
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
// 선택된 탭 버튼을 다시 선택할 때 이벤트
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});탭 버튼이 많을 때는 스크롤을 사용할 수 있어야 합니다.t abMode 속성이 스크롤 기능을 지원합니다.
<com.google.android.material.tabs.TabLayout
............
app:tabMode="scrollable">tabMode 속성의 기본 값은 스크롤을 지원하지 않는다는 의미의 fixed입니다. 스크롤을 지원하고자
한다면 tabMode 속성의 값을 scrollable로 지정합니다. scrollable로 지정하면 탭 버튼이 왼쪽부터
배치되며, 탭 버튼이 많아 화면을 벗어나면 자동으로 스크롤을 사용해 탭 화면을 움직일 수 있도록
해줍니다.
또한 tabGravity 속성으로 정렬 위치를 지정할 수 있습니다.
<com.google.android.material.tabs.TabLayout
.............
app:tabGravity="center">기본값은 fill이며, 탭 화면을 동일한 간격으로 나누어 가로 방향으로 꽉 들어차게 탭 버튼을 배치합니다. fill 이외에도
center, start로 tabGravity 값을 지정할 수 있습니다.
