[Android] Android 分頁功能，以Tabhost為例(包含置底教學與頁籤字體教學)－葛瑞斯肯樂活筆記

Android開發app時，有很多資訊想呈現，通常會使用分頁功能，讓頁面看起來資訊不擠，但是又讓使用者好搜尋。除了常見的Fragment外，這邊要介紹的是使用 Tabhost，我使用的版本如下:

Tabhost的Layout一定要有 TabHost(id: tabhost)、TabWidget(id: tabs)與FrameLayout(id: tabcontent)三個元件與其對應的id，id名字不可以改，layout中的xml如下所示:

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:id="@+id/LinearLayout1"
	android:layout_width="match_parent"
	android:layout_height="match_parent" >


	<TabHost android:id="@android:id/tabhost"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_weight="1" >


	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical" >



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



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


	<LinearLayout
	android:id="@+id/tab3"
	android:layout_width="match_parent"
	android:layout_height="match_parent" >


	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="TextView" />

	</LinearLayout>
	</FrameLayout>
	</LinearLayout>
	</TabHost>
	</LinearLayout>

view raw gistfile1.txt hosted with ❤ by GitHub

之後來看一下MainActivity中如何去加入新的頁面與控制頁面切換: (記得是繼承TabActivity)

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

	public class MainActivity extends TabActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);

	TabHost tabHost = getTabHost();

	TabSpec spec = tabHost.newTabSpec("t1");
	Intent it1 = new Intent(this,A1.class);

	spec.setContent(it1); //Setting the activity of t1
	spec.setIndicator("Tab 1"); // Naming the name of Tab
	tabHost.addTab(spec);

	TabSpec spec2 = tabHost.newTabSpec("t2");
	Intent it2 = new Intent(this,A2.class);

	spec2.setContent(it2);
	spec2.setIndicator("Tab 2");
	tabHost.addTab(spec2);

	TabSpec spec3 = tabHost.newTabSpec("t3");
	spec3.setContent(R.id.tab3);
	spec3.setIndicator("Tab 3");
	tabHost.addTab(spec3);

	tabHost.setCurrentTab(1); // Setting the default Tab
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

然後記得去新增A1，A2的Empty Activity，Android Studio 新增 Empty Activity的功能也會把相對應的layout xml檔產生，也會幫你在AndroidManifest裡面做關聯。

主程式結構:

執行得到的畫面如下:

如果要讓頁籤的呈現變成底部呈現，直接在xml中的:

<TabHost> 這個標籤裡面加上:

android:layout_alignParentBottom="true"

並且把 <TabWidget> 放到 <FrameLayout>下方即可

如果要修改頁籤的字體大小，可使用下段程式碼:

	final TabWidget tw = (TabWidget)mTabHost.findViewById(android.R.id.tabs);
	for (int i = 0; i < tw.getChildCount(); ++i){
	final View tabView = tw.getChildTabViewAt(i);
	final TextView tv = (TextView)tabView.findViewById(android.R.id.title);
	tv.setTextSize(20);
	}