วิธาสร้าง Tab Layout ในแอป Android ด้วย Kotlin

ภาพรวม

ตัวอย่างนี้สาธิตการสร้าง Tab Layout พร้อม ViewPager2 (เวอร์ชันใหม่) โดยใช้ Material Design Components และ Fragment

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio เลือก File → New Project

ขั้นตอนที่ 2: เพิ่ม Dependency (build.gradle)

dependencies {
    implementation "com.google.android.material:material:1.11.0"
    implementation "androidx.viewpager2:viewpager2:1.0.0"
    implementation "androidx.fragment:fragment-ktx:1.6.2"
}

ขั้นตอนที่ 3: Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabTextColor="?attr/colorOnSurface"
            app:tabSelectedTextColor="?attr/colorOnPrimary"
            app:tabIndicatorColor="?attr/colorOnPrimary"
            app:tabGravity="fill"
            app:tabMode="fixed" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager2.widget.ViewPager2
        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>

ขั้นตอนที่ 4: MainActivity.kt

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {
    private lateinit var tabLayout: TabLayout
    private lateinit var viewPager: ViewPager2

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"

        tabLayout = findViewById(R.id.tabLayout)
        viewPager = findViewById(R.id.viewPager)

        // เพิ่ม Tab
        tabLayout.addTab(tabLayout.newTab().setText("Football"))
        tabLayout.addTab(tabLayout.newTab().setText("Cricket"))
        tabLayout.addTab(tabLayout.newTab().setText("NBA"))

        // ตั้งค่า Adapter
        val adapter = MyAdapter(this)
        viewPager.adapter = adapter

        // เชื่อม TabLayout กับ ViewPager2
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = when (position) {
                0 -> "Football"
                1 -> "Cricket"
                2 -> "NBA"
                else -> ""
            }
        }.attach()
    }
}

ขั้นตอนที่ 5: Adapter (MyAdapter.kt)

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class MyAdapter(activity: FragmentActivity) : FragmentStateAdapter(activity) {
    override fun getItemCount(): Int = 3

    override fun createFragment(position: Int): Fragment = when (position) {
        0 -> FootballFragment()
        1 -> CricketFragment()
        2 -> NBAFragment()
        else -> FootballFragment()
    }
}

ขั้นตอนที่ 6: สร้าง Fragment (3 ตัว)

FootballFragment.kt

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

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

fragment_football.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Football Fragment"
        android:textSize="24sp"
        android:textStyle="bold" />

</FrameLayout>

CricketFragment.kt และ NBAFragment.kt

สร้างคล้าย FootballFragment แค่เปลี่ยนชื่อคลาสและ Layout (fragment_cricket.xml, fragment_nba.xml)

ขั้นตอนที่ 7: Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.tablayout">
    <application ... >
        <activity android:name=".MainActivity"> ... </activity>
    </application>
</manifest>

การทดสอบและหมายเหตุ

• ใช้ ViewPager2 แทน ViewPager เก่า (รองรับ RTL, Vertical scrolling, DiffUtil)
• TabLayoutMediator จัดการการซิงค์ระหว่าง Tab และ ViewPager อัตโนมัติ
• FragmentStateAdapter จัดการ Lifecycle ของ Fragment อัตโนมัติ (Destroy เมื่อไม่อยู่ในหน้าจอ)
• สามารถเพิ่ม Icon ใน Tab ได้ด้วย tab.setIcon(R.drawable.ic_sport)