[JAVA][Android] TabHost를 사용하여 탭 화면 만들기

안녕하세요! 이번에는 사용 빈도율이 많이 떨어지지만 TabHost를 사용해 보겠습니다.

 

 

각 탭은 고유한 여러 화면을 나타내며 사용자는 탭을 전환하여 다른 화면으로 이동 할 수 있습니다.

 

MainActivity

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();

        // 첫 번째 탭
        TabHost.TabSpec tabSpec1 = tabHost.newTabSpec("Tab 1");
        tabSpec1.setContent(R.id.tab1);
        tabSpec1.setIndicator("Tab 1");
        tabHost.addTab(tabSpec1);

        // 두 번째 탭
        TabHost.TabSpec tabSpec2 = tabHost.newTabSpec("Tab 2");
        tabSpec2.setContent(R.id.tab2);
        tabSpec2.setIndicator("Tab 2");
        tabHost.addTab(tabSpec2);

        // 세 번째 탭
        TabHost.TabSpec tabSpec3 = tabHost.newTabSpec("Tab 3");
        tabSpec3.setContent(R.id.tab3);
        tabSpec3.setIndicator("Tab 3");
        tabHost.addTab(tabSpec3);
    }
}

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://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"
                android:paddingTop="10dp">

                <!-- Tab 1 Content -->
                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:gravity="center">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="This is Tab 1"
                        android:textSize="24sp" />
                </LinearLayout>

                <!-- Tab 2 Content -->
                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:gravity="center">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="This is Tab 2"
                        android:textSize="24sp" />
                </LinearLayout>

                <!-- Tab 3 Content -->
                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:gravity="center">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="This is Tab 3"
                        android:textSize="24sp" />
                </LinearLayout>

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

 

시연화면