Android Tab Menu Custom Layout 2

การทำ Tab Menu Custom Layout อีกแบบจะมีด้วยกัน 8 ไฟล์ คือ activity_main.xml, activity_one.xml , activity_two.xml , activity_three.xml , OneActivity.java , TwoActivity.java , ThreeActivity.java และ MainActivity.java




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

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 : MainActivity.java
package com.example.tabhost3;

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);
   

        tabHost.getTabWidget().getChildAt(1);
        tabHost.getTabWidget().getChildAt(2);
           

        tabHost.getTabWidget().setCurrentTab(0);
        tabHost.getTabWidget().getChildAt(0);
         
   
     }

   public void onTabChanged(String tabId) {
    for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
       {
           if(i==0)
               tabHost.getTabWidget().getChildAt(i);
           else if(i==1)
               tabHost.getTabWidget().getChildAt(i);
           else if(i==2)
               tabHost.getTabWidget().getChildAt(i);
       }

    if(tabHost.getCurrentTab()==0)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab());
    else if(tabHost.getCurrentTab()==1)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab());
    else if(tabHost.getCurrentTab()==2)
        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab());
         
    }

}
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);
      }
}
หมายเหตุ : เนื่องมีการเปลี่ยนหน้าแบบ intent ดังนั้นต้องไปเพิ่ม activity ในส่วนของ AndroidManifest ด้วย

Example : AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.tabhost3"
    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.tabhost3.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.tabhost3.OneActivity"
            android:label="@string/app_name" >
        </activity>
        <activity 
            android:name="com.example.tabhost3.TwoActivity"
            android:label="@string/app_name" >
        </activity>
        <activity 
            android:name="com.example.tabhost3.ThreeActivity"
            android:label="@string/app_name" >
        </activity>
    </application>

</manifest>
ผลลัพธ์ : 





























ที่มา : androidexample

1 ความคิดเห็น: