코틀린 안드로이드 앱개발 강좌, 탭 레이아웃 - 탭 버튼 구성

안드로이드 앱 개발에 있어서 사용자 인터페이스(UI)는 매우 중요한 요소입니다. UI가 직관적이고 사용하기 쉽다면, 사용자 경험(UX)이 크게 향상되며, 애플리케이션의 성공에 긍정적인 영향을 미칠 것입니다. 본 강좌에서는 Kotlin과 Android의 탭 레이아웃(TAB Layout)을 활용하여, 기본적인 탭 버튼을 구성하는 방법을 알아보겠습니다.

탭 레이아웃의 이해

탭 레이아웃은 여러 화면을 탭으로 나누어 사용자가 쉽게 전환할 수 있도록 돕는 UI 구성 요소입니다. 탭은 주로 앱의 주요 기능을 구분하는 데 사용되며, 사용자는 화면 상단에서 원하는 탭을 선택하여 콘텐츠를 스위칭할 수 있습니다.

Android에서 탭을 구현하기 위해서는 TabLayout과 ViewPager 두 가지 컴포넌트를 활용합니다. TabLayout은 실제 탭 버튼을 보여주고, ViewPager는 탭에 해당하는 여러 페이지를 관리합니다. 이 두 컴포넌트를 함께 사용하여 스와이프 가능한 탭을 만들 수 있습니다.

탭 레이아웃 구성하기

탭 레이아웃을 구성하기 위해서는 몇 가지 단계를 따라야 합니다.

프로젝트 생성 및 Gradle 설정
레이아웃 파일 작성
탭과 ViewPager 연결
탭의 Fragment 설정

1. 프로젝트 생성 및 Gradle 설정

안드로이드 스튜디오를 통해 새로운 프로젝트를 생성합니다. Empty Activity를 선택하고, Kotlin을 사용할 것임을 선택합니다. 생성된 프로젝트의 build.gradle 파일에 다음과 같은 의존성을 추가해 줍니다:

implementation 'com.google.android.material:material:1.4.0'

2. 레이아웃 파일 작성

프로젝트에서 res/layout/activity_main.xml 파일을 다음과 같이 수정합니다:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 탭과 ViewPager 연결

이제 MainActivity.kt 파일을 열고 다음과 같이 작성합니다:

import android.os.Bundle
    import androidx.appcompat.app.AppCompatActivity
    import androidx.fragment.app.Fragment
    import androidx.fragment.app.FragmentPagerAdapter
    import androidx.viewpager.widget.ViewPager
    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.tabLayout)
            val viewPager: ViewPager = findViewById(R.id.viewPager)

            viewPager.adapter = object : FragmentPagerAdapter(supportFragmentManager) {
                override fun getItem(position: Int): Fragment {
                    return when (position) {
                        0 -> Fragment1()
                        1 -> Fragment2()
                        else -> Fragment3()
                    }
                }

                override fun getCount(): Int = 3
                
                override fun getPageTitle(position: Int): CharSequence? {
                    return when (position) {
                        0 -> "탭 1"
                        1 -> "탭 2"
                        2 -> "탭 3"
                        else -> null
                    }
                }
            }

            tabLayout.setupWithViewPager(viewPager)
        }
    }

4. 탭의 Fragment 설정

탭에서 사용할 Fragment 클래스를 생성합니다. Fragment1.kt, Fragment2.kt, Fragment3.kt를 각각 만들고 다음과 같이 작성합니다.

import android.os.Bundle
    import androidx.fragment.app.Fragment
    import android.view.LayoutInflater
    import android.view.View
    import android.view.ViewGroup

    class Fragment1 : Fragment() {
        override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View? {
            return inflater.inflate(R.layout.fragment_1, container, false)
        }
    }

나머지 Fragment들도 유사하게 작성합니다.

탭 레이아웃의 예제

이제 전체 프로젝트를 빌드하여 실행하면, 3개의 탭이 있는 앱을 확인할 수 있습니다. 각 탭을 선택할 때마다 해당하는 Fragment가 표시됩니다. 이번에는 각 Fragment에 간단한 내용을 추가해 보겠습니다. 각 Fragment의 레이아웃 파일을 작성해 줍니다.

fragment_1.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="첫 번째 탭의 내용입니다"
            android:layout_gravity="center"/>

    </FrameLayout>

fragment_2.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="두 번째 탭의 내용입니다"
            android:layout_gravity="center"/>

    </FrameLayout>

fragment_3.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="세 번째 탭의 내용입니다"
            android:layout_gravity="center"/>

    </FrameLayout>

탭 레이아웃의 커스터마이징

TabLayout은 기본적으로 많은 스타일 옵션을 제공합니다. 탭의 색상, 크기, 아이콘 등을 조정하여 더욱 매력적인 UI를 만들 수 있습니다. 아래는 몇 가지 커스터마이징 방법입니다.

탭 색상 설정

탭의 텍스트 색상과 배경 색상을 변경할 수 있습니다.

tabLayout.setTabTextColors(Color.parseColor("#FFFFFF"), Color.parseColor("#FF0000"))

탭 아이콘 설정

tabLayout.getTabAt(0)?.setIcon(R.drawable.icon1)
    tabLayout.getTabAt(1)?.setIcon(R.drawable.icon2)
    tabLayout.getTabAt(2)?.setIcon(R.drawable.icon3)

마무리

이번 강좌에서는 Kotlin을 사용하여 안드로이드 앱에서 탭 레이아웃을 구성하는 방법에 대해 알아보았습니다. TabLayout과 ViewPager를 함께 사용하여 간편하게 여러 Fragment를 전환하는 UI를 구축할 수 있었으며, 기본적인 커스터마이징 방법도 살펴보았습니다. 다양한 API와 라이브러리를 활용하여, 사용자 경험을 끌어올릴 수 있는 멋진 앱을 만들어 보시길 바랍니다!

다음 강좌에서는 추가적인 탭의 동작 및 애니메이션 효과를 구현할 수 있는 방법에 대해 알아보겠습니다. 많은 관심 부탁드립니다!

코틀린 안드로이드 앱개발 강좌, 탭 레이아웃 – 탭 버튼 구성

목차