วิธีใช้ TabHost บน Android (Legacy)

ภาพรวม

TabHost เป็นวิธีเก่า (Legacy) สำหรับสร้างแท็บใน Android ปัจจุบันแนะนำให้ใช้ TabLayout + ViewPager2 แทน ซึ่งทันสมัยและรองรับ Fragments ได้ดีกว่า แต่บทความนี้อธิบาย TabHost สำหรับโปรเจกต์เก่าหรือการเรียนรู้

ขั้นตอนการสร้าง

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

Android Studio → File → New Project → Empty Activity

ขั้นตอนที่ 2: Layout (res/layout/activity_main.xml)

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

    <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:gravity="center">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="เนื้อหาแท็บ 1"
                        android:textSize="24sp" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:gravity="center">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="เนื้อหาแท็บ 2"
                        android:textSize="24sp" />
                </LinearLayout>

            </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>

โครงสร้างที่จำเป็น: TabHost → LinearLayout → TabWidget (@android:id/tabs) + FrameLayout (@android:id/tabcontent)

ขั้นตอนที่ 3: MainActivity.java

package com.example.myapplication;

import android.os.Bundle;
import android.widget.TabHost;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabHost tabHost = findViewById(R.id.tabhost);
        tabHost.setup(); // สำคัญ: ต้องเรียก setup() ก่อนเพิ่มแท็บ

        // แท็บที่ 1
        TabHost.TabSpec spec1 = tabHost.newTabSpec("tab1");
        spec1.setContent(R.id.tab1);
        spec1.setIndicator("แท็บแรก");
        tabHost.addTab(spec1);

        // แท็บที่ 2
        TabHost.TabSpec spec2 = tabHost.newTabSpec("tab2");
        spec2.setContent(R.id.tab2);
        spec2.setIndicator("แท็บที่สอง");
        tabHost.addTab(spec2);
    }
}

วิธีทันสมัย: TabLayout + ViewPager2 (แนะนำ)

สำหรับโปรเจกต์ใหม่ ควรใช้ Material Design Components:

Dependency

dependencies {
    implementation 'com.google.android.material:material:1.11.0'
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

Layout

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

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Activity/Fragment

// ใน Activity
ViewPager2 viewPager = findViewById(R.id.viewPager);
TabLayout tabLayout = findViewById(R.id.tabLayout);

viewPager.setAdapter(new FragmentStateAdapter(this) {
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return switch (position) {
            case 0 -> new Tab1Fragment();
            case 1 -> new Tab2Fragment();
            default -> new Tab1Fragment();
        };
    }

    @Override
    public int getItemCount() {
        return 2;
    }
});

new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
    tab.setText(position == 0 ? "แท็บแรก" : "แท็บที่สอง");
}).attach();

เปรียบเทียบ

สรุป

TabHost ใช้งานได้แต่ถือว่า Deprecated แล้ว สำหรับโปรเจกต์ใหม่ ควรใช้ TabLayout + ViewPager2 ซึ่งเป็นมาตรฐานปัจจุบันของ Android Development