Please Enable JavaScript!
Gon[ Enable JavaScript ]

안드로이드(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 클래스들이다.

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

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

반응형
Posted by 녹두장군1
,