Geek_Sunmo_Diary_♡ : ): TabWidget 사용하기 -1

TabWidget은 Tab을 이용해서 서로 다른 view를 이동 할 수 있게 해주는 위젯입니다.

먼저 TabWidget의 모습을 보도록 하겠습니다.

[ TabWidget을 실행한 모습 ]

그럼, 안드로드이 개발자 사이트의 내용을 토대로 알아 보겠습니다.

1. 다음과 같이 프로젝트를 생성합니다.

2. 이클립스의 왼쪽 프로젝트 탐색기에서 res -> layout -> main.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="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<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">
<TextView
android:id="@+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a tab" />
<TextView
android:id="@+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is another tab" />
<TextView
android:id="@+id/textview3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a third tab" />
</FrameLayout>
</LinearLayout>
</TabHost>

TabHost 안에 TabWidget이 위치함을 눈여겨 보기 바랍니다.

3. 프로젝트탐색기에서 src -> my.HelloTabWidget -> HelloTabWidget.java 를 열어서 다음과 같이 편집합니다.

package my.HelloTabWidget;

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

public class HelloTabWidget extends TabActivity {
TabHost mTabHost = null;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

mTabHost = getTabHost();

mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1").setContent(R.id.textview1));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2").setContent(R.id.textview2));
mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3").setContent(R.id.textview3));

mTabHost.setCurrentTab(0);
}
}

위의 코드 중 굵은 글씨 부분만 설명하면,

TabHost - Tab으로 구성된 view를 담기위한 컨테이너(Container)
addTab() - Tab을 추가
newTabSpec() - Tab의 Spec( indicator,content,tag )을 만듬. 괄호안의 매개변수값인 tab_test1 등이 tag
setCurrentTab() - 현재 탭을 결정. 처음엔 일반적으로 첫번째 탭(인덱스 0)이 지정됨

와 같습니다.

4. Ctrl + F11 로 실행합니다.

[ 두번째 탭이 선택된 모습 ]

이번에는 TabWidget을 출력할 때 상단의 TitleBar( HellowTablWidget 글씨가 보이는 부분 )을 없애도록 해보겠습니다.

이 강좌는 TabWidget 사용하기 1 에서 이어집니다.

1. 이클립스 프로젝트탐색기에서 res -> AndroidManifest.xml 을 열어서 다음과 같이 편집합니다.

아래 그림의 빨간색박스 부분을 눌러서 AndroidManifest.xml 파일 편집합니다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="my.HelloTabWidget"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar">
<activity android:name=".HelloTabWidget"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

</application>
<uses-sdk android:minSdkVersion="6" />

</manifest>

원래 코드에서 바뀐 부분은 다음 application 태그 입니다.
<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar">

2. Ctrl + F11 로 실행합니다.

[ 실행결과 ]

3. 다음에는 탭에 아이콘을 넣어 보겠습니다. 다음 아이콘 이미지를 다운로드해서 바탕화면에 저장한 다음 프로젝트탐새기에서 res -> drawable-hdpi 폴더에 끌어다 넣습니다.

4. 프로젝트 탐색기에서 src -> my.HelloTabWidget -> HelloTabWidget.java 를 열어서 다음과 같이 편집합니다.

package my.HelloTabWidget;

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

public class HelloTabWidget extends TabActivity {
TabHost mTabHost = null;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

mTabHost = getTabHost();

mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1", getResources().getDrawable(R.drawable.icon1)).setContent(R.id.textview1));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2", getResources().getDrawable(R.drawable.icon2)).setContent(R.id.textview2));
mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3", getResources().getDrawable(R.drawable.icon3)).setContent(R.id.textview3));

mTabHost.setCurrentTab(0);
}
}

굵은 글씨 부분에서 setIndicator메서드 부분이 변경되었습니다.

5. Ctrl + F11 로 실행합니다.