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

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

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

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

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

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

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

 

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

 

tab.xml

view source

print?

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

02	android:layout_width="fill_parent"

03	android:layout_height="fill_parent">

04	<TextView android:layout_width="fill_parent"

05	android:layout_height="fill_parent"

06	android:id="@+id/view1"

07	android:background="@drawable/blue"

08	android:text="첫번째 탭 화면" />

09	<TextView android:layout_width="fill_parent"

10	android:layout_height="fill_parent"

11	android:id="@+id/view2"

12	android:background="@drawable/red"

13	android:text="두번째 탭 화면" />

14	<TextView android:layout_width="fill_parent"

15	android:layout_height="fill_parent"

16	android:id="@+id/view3"

17	android:background="@drawable/green"

18	android:text="세번째 탭 화면" />

19	</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 함수를 사용하면 된다.

view source

print?

01	import android.app.TabActivity;

02	import android.os.Bundle;

03	import android.view.LayoutInflater;

04	import android.widget.TabHost;

05

06	import com.example.android.apis.R;

07

08	public class Tabs1 extends TabActivity {

09

10

@Override

11	protected void onCreate(Bundle savedInstanceState) {

12	super.onCreate(savedInstanceState);

13	TabHost tabHost = getTabHost();

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

15

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

17	.setIndicator("tab1")

18	.setContent(R.id.view1));

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

20	.setIndicator("tab2")

21	.setContent(R.id.view2));

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

23	.setIndicator("tab3")

24	.setContent(R.id.view3));

25

}

26

}

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

 

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

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

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

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

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

반환한다.

view source

print?

01	import android.app.TabActivity;

02	import android.os.Bundle;

03	import android.widget.TabHost;

04	import android.widget.TextView;

05	import android.view.View;

06	import com.example.android.apis.R;

07

08	public class Tabs2 extends TabActivity implements TabHost.TabContentFactory {

09

10

@Override

11	protected void onCreate(Bundle savedInstanceState) {

12	super.onCreate(savedInstanceState);

13

14	final TabHost tabHost = getTabHost();

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

16	.setIndicator("tab1", getResources().getDrawable(R.drawable.star_big_on))

17	.setContent(this));

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

19	.setIndicator("tab2")

20	.setContent(this));

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

22	.setIndicator("tab3")

23	.setContent(this));

24

}

25

26	/** {@inheritDoc} */

27	public View createTabContent(String tag) {

28	final TextView tv = new TextView(this);

29	if (tag.equals("tab1")) {

30	tv.setText("탭컨텐츠 Indicator tab1 명 : " + tag);

31	}else if (tag.equals("tab2")) {

32	tv.setText("탭컨텐츠 Indicator tab2 명 : " + tag);

33	}else if (tag.equals("tab3")) {

34	tv.setText("탭컨텐츠 Indicator tab2 명 : " + tag);

35

}

36	return tv;

37

}

38

}

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

 

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

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

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

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

view source

print?

01	import android.app.TabActivity;

02	import android.os.Bundle;

03	import android.widget.TabHost;

04	import android.content.Intent;

05

06	public class Tabs3 extends TabActivity {

07

08

@Override

09	protected void onCreate(Bundle savedInstanceState) {

10	super.onCreate(savedInstanceState);

11

12	final TabHost tabHost = getTabHost();

13

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

15	.setIndicator("list1")

16	.setContent(new Intent(this, ListSampleView1.class)));

17

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

19	.setIndicator("list2")

20	.setContent(new Intent(this, ListSampleView2.class)));

21

22	// 클릭할때 마다 리플레쉬

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

24	.setIndicator("destroy")

25	.setContent(new Intent(this, Controls2.class)

26	.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));

27

}

28

}

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

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

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