ตัวอย่างการใช้งาน TabView

เตรียม Layout สำหรับ Page 1 และ Page 2 ที่ res/layout

page1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <TextView
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="View in page 1"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:id="@+id/textView1"></TextView>
    
</LinearLayout>

page2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <TextView
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="View in page 2"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:id="@+id/textView1"></TextView>
    
</LinearLayout>

เตรียมไฟล์ icon สำหรับ TabView


Save ไฟล์ดังต่อไปนี้ไว้ที่
res/drawable-hdpi/
res/drawable-ldpi/
res/drawable-mdpi/


ic_tab_1_grey.png



ic_tab_1_white.png



ic_tab_2_grey.png


ic_tab_2_white.png





สร้าไฟล์ xml ที่ res/drawable
ic_tab_1.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_1_white"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_1_grey" />
</selector>

ic_tab_2.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_2_white"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_2_grey" />
</selector>

ในส่วนของ Java

ไฟล์หลัก

package slayer.TabPage;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;

public class TabPageActivity extends TabActivity {
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    Resources res = getResources();
    
       TabHost mTabHost = getTabHost();
      mTabHost.addTab(mTabHost.newTabSpec("one").setIndicator("Page 1",
              res.getDrawable(R.drawable.ic_tab_1)).setContent(new Intent(this,page1.class )));
      mTabHost.addTab(mTabHost.newTabSpec("two").setIndicator("Page 2",
              res.getDrawable(R.drawable.ic_tab_2)).setContent(new Intent(this,page2.class )));
      mTabHost.setCurrentTab(0);
}   
}

ไฟล์ page1.java

package slayer.TabPage;

import android.app.Activity;
import android.os.Bundle;

public class page1  extends  Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.page1);
    }
}

ไฟล์ page2.java

package slayer.TabPage;

import android.app.Activity;
import android.os.Bundle;

public class page2  extends  Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.page2);
    }
}

ทำให้ตัวโปรแกรมรู้จัก Page1 และ Page2 โดยแก้ไขไฟล์ AndroidManifest.xml โดยเพิ่มใน Tag <application>

<activity android:name=".page1"
              android:label="Page1">
</activity>

<activity android:name=".page2"
              android:label="Page2">
</activity>