안드로이드(android) 탭(TabActivity) 3가지 구현하기

안드로이드(android) 탭(TabActivity) 3가지 구현하기

 

개발환경 : JDK 1.5, eclipse-galileo, Android GoogleAPI 2.1, window XP

 

3가지 방법으로 탭구현 예제를 기술할것이다.

첫번째는 탭 컨트롤 화면마다 위젯 컨트롤을 추가하는 것이다. 각 탭별로

화면을 꽉 채울 TextView 가 추가 된다. 추가되는 TextView는 각각 background

색깔이 틀릴것이다. 두번째는 tab 추가시 붙여진 아이디로 어떤 탭이 클릭

되었는지 판단해서 View 를 표현 하는것이다. 세번째는 Activity 화면

전체를 tab 에 추가하는 방법이다.

 

(1) 탭 화면별 컨트롤 추가하기

 

tab.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent">
   	<TextView android:layout_width="fill_parent" 
    	android:layout_height="fill_parent" 
    	android:id="@+id/view1" 
    	android:background="@drawable/blue" 
    	android:text="첫번째 탭 화면" />
    <TextView android:layout_width="fill_parent" 
	    android:layout_height="fill_parent" 
	    android:id="@+id/view2" 
	    android:background="@drawable/red" 
	    android:text="두번째 탭 화면" />
    <TextView android:layout_width="fill_parent" 
	    android:layout_height="fill_parent" 
	    android:id="@+id/view3" 
	    android:background="@drawable/green" 
	    android:text="세번째 탭 화면" />
</FrameLayout>

화면을 구성할 Activity 는 TabActivity 를 상속받아 만든다. 상속받아 만들게 되면

getTabHost() 함수로 TabHost 객체를 리턴받을수 있다. 리턴 받은 TabHost 로

탭에 대한 데이터를 추가하면 된다. 화면을 구성할 layout xml 은 일반 Activity

처럼 setContentView 로 셋팅할수 없다. LayoutInflater 객체로 생성한다.

 

LayoutInflater.from(this).inflate(R.layout.tabs1,tabHost.getTabContentView(),true);

 

그리고 addTab 함수를 사용해 탭을 추가할수 있다. 추가할때 탭 타이틀명은

newTabSpec 에 넣으면된다. 탭을 구분할 id 는 setIndicator 이며 컨트롤을 추가는

setContent 함수를 사용하면 된다.

import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

import com.example.android.apis.R;

public class Tabs1 extends TabActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TabHost tabHost = getTabHost();
        LayoutInflater.from(this).inflate(R.layout.tabs1, tabHost.getTabContentView(), true);

        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1")
                .setContent(R.id.view1));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab2")
                .setContent(R.id.view2));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab3")
                .setContent(R.id.view3));
    }
}

(2) 탭별 아이디로 구분하여 표현하기

 

탭에 아이콘을 추가하는 방법과 탭생성시 추가한 id 로 View 함수를 통해

구분하여 각각 구현하는 예제이다. 아이콘을 추가하는 부분은 setIndicator 함수의

두번째 파라미터로 아이콘 리소스를 넘기면 된다. 이 소스에는 layout 을 구성하는

xml 이 존재하지 않는다. TabHost.TabContentFactory 을 implements 해서

createTabContent 를 오버로딩해서 구현하면 된다. 그리고 넘길 때 View 객체를

반환한다.

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TextView;
import android.view.View;
import com.example.android.apis.R;

public class Tabs2 extends TabActivity implements TabHost.TabContentFactory {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        final TabHost tabHost = getTabHost();
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1", getResources().getDrawable(R.drawable.star_big_on))
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("tab2")
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab3")
                .setContent(this));
    }

    /** {@inheritDoc} */
    public View createTabContent(String tag) {
        final TextView tv = new TextView(this);
        if (tag.equals("tab1")) {
        	tv.setText("탭컨텐츠 Indicator tab1 명 : " + tag);
		}else if (tag.equals("tab2")) {
			tv.setText("탭컨텐츠 Indicator tab2 명 : " + tag);
		}else if (tag.equals("tab3")) {
			tv.setText("탭컨텐츠 Indicator tab2 명 : " + tag);
		}
        return tv;
    }
}

(3) Activity 를 Tab 별 화면에 추가하기

 

3번째 방법도 layout xml 이 존재하지 않는다. setContent 함수에 호출할 Activity

클래스를 넣어주면 된다. 화면전환할때 사용하는 Intent 객체를 쓰면 된다.

그리고 3번째 탭에서 Intent.FLAG_ACTIVITY_CLEAR_TOP 를 썻는데 이것은

탭을 클릭할 때 마다 내부에 표현되는 컨텐츠가 리플레쉬 되게 하는 옵션이다.

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.content.Intent;

public class Tabs3 extends TabActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        final TabHost tabHost = getTabHost();

        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("list1")
                .setContent(new Intent(this, ListSampleView1.class)));

        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("list2")
                .setContent(new Intent(this, ListSampleView2.class)));
        
        // 클릭할때 마다 리플레쉬 
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("destroy")
                .setContent(new Intent(this, Controls2.class)
                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));
    }
}

예제에서 파라미터로 넘긴 Class 들은 Activity 클래스들이다.

이제 이런 내용들을 기초로 해서 좀더 업그레이드 해보자. 탭에 마우스를 올렸을때, 클릭했을때 

이벤트를 인식해서 색깔을 바꾼다던지 그림을 바꿔서 좀더 고급스러운 탭을 만들어 보자...