[안드로이드] Tab(탭) 레이아웃

오랜만에 안드로이드 포스팅이네요.

 

안드로이드 Tab 위젯을 이용하는 방법에 대한 포스팅 입니다.

 

 

Tab 레이아웃은 위와 같이 메뉴와 메뉴에 종속된

화면으로 구성되어 있습니다.

 

Tab의 구성요소에 대해

http://blog.naver.com/dangdang11?Redirect=Log&logNo=80161253137 을 참고하면,

 

Tab 전체를 구성하는 TabHost와

메뉴단을 구성하는 TabWidget

그리고 화면을 구성하는 레이아웃으로 이루어 졌다고 할 수 있겠습니다.

 

그러면 먼저 레이아웃을 구성해보면(xml file),

 

<TabHost android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" > </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ScrollView android:id="@+id/tab1" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TableRow android:id="@+id/tableRow1" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="test12" android:textAppearance="?android:attr/textAppearanceMedium" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="test2" android:textAppearance="?android:attr/textAppearanceMedium" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </TableRow> </ScrollView> <ScrollView android:id="@+id/tab2" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="test3" android:textAppearance="?android:attr/textAppearanceMedium" /> </ScrollView> </FrameLayout> </LinearLayout> </TabHost>

 

위의 레이아웃 중

핵심은 FrameLayout 안에 Tab에서 구성할

화면의 레이아웃을 넣는 것입니다.

 

저 같은 경우는 ScrollLayout으로 tab1과 tab2를 만들어 보았습니다.

 

그리고 엑티비티를 구성하는 자바 파일에서는,

 

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabHost tab_host = (TabHost) findViewById(R.id.tabhost); tab_host.setup(); TabSpec ts1 = tab_host.newTabSpec("tab1"); ts1.setIndicator("tab1"); ts1.setContent(R.id.tab1); tab_host.addTab(ts1); TabSpec ts2 = tab_host.newTabSpec("tab2"); ts2.setIndicator("tab2"); ts2.setContent(R.id.tab2); tab_host.addTab(ts2); tab_host.setCurrentTab(0); }

 

이런식으로 Tabhost를 Seting한 후,

TabSpec에 각 Tab을 구성할 화면을 Seting 해주면 되는데,

여기 setContent에서 넣을 것은 위의 FrameLayout안에 넣어두었던 레이아웃들입니다.