board > 안드로이드

Tab 의 구성

Andtorid 의 Tab 은 3가지 요소로 구성되어 있다.

Tab Host : 전체 Tab 을 구성하는 Tab Widget 와 FrameLayout 을 포함 하는 컨테이너
Tab Widget : Tab 버튼을 담고 있는 컨테이너
FrameLayout : Tab 버튼에 따라 보여질 내용을 담고 있는 컨테이너

TabActivity상속 받아 Activity를 구현 할 때(Tab 자체가 Activity의 main 화면일 때) TabHost의 id는 항상 "@android:id/tabhost"로 설정 하여야 한다.

Tab Widget 는 아이콘과 텍스트로 구성이 되는데 ID는 항상 "@android:id/tabs" 이어야 하며 텍스트만으로 구성이 되더라도 최소 높이가 62px 이다.

Tab Widget

FrameLayout 은 TabHost 에 포함되는 컨테이너로 TabHost 내의 좌상단(0,0)에서 그려지게 되는데 TabHost 의 상단에는 Tab Widget가 표현되고 있어 Tab Widget을 가리게 된다. 따라서 가려지는 일을 피하려면 Tab Widget 높이 만큼 FrameLayout 의 padding-top 을 설정해 주어야 한다.

FrameLayout 의 padding-top 이 0px 인 경우

탭 생성하는 절차

findViewById 로 xml 리소스에서 Tab 가져오기
setup() 함수 호출
TabHost.TabSpec 객체를 활용하여 탭을 구성하고 추가하기
활성화할 Tab 인데스 지정

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 <TabHost
  android:id="@+id/tabHost"
  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"
   android:paddingTop="0px"
  >
   <LinearLayout
    android:id="@+id/layout"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <AnalogClock
     android:id="@+id/clockAnalog"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center_horizontal" 
     />
    <DigitalClock
     android:id="@+id/clockDigital"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center_horizontal"
     />
   </LinearLayout>
   <Button 
    android:id="@+id/btnClickme"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="The Button.\nClick me!"
    />  
  </FrameLayout>
 </TabHost>
</LinearLayout>

java source

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        setContentView(R.layout.main);
        
        TabHost tabHost = (TabHost)findViewById( R.id.tabHost );
        
        // TabHost 를 findViewById 로 생성한 후 Tab 추가 전에 꼭 실행해 주어야 함.
        tabHost.setup();
        
        // 새로운 Tab 을 생성하기 위한 Tab 객체 생성
        TabHost.TabSpec spec;
        
        // 첫 번째 Tab 설정 및 등록
        spec = tabHost.newTabSpec( "Tab 00" );  // 새 Tab 생성
        spec.setIndicator("Clock");    // Tab 제목
        spec.setContent(R.id.layout);   // Tab 내용
        tabHost.addTab( spec );     // 생성 된 Tab 등록
        
        // 두 번째 Tab 설정 및 등록        
        spec = tabHost.newTabSpec( "Tab 01" );  // 새 Tab 생성
        spec.setIndicator( "Button", getResources().getDrawable(R.drawable.icon) );   // Tab 제목
        spec.setContent( R.id.btnClickme );  // Tab 내용
        tabHost.addTab( spec );     // 생성 된 Tab 등록
        
        // 첫 번째 탭을 활성화 
        tabHost.setCurrentTab( 0 );
    }