TabHost

Project : TabBarDemo

สําหรับโปรเจ็กนี้ จะแนะนําให้รู้จักกับ TabHost โดยที่เราจะใส่ TextView ไว้ ใน Tab แรก ส่วน Tab ที่
สอง เป็น Clock

<?xml version="1.0" encoding="utf-8"?>

<TabHost
android:id="@+id/tabHost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >

<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" >

<LinearLayout
android:id = "@+id/tab1"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical"
android:gravity = "center" >
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "This is Tab1"
android:textSize = "18pt" >
</TextView>
</LinearLayout>

<LinearLayout
android:id = "@+id/tab2"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical"
android:gravity = "center" >
<AnalogClock
android:layout_width = "wrap_content"
android:layout_height = "wrap_content" >
</AnalogClock>
</LinearLayout>
</FrameLayout>
</TabHost>
 <TabHost
android:id="@+id/tabHost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >

Code XML ในการจัด Layout ของ TabHost

id : มีชื่อตัวแปลว่า TabHost
width : กว้าง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
height : สูง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ

<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TabWidget>

Code XML ในการจัด Layout ของ TabWidget

id : มีชื่อตัวแปรว่า tabs
width : กว้าง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ TabHost
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ขนาดตัวอักษรปกติของ TabBar

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

Code XML ในการจัด Layout ของ ListView

id : มีชื่อตัวแปรว่า tabcontent
width : กว้าง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ TabHost
height : สูง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ TabHost
 <LinearLayout
android:id = "@+id/tab1"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical"
android:gravity = "center" >
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "This is Tab1"
android:textSize = "18pt" >
</TextView>
</LinearLayout>

Code XML ในการจัด Layout ของ LinearLayout และ TextView ข้างใน

id : มีชื่อตัวแปรว่า tab1
width : กว้าง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ FrameLayout
height : สูง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ FrameLayout
orientation : vertical คืออะไรก็ตามที่ใส่เข้าไปจะเรียงต่อกันไปในแนวดิ่ง
gravity : center เป็นการกําหนดให้ข้อมูลที่อยู่ภายในเรียงกันอยู่ตรงกลาง

<LinearLayout
android:id = "@+id/tab2"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical"
android:gravity = "center" >
<AnalogClock
android:layout_width = "wrap_content"
android:layout_height = "wrap_content" >
</AnalogClock>
</LinearLayout>

Code XML ในการจัด Layout ของ LinearLayout และ TextView ข้างใน

id : มีชื่อตัวแปรว่า tab2
width : กว้าง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ FrameLayout
height : สูง เท่ากับ ขนาดของ Parent ที่มันอยู่ ในที่นี้คือ FrameLayout
orientation : vertical คืออะไรก็ตามที่ใส่เข้าไปจะเรียงต่อกันไปในแนวดิ่ง
gravity : center เป็นการกําหนดให้ข้อมูลที่อยู่ภายในเรียงกันอยู่ตรงกลาง
 import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;

public class TabBarDemo extends Activity {

TabHost tabBar;
TabHost.TabSpec spec;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

tabBar = (TabHost)findViewById(R.id.tabHost);
tabBar.setup();

spec = tabBar.newTabSpec("Tab1");
spec.setContent(R.id.tab1);
spec.setIndicator("Tab1");
tabBar.addTab(spec);

spec = tabBar.newTabSpec("Tab2");
spec.setContent(R.id.tab2);
spec.setIndicator("Clock");
tabBar.addTab(spec);
}
}

TabHost tabBar;
TabHost.TabSpec spec;

Code Java ในการประกาศตัวแปร TabHost กับ TabSpace

tabBar = (TabHost)findViewById(R.id.tabHost);
tabBar.setup();

Code Java ในการการเชื่อม ตัวแปร TabHost กับ Layout ( XML )

ต่อมาเราก็มาสร้าง ข้อมูลใน Tab กัน
วิธีการ
1. สร้าง TabSpace จะได้ว่า ด้วยฟังก์ชัน newTabSpace ของ TabHost

spec = tabBar.newTabSpec("Tab1");
 2. ใส่ข้อมูลใน Tab นั้นจาก id ที่สร้างไว้สําหรับ Tab แรก ในที่นี้คือ
LinearLayout ที่มี่ชื่อ id ว่า tab1 จะได้ว่า

spec.setContent(R.id.tab1);

3. กําหนดชื่อ Tab ที่แสดงให้ User เห็น ด้วยฟังก์ชัน setIndicator จะได้ว่า

spec.setIndicator("Tab1");

4. Add TabSpace ลงไปใน TabHost ด้วยฟังก์ชัน AddTab จะได้ว่า

tabBar.addTab(spec);

สําหรับ Tab ที่ 2 ก็จะมีวิธีการเมือนกับ Tab ที่ 1 ดังนั้นจะได้ว่า

spec = tabBar.newTabSpec("Tab2");
spec.setContent(R.id.tab2);
spec.setIndicator("Clock");
tabBar.addTab(spec);

drbomkung@gmail.com