[Android]Tab widget

▶ Tab 위젯

버튼을 두고 그 버튼을 눌러 서브 화면을 전환하는 방식처럼 하나의 뷰에서 여러 개의 정보를 보고자 할때 일반적으로 사용하는 뷰로 탭(Tab)위젯을 들 수 있습니다. 탭 위젯은 안드로이드의 전화번호부를 비롯한 몇 개의 기본 애플리케이션에서 볼 수 있는 뷰로 각각의 서브 화면이 탭 위젯 상단에 있는 탭을 누를 때 마다 전환되어 나타납니다. 

이 탭 위젯은 크게 세가지 구성 요소를 포함하고 있는데, TabHost, TabWidget, Frame Layout 입니다. 탭의 구성요소 중에서 탭 위젯 전체는 탭 호스트라고 부르며 이 탭 호스트는 크게 상단의 탭 위젯과 하단의 프레임 레이아웃으로 구성 됩니다. 상단의 탭 위젯에는 각각의 서브 화면을 선택할 수 있는 탭들이 추가되어 있고 하단의 프레임 레이아웃은 프레임 레이아웃이 가지는 기본적인 특징인 여러 뷰들을 중첩하여 추가하여도 하나의 뷰만 보인다는 점을 이용하여 정의 합니다. 즉 나머지 뷰들은 가시성 속성만 변경하여 서브 화면 중에서 보고자 하는 하나의 화면만을 View.VISIBLE로 설정하여 보여줍니다. 

탭을 화면에 추가할 때는 기본 액티비티 클래스가 아닌 TabActivity 클래스를 사용합니다. 이 탭 액티비티 클래스에는 탭을 사용할 때 필요한 메소드나 속성들이 미리 정의되어 있으므로 탭 자체를 사용하기 편리합니다. TabActivity에서 탭 호스트 객체를 참조할 때는 getTabHost() 메소드를 사용합니다.

[Reference]

TabHost getTabHost()

탭 호스트는 기본적으로 아무것도 없이 비어 있으므로 여기에 새로운 서브 화면들을 추가해야 합니다. 새로운 탭을 추가하기 위해서는 addTab() 메소드를 사용하는데 파라미터로 전달되는 TabSpec 객체는 newTabSpec() 메소드를 이용해 만들 수 있습니다.

[Reference]

void addTab(TabHost.TabSpec tabSpec)

TabHost.TabSpec newTabSpec (String tag)

TabSpec 객체는 탭 정보를 담고 있는데 이 정보는 상단에 표시하는 각 탭의 이름과 서브 화면의 내용을 담고 있는 뷰 그리고 탭을 코드 상에서 구분하기 위한 이름으로 나누어져 있습니다. 상단에 표시하는 각 탭의 이름은 Indicator라고 부르는데 인디케이터와 탭의 내용을 설정하는 메소드는 각각 setIndicator()와 setContent()입니다.

[Reference]

TabHost.TabSpec setIndicator(CharSequence label[. Drawable icon])

TabHost.TabSpec setContent(int viewId)

TabHost.TabSpec setContent(TabHost.TabContentFactory contentFactory)

TabHost.TabSpec setContent(Intent intent)

▷ SampleTabActivity.java

import android.app.TabActivity;

import android.content.Intent;

import android.os.Bundle;

import android.widget.TabHost;

public class SampleTabActivity extends TabActivity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        

        // setup tab widget

        setupTabs();

    }

    

    private void setupTabs() {

     TabHost tabs = getTabHost();

    

     // TAB 01 

     TabHost.TabSpec spec = null;

     Intent intent = null;

    

     spec = tabs.newTabSpec("tab01");

     intent = new Intent(this, SubPage01Activity.class);

     intent.putExtra("mode", "new");

     intent.putExtra("initialize", true);

     intent.putExtra("request", true);

     intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);

     spec.setContent(intent);

    

     spec.setIndicator("SubPage01");

     tabs.addTab(spec);

    

     // TAB 02

     spec = tabs.newTabSpec("tab02");

     intent = new Intent(this, SubPage02Activity.class);

     intent.putExtra("mode", "new");

     intent.putExtra("initialize", true);

     intent.putExtra("request", true);

     intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);

     spec.setContent(intent);

    

     spec.setIndicator("SubPage02");

     tabs.addTab(spec);

    

     // TAB 03

     spec = tabs.newTabSpec("tab03");

     intent = new Intent(this, SubPage03Activity.class);

     intent.putExtra("mode", "new");

     intent.putExtra("initialize", true);

     intent.putExtra("request", true);

     intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);

     spec.setContent(intent);

    

     spec.setIndicator("SubPage03");

     tabs.addTab(spec);

    

     // set current tab

     tabs.setCurrentTab(0);

    }

}

▷ /res/layout/main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

<TabHost 

   android:id="@android:id/tabhost"

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

   >

   <LinearLayout 

       android:layout_width="fill_parent"

       android:layout_height="fill_parent"

       android:orientation="vertical"

       >

       <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"

               >

           </FrameLayout>

   </LinearLayout>

</TabHost>

</LinearLayout>

▷ /res/layout/subpage01.xml, /res/layout/subpage02.xml, /res/layout/subpage03.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

<TextView 

   android:id="@+id/text01"

   android:layout_width="fill_parent"

   android:layout_height="wrap_content"

   android:background="#ff0000cc"

   android:text="첫 번째 페이지"

   android:textSize="20dp"

   android:focusable="true"

   />

<Button 

   android:id="@+id/button01"

   android:layout_width="160dp"

   android:layout_height="wrap_content"

   android:text="보여주기"

   android:textSize="20dp"

   android:textStyle="bold"

   />

</LinearLayout>

▷ AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.sampletab"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="15" />

    <application

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name=".SampleTabActivity"

            android:label="@string/title_activity_sample_tab" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

        <activity

            android:name=".SubPage01Activity" >           

        </activity>

        <activity

            android:name=".SubPage02Activity" >           

        </activity>

        <activity

            android:name=".SubPage03Activity" >           

        </activity>

    </application>

</manifest>

[결과]