[Android Dev.] Tab 사용하기

Tab 의 구성

Android 의 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 ); }