[태그:] <span>FrameLayout</span>

4. 기본 컨트롤 – 13. TabHost

이번에는 같은 영역에 보여줄 컨텐츠를 선택할 수 있게 하여 일관성있는 화면 구성을 할 수 있는 TabHost를 이용하는 간단한 실습을 합시다.

[그림] TabHost 실습 실행화면

먼저 activity_main.xml 파일에 컨트롤을 배치합시다.

TabHost는 TabWidget과 FrameLayout으로 구성합니다. TabWidget은 사용자가 원하는 컨텐츠(혹은 기능)를 선택하는 영역이고 FrameLayout은 컨텐츠 영역입니다.

TabWidget의 id 속성은 @android:id/tabs로 지정하고 FrameLayout의 id 속성은 @android:id/tabcontent로 지정합니다.

여기에서는 언어, 기술, 예제 Tab으로 구성할 것입니다. 각 Tab을 선택하였을 때 컨텐츠를 FrameLayout에 배치합니다. 각 컨텐츠는 간단하게 LinearLayout과 그의 자식으로 TextView를 배치하는 것으로 할게요.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="com.example.ehclub.ex_tabhost.MainActivity"
    android:orientation="vertical">
    <TabHost
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/th">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:paddingTop="70sp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:id="@+id/tab_view1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:textSize="30sp"
                    android:textColor="#0000FF"
                    android:text="프로그래밍 언어"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/tab_view2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:textSize="30sp"
                    android:textColor="#00FF00"
                    android:text="프로그래밍 기술"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/tab_view3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:textSize="30sp"
                    android:textColor="#FF0000"
                    android:text="프로그래밍 실습 예제"/>
            </LinearLayout>
        </FrameLayout>
    </TabHost>
</LinearLayout>

이제 MainActivity.java 파일에 소스 코드를 편집합시다. onCreate 메서드에 TabHost 개체를 참조하기 위해 findViewById 메서드를 호출한 후에 TabHost의 setup 메서드를 호출합니다.

        TabHost th = (TabHost)findViewById(R.id.th);
        th.setup();

세 개의 Tab을 추가할 것입니다. 이를 위해 세 개의 TabSpec 개체를 생성합니다. 화면에 표시할 부분은 setIndicator 메서드로 정하고 매핑할 컨텐츠는 setContent 메서드로 지정합니다. 그리고 TabHost의 addTab 메서드로 탭을 추가합니다.

        TabHost.TabSpec ts1 = th.newTabSpec("Tab1");
        ts1.setIndicator("언어");
        ts1.setContent(R.id.tab_view1);
        th.addTab(ts1);

        TabHost.TabSpec ts2 = th.newTabSpec("Tab2");
        ts2.setIndicator("기술");
        ts2.setContent(R.id.tab_view2);
        th.addTab(ts2);

        TabHost.TabSpec ts3 = th.newTabSpec("Tab3");
        ts3.setIndicator("예제");
        ts3.setContent(R.id.tab_view3);
        th.addTab(ts3);

TabHost의 현재 Tab을 설정할 때는 setCurrentTab메서드를 호출합니다.

        th.setCurrentTab(0);

다음은 MainActivity.java 파일의 내용입니다.

package com.example.ehclub.ex_tabhost;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TabHost;

public class MainActivity extends AppCompatActivity {

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

        TabHost th = (TabHost)findViewById(R.id.th);
        th.setup();


        TabHost.TabSpec ts1 = th.newTabSpec("Tab1");
        ts1.setIndicator("언어");
        ts1.setContent(R.id.tab_view1);
        th.addTab(ts1);

        TabHost.TabSpec ts2 = th.newTabSpec("Tab2");
        ts2.setIndicator("기술");
        ts2.setContent(R.id.tab_view2);
        th.addTab(ts2);

        TabHost.TabSpec ts3 = th.newTabSpec("Tab3");
        ts3.setIndicator("예제");
        ts3.setContent(R.id.tab_view3);
        th.addTab(ts3);

        th.setCurrentTab(0);
    }
}

Android