[Android] 안드로이드 탭

안드로이드에서 제공하는 Tab은 탭별로 서로 다른 화면을 열 수 잇다.

- TabHost : 탭지시자와 탭 내용물을 포함하는 탭의 컨테이너를 의미한다.

- Indicator : 탭을 구분하는 작은 박스를 말한다. 개별 탭은 각각 고유한 이름과 아이콘(옵션)을 갖게 된다. XML 요소는 TabWidget이라고 표한한다.

- Content은 선택된 탭에 대한 내용을 표시하는 화면이 된다. XML 문서로 표시할 때는 보통 프레임 레이아웃으로 명시한다.

▶ TabActivity 클래스를 이용한 동적인 구성

1) TabHost 객체 생성

: TabHost 객체는 TabActivity 클래스 내 getTabHost() 메서드를 사용하여 생성한다. TabActivity클래스는 안드로이드 탭을 만들기 위한 전용 액티비티 클래스 이다.

2) TabHost.TabSpec 클래스의 인스턴스를 만든다.

: TabHost.TabSpec 클래스는 개별적인 탭의 지시자와 내용물을 만드는 기능을 제공한다. TabHost.TabSpec 클래스는 특이하게 자체 생성자를 제공하지 않으며, TabHost 클래스에서 제공하는 newTabSpec(String tag) 메서드를 사용하여 생성한다. 생성된 TabHost.TabSpec 객체는 newTabSpec()메서드와 함께 입력하는 문자열의 매개 변수로 구분하게 된다.

3) 탭의 지시자와 내용물을 만든다

: 탭의 지시자와 내용물을 TabHost.TabSpec 클래스에서 제공하는 각각 3종류의 setIndicator() 메서드와 setContent()메서드를 사용하여 제작한다.

- setIndicator(CharSequence label, Drawable icon)

: 탭의 지시자로 라벨과 아이콘을 지정한다.

- setIndicator(View view)

: 탭의 지시자로 뷰를 지정한다.

- setIndicator(CharSequence label)

: 라벨을 지정한다.

- setContent(TabHost.TabContentFactory contentFactory)

: 탭의 내용물을 생성시킬 TabHost.TabContentFactory 객체를 지정한다.

- setContent(int viewId)

: 탭의 내용물은 XML 문서의 뷰를 사용한다.

- setContent(Intent intent)

: 인텐드(Intent)를 이용하여 다른 액티비티를 호출한다. 

4) 지시자와 내용물을 탭 호스트에 넣는다.

TabHost 클래스에서 제공하는 addTab(TabHost.TabSpec tabSpec) 메서드를 사용하여 생성된 TabHost.TabSpec 객체를 탭호스트를 넣는다.

<?xml version="1.0" encoding="utf-8"?>

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

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <TextView android:id="@+id/view1"

        android:background="@drawable/blue"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="@string/tabs_1" />

    <TextView android:id="@+id/view2"

        android:background="@drawable/red"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="@string/tabs_2" />

    <TextView android:id="@+id/view3"

        android:background="@drawable/green"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="@string/tabs_3" />

</FrameLayout>

import android.app.TabActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.widget.TabHost;

public class ExTabHost extends TabActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

TabHost tabHost = getTabHost();

LayoutInflater.from(ExTabHost.this).inflate(R.layout.tab_ex_01,

tabHost.getTabContentView(), true);

tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1")

.setContent(R.id.view1));

tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("tab2")

.setContent(R.id.view2));

tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")

.setContent(R.id.view3));

}

}

getTabContentView() 메서드는 프레임 레아아웃을 생성하여 반환한다.

[결과]

TabHost.TabContentFactory 인터페이스는 인터페이스는 탭의 content 생성을 위한 다음과 같이 하나의 메서드만 제공한다.

public abstract View createTabContent(String tag)

탭에 대응되는 내용물을 뷰로 반환한다. 매개변수 tag는 newTabSpec(String tag) 메서드의 매개변수로 하나 이상의 탭을 구분하는 정보로 사용한다. createTabContent() 메서드는 사용자가 해당 탭을 선택핼을 때 탭에 대한 내용을 만들기 위해 단 한번 호출된다.

createTabContent() 메서드에 의해 뷰가 생성되면 해당 메서드는 다시 호출되지 않는다.

import android.app.TabActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.TabHost;

import android.widget.TextView;

public class ExTabHost2 extends TabActivity implements

TabHost.TabContentFactory {

View v;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

TabHost tabHost = getTabHost();

LayoutInflater.from(ExTabHost2.this).inflate(R.layout.tab_ex_01,

tabHost.getTabContentView(), true);

tabHost.addTab(tabHost

.newTabSpec("tab1")

.setIndicator(

"tab1",

getResources().getDrawable(

android.R.drawable.star_big_on))

.setContent(R.id.view1));

tabHost.addTab(tabHost

.newTabSpec("tab2")

.setIndicator(

"tab2",

getResources().getDrawable(

android.R.drawable.star_big_off))

.setContent(R.id.view2));

tabHost.addTab(tabHost

.newTabSpec("tab3")

.setIndicator(

"tab3",

getResources().getDrawable(

android.R.drawable.stat_notify_call_mute))

.setContent(this));

}

@Override

public View createTabContent(String tag) {

// TODO Auto-generated method stub

TextView tv = new TextView(this);

tv.setText("Content for tab with tag " + tag);

return tv;

}

}

▶ XML를 이용한 정적인 구성

<?xml version="1.0" encoding="utf-8"?>

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <LinearLayout android:orientation="vertical"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:padding="5dp" >

        <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:padding="5dp" />

    </LinearLayout>

</TabHost>

프레임 레이아웃의 속성상 화면의 상단 좌측에 위치하게 된다.

- 탭호스트와 탭위젯 그리고 프레임레이아웃의 아이디는 반드시 @android:id/tabhost 와 @android;id/tabs, @android:id/tabcontent 로 설정해야 한다.

- TabHost 초기화는 findViewById() 메서드를 통해 탭 호스트의 매핑한 이후 프로그램 내부에서 탭을 추가하기 위해 반드시 TabHost.setup() 메서드를 먼저 실행하여야 한다. 단, TabActivity를 사용해 구현된 탭은 위와 같은 setup() 메서드가 필요하지 않다.

import android.app.TabActivity;

import android.content.Intent;

import android.content.res.Resources;

import android.os.Bundle;

import android.widget.TabHost;

public class ExTabWidget extends TabActivity {

TabHost.TabSpec spec;

Intent intent;

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

TabHost tabHost = getTabHost();

setContentView(R.layout.tabhost_ex_01);

Resources res = getResources();

//tab1.

intent = new Intent().setClass(this, HelloSeekBar.class);

spec = tabHost.newTabSpec("artists")

.setIndicator("Artists", res.getDrawable(android.R.drawable.arrow_down_float))

.setContent(intent);

tabHost.addTab(spec);

//tab2.

intent = new Intent().setClass(this, ManualProgressBar.class);

spec = tabHost.newTabSpec("albums")

.setIndicator("Albums", res.getDrawable(android.R.drawable.arrow_up_float))

.setContent(intent);

tabHost.addTab(spec);

//tab3.

intent = new Intent().setClass(this, HelloSeekBar.class);

spec = tabHost.newTabSpec("songs")

.setIndicator("Songs", res.getDrawable(android.R.drawable.btn_dropdown))

.setContent(intent);

tabHost.addTab(spec);

tabHost.setCurrentTab(2);

}

}