[Android Dev.] Tab 사용하기 - TabWidget 과 FrameLayout 구성

TabHost 에 포함되는 TabWidget 와 FrameLayout 은 TabHost 컨테이너에 포함되는 구성 요소이지만 그려지는 원점이 서로 같아서 항상 TabWidget 의 높이를 FrameLayout의 paddingTop 으로 설정을 해 주야 한다.

FrameLayout 의 paddingTop 이 설정되지 않은 경우

하지만 이러한 과정은 항상 TabWidget 의 높이를 확인해서 FrameLayout 의 paddingTop을 설정해 주어야 하기에 불편함이 있다. 이를 쉽게 해소하기 위해서는 TabHost 안에 구성되는 TabWidget 와 FrameLayout 을 LinearLayout 컨테이너에 포함시켜 구성하면 쉽게 해결할 수 있다.

LinearLayout 컨테이너에 TabWidget 과 FrameLayout 을 담은 경우

TabWidget 와 FrameLayout을 padding 으로 구성하는 경우

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TabHost
        android:id="@+id/tabHost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    >    
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
        >
            <LinearLayout
                android:id="@+id/layout"
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
                <AnalogClock
                    android:id="@+id/clockAnalog"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal" 
                    />
                <DigitalClock
                    android:id="@+id/clockDigital"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    />
            </LinearLayout>
            <Button 
                android:id="@+id/btnClickme"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="The Button.\nClick me!"
                />        
        </FrameLayout>
    </TabHost>
</LinearLayout>

TabWidget 와 FrameLayout을 으로 LinearLayout 으로 구성하는 경우

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TabHost
        android:id="@+id/tabHost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    >
    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
    >     
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
        >
            <LinearLayout
                android:id="@+id/layout"
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
                <AnalogClock
                    android:id="@+id/clockAnalog"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal" 
                    />
                <DigitalClock
                    android:id="@+id/clockDigital"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    />
            </LinearLayout>
            <Button 
                android:id="@+id/btnClickme"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="The Button.\nClick me!"
                />        
        </FrameLayout>
    </LinearLayout>
    </TabHost>
</LinearLayout>

Original Post : http://neodreamer-dev.tistory.com/418