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
