관리 메뉴

moozi

TabWidget 사용하기 1 - 기본형 본문

안드로이드개발강좌

TabWidget 사용하기 1 - 기본형

moozi 2010. 1. 23. 14:35

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 로 실행합니다.

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


4 Comments
  • 프로필사진 일단달려 2010.05.10 23:32 안녕하세요? 안드로이드 막 공부 시작한 학생입니다^^ 안드로사이드에서 강좌 보다가 너무 좋아서 여기까지 찾아왔답니다 ㅎㅎ
    문제가 하나 있는데요 제가 모토로이(2.1)로 test하면서 공부중인데요 여태까지 잘 되다가 TabWidget에서 빌드시 이클립스 에러는 없는데요 단말기에서만 "예기치 않게 중지되었습니다" 이멘트 개속 뜨네요.. 어찌 해결해야하는지 ㅜㅜ
  • 프로필사진 moozi 2010.05.10 23:52 신고 일단달려님 안녕하세요?

    질문하신 부분은 저도 이유를 잘 모르겠어요... 에뮬레이터2.1 에서 잘 도는데 모토로이2.1에서 안도는 건가요?
  • 프로필사진 일단달려 2010.05.11 00:09 아이고,,, 밤늦게 죄송해요^^: 목욕재개하고 나니 xml에서 틀린곳이 보이네요^^:
    신경써주셔서 감사합니다 ^^
  • 프로필사진 moozi 2010.05.11 10:18 신고 잘 해결되셔서 다행입니다. ^^
댓글쓰기 폼