Android วิธีการทำ Tab Menu คล้ายๆ Line

Tab Menu ของ Line นั้นคล้ายๆ รูปแทนที่จะเป็นตัวอักษร มีความสวยงาม ซึ่งประกอบไปด้วย 10 ไฟล์ คือ activity_main.xml, activity_one.xml, activity_two.xml, activity_three.xml, activity_four.xml , OneActivity.java , TwoActivity.java , ThreeActivity.java และ MainActivity.java

Tab menu ของ Line

Tab Menu ที่จะทำกัน

วิธีนี้เป็นที่นิยมในการทำ android เพราะสามารถปรับแต่งหน้า layout ของแต่ละ Tab ได้อิสระ และยังปรับโค้ดของส่วน java ของแต่ละหน้าได้อีกด้วย

หมายเหตุ : ไฟล์รูปนั้นต้องเตรียมมาเองสำหรับขั้นตอนนี้ โดยจะแบ่งเป็น 2 อย่างคือ รูปที่ยังไม่กดปุ่ม กับ รูปที่กดปุ่มแล้ว

Example : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
     
    <LinearLayout
        android:orientation="vertical"
        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"/>
             
    </LinearLayout>
     
</TabHost>

Example : activity_one.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:text="One"
             android:padding="15dip"
             android:textSize="18sp"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
 </LinearLayout>

Example : activity_two.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:text="Two"
             android:padding="15dip"
             android:textSize="18sp"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
 </LinearLayout>

Example : activity_three.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:text="Three"
             android:padding="15dip"
             android:textSize="18sp"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
 </LinearLayout>

Example : activity_four.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:text="Four"
             android:padding="15dip"
             android:textSize="18sp"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"/>
 </LinearLayout>

Example : MainActivity.java

package com.example.tabhost4;

import android.os.Bundle;
import android.os.StrictMode;
import android.content.Intent;
import android.util.Log;
import android.widget.TabHost;
import android.app.TabActivity;
import android.widget.TabHost.OnTabChangeListener;

public class MainActivity extends TabActivity implements OnTabChangeListener {
 
 TabHost tabHost;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        if (android.os.Build.VERSION.SDK_INT > 9) {
            StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
            StrictMode.setThreadPolicy(policy);
        }

        tabHost = getTabHost();
         

        tabHost.setOnTabChangedListener(this);
     
        TabHost.TabSpec spec;
        Intent intent;

        intent = new Intent().setClass(this, OneActivity.class);
        spec = tabHost.newTabSpec("One").setIndicator("")
                      .setContent(intent);
        tabHost.addTab(spec);
   

        intent = new Intent().setClass(this, TwoActivity.class);
        spec = tabHost.newTabSpec("Two").setIndicator("")
                      .setContent(intent);  
        tabHost.addTab(spec);
   
        
        intent = new Intent().setClass(this, ThreeActivity.class);
        spec = tabHost.newTabSpec("Three").setIndicator("")
                      .setContent(intent);
        tabHost.addTab(spec);
        
        intent = new Intent().setClass(this, FourActivity.class);
        spec = tabHost.newTabSpec("Four").setIndicator("")
                      .setContent(intent);
        tabHost.addTab(spec);
   

        tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.clock);
        tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.cloud);
        tabHost.getTabWidget().getChildAt(3).setBackgroundResource(R.drawable.compass);
           

        tabHost.getTabWidget().setCurrentTab(0);
        tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.clipboard2);
         
   
     }

   public void onTabChanged(String tabId) {
    for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
       {
           if(i==0)
               tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.clipboard);
           else if(i==1)
               tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.clock);
           else if(i==2)
               tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.cloud);
           else if(i==3)
            tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.compass);
       }

    if(tabHost.getCurrentTab()==0)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.clipboard2);
    else if(tabHost.getCurrentTab()==1)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.clock2);
    else if(tabHost.getCurrentTab()==2)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.cloud2);
    else if(tabHost.getCurrentTab()==3)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.compass2);
         
    }

}

Example : OneActivity.java

package com.example.tabhost3;

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

public class OneActivity extends Activity {
 
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
      }

}

Example : TwoActivity.java

package com.example.tabhost3;

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

public class TwoActivity extends Activity {
 
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);
      }
 

}

Example : ThreeActivity.java

package com.example.tabhost3;

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

public class ThreeActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_three);
      }
}

Example : FourActivity.java

package com.example.tabhost3;

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

public class ThreeActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_four);
      }
}

หมายเหตุ : เนื่องมีการเปลี่ยนหน้าแบบ intent ดังนั้นต้องไปเพิ่ม activity ในส่วนของ AndroidManifest ด้วย

Example : AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.tabhost4"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity 
            android:name="com.example.tabhost4.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>        
        </activity>
        <activity 
            android:name="com.example.tabhost4.OneActivity"
            android:label="@string/app_name" >
        </activity>
        <activity 
            android:name="com.example.tabhost4.TwoActivity"
            android:label="@string/app_name" >
        </activity>
        <activity 
            android:name="com.example.tabhost4.ThreeActivity"
            android:label="@string/app_name" >
        </activity>
        <activity 
            android:name="com.example.tabhost4.FourActivity"
            android:label="@string/app_name" >
        </activity>
    </application>

</manifest>

ผลลัพธ์ : 

ที่มา : androidexample