[Android] TabLayout(탭 레이아웃) 구현

TabLayout

전에 Bottom Navigation에 대해 공부했던 적이 있다.

Bottom Navigation은 말 그대로 하단 바였다. 이는 TabLayout의 일종으로 볼 수 있다.

Bottom Navigation처럼 여러 개의 버튼이 있고, 각 버튼마다의 Activity 또는 Fragment를 보여준다.

구현 방법에 대해 알아보자.

1. XML 작성

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.002">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/home_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/home"
            android:text="@string/home" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/user_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/user"
            android:text="@string/user" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/setting_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/settings"
            android:text="@string/setting" />

    </com.google.android.material.tabs.TabLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

xml의 Design에 가보면 Containers에 TabLayout이 있는 것을 확인할 수 있다.

이 TabLayout을 Activity에 넣으면, 자동적으로 3개의 아이템이 설정된다.

더 추가를 하고 싶다면 추가를 하면 되며, 각 버튼마다의 속성을 설정해준다.

2. 각 버튼에 따른 이벤트 설정

xml의 작성이 끝났다면 MainActivity에서 각 버튼을 클릭했을 때 어떠한 이벤트를 줄 것인지 설정해야 한다.

이때, TabLayout의 addOnTabSelectedListener() 함수를 이용해 이벤트 핸들러 객체를 지정해준다.

이 이벤트 핸들러 객체는 TabLayout.OnTabSelectedListener를 구현한 객체여야 하고, 각 이벤트 콜백 함수의 매개변수는 현재 이벤트가 발생한 Tab 객체이다.

package com.example.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import androidx.fragment.app.Fragment
import com.google.android.material.tabs.TabLayout

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tabLayout: TabLayout = findViewById(R.id.tab_layout)

        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{
            override fun onTabSelected(tab: TabLayout.Tab) {
                when(tab.position) {
                    0 -> {
                        // TODO
                    }
                    1 -> {
                        // TODO
                    }
                    2 -> {
                        // TODO
                    }
                }
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
            }

        })
    }
}

onTabSelected를 통해 각 탭의 이벤트를 설정하였다.

그렇다면 남은 onTabUnselected와 onTabReselected의 역할은 무엇일까?

onTabUnselected는 이미 탭을 클릭하였을 때, 한번 더 클릭하면 클릭되지 않음 상태로 바꿔주는 역할을 한다.

onTabReselected는 이미 탭이 클릭된 상태에서 한번 더 클릭했을 때, 어떠한 이벤트를 줄 것인지 설정한다.

즉, 각각의 이벤트를 줄 것이 아니라면 안에 구현을 하지 않아도 된다는 것이다.

예시

https://github.com/junsu1023/Android-Study/tree/tab-layout

GitHub - junsu1023/Android-Study: Android 공부

TabLayout을 이용하여 간단한 예시를 만들어보았다.

위에서 이해가 부족한 부분이 있다면, 코드를 참고하며 직접 짜보면 좋을 것이다.