在很多其他語言進行界面編程的時候，都有 Tab 這樣的控件，在 Android 編程環境下也不例外。 TabHost 由一個 TabSpecs 和一個嵌套的 TabHost 組成，該嵌套的 TabHost 包含 tab 的標題以及 tab 的內容。一個 tab 的內容，可以是一個預先定義好的 View ，或者是通過 Intent 對象啓動的 Activity ，或者是利用 TabContentFactory 所創建出來的 View 。
Tab 並沒有看起來那麼複雜。每個 tab 實際上就是一個 View 的容器。
有兩種方式可以實現 tab 。一種是直接使用 TabActivity ，一種是不使用 TabActivity 。我們首先來看看使用 TabActivity 實現 tab 的情況。
第一種情況：使用 TabActivity
1. 創建一個 Android Project 。
2. 新建一個 xml 文件： tab_demo.xml ，使其內容如下：
<? xml version = "1.0" encoding = "utf-8" ?>
< FrameLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
< TextView android:id = "@+id/tab_demo_tv1"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:text = "tab_demo_tv1"
/>
< LinearLayout android:id = "@+id/tab_linearlayout2"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:orientation = "vertical"
>
< TextView android:id = "@+id/tab_demo_tv2"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "tab_demo_tv2"
/>
< Button
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "Tab demo Button"
/>
</ LinearLayout >
< TextView android:id = "@+id/tab_demo_tv3"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:text = "tab_demo_tv3"
/>
</ FrameLayout >
上面的第一和第三個 TextView ，也可以是 LinearLayout(tab_linearlayout2) 。
3. 修改 Activity 所對應的代碼，使之如下：
package com.pat.gui;
import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
public class AndroidGUI24Activity extends TabActivity
{
private TabHost tabhost ;
@Override
public void onCreate(Bundle savedInstanceState)
{
super .onCreate(savedInstanceState);
// 獲取該 Activity 用於容納 tab 的 TabHost 對象
// Returns the TabHost the activity is using to host its tabs.
tabhost = getTabHost();
// 獲取 LayoutInflater 對象
LayoutInflater inflater = LayoutInflater.from ( this );
// TabHost.getTabContentView 方法的作用： Get the FrameLayout which holds tab content
// LayoutInflater.inflate 方法的作用：
// Inflate a new view hierarchy from the specified xml resource.
// 其原型爲： public View inflate (int resource, ViewGroup root)
// 參數：
// resource ID for an XML layout resource to load (e.g., R.layout.main_page)
// root Optional view to be the parent of the generated hierarchy.
// 返回值：
// The root View of the inflated hierarchy. If root was supplied, this is the root
// View; otherwise it is the root of the inflated XML file.
inflater.inflate(R.layout. tab_demo , tabhost .getTabContentView());
// 上面這句話，就是將 tab_demo.xml 的內容，嵌入到 tabhost.getTabContentView() 所返回的 FrameLayout 中
// 給 tabhost 增加 tab
// newTabSpec(String tag) 返回一個 TabHost.TabSpec 對象，其參數用於標識一個 tab 的 tag ，爲 String 類型
// setIndicator(" 國籍 "): 顯示 tab 上的文字
// setContent(R.id.tab_demo_tv1) ：指定 tab 的內容，必須爲 id ，比如空間的 id 或者 layout 的 id
tabhost .addTab( tabhost .newTabSpec( "tab1" ).setIndicator( " 國籍 " ).setContent(R.id. tab_demo_tv1 ));
tabhost .addTab( tabhost .newTabSpec( "tab2" ).setIndicator( " 愛好 " ).setContent(R.id. tab_linearlayout2 ));
tabhost .addTab( tabhost .newTabSpec( "tab3" ).setIndicator( " 職業 " ).setContent(R.id. tab_demo_tv3 ));
// 指定顯示第幾個 tab
tabhost .setCurrentTab(1);
// 在上面的工作都做完之後，再調用 setContentView
//setContentView(R.layout.main);
setContentView( tabhost );
}
}
運行結果：
可以看到是第 2 個 tab 出現在屏幕上。點擊“國籍”和“職業”兩個 tab 會看到與之分別對應的界面。
4. 在前面的代碼中，我們將 3 個 tab 需要顯示的內容均在 tab_demo.xml 這一個文件中規定了。事實上，我們還可以有另外一種做法，那就是讓不同的 tab 分別對應不同的 xml 佈局文件，爲此，新建三個佈局文件，並使之如下：
tab1.xml:
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/tab1"
android:orientation = "vertical" >
< TextView
android:id = "@+id/tab1tv1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Tab1"
/>
< Button
android:id = "@+id/tab1btn1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 1"
/>
</ LinearLayout >
tab2.xml:
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/tab2"
android:orientation = "vertical" >
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Tab2"
/>
< Button
android:id = "@+id/tab2btn1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 1"
/>
< Button
android:id = "@+id/tab2btn2"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 2"
/>
</ LinearLayout >
tab3.xml:
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "@+id/tab3"
android:orientation = "vertical" >
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Tab3"
/>
< Button
android:id = "@+id/tab3btn1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 1"
/>
< Button
android:id = "@+id/tab3btn2"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 2"
/>
< Button
android:id = "@+id/tab3btn3"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = " 按鈕 3"
/>
</ LinearLayout >
5. 對應地修改 Activity 的代碼，使之如下：
package com.pat.gui;
import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TabHost;
public class AndroidGUI24Activity extends TabActivity
implements
OnClickListener
{
private TabHost tabhost ;
private Button tab1btn1 ;
private Button tab2btn1 ;
private Button tab2btn2 ;
private Button tab3btn1 ;
private Button tab3btn2 ;
private Button tab3btn3 ;
@Override
public void onCreate(Bundle savedInstanceState)
{
super .onCreate(savedInstanceState);
// 獲取該 Activity 用於容納 tab 的 TabHost 對象
// Returns the TabHost the activity is using to host its tabs.
tabhost = getTabHost();
// 獲取 LayoutInflater 對象
LayoutInflater inflater = LayoutInflater.from ( this );
// TabHost.getTabContentView 方法的作用： Get the FrameLayout which holds tab content
// LayoutInflater.inflate 方法的作用：
// Inflate a new view hierarchy from the specified xml resource.
// 其原型爲： public View inflate (int resource, ViewGroup root)
// 參數：
// resource ID for an XML layout resource to load (e.g., R.layout.main_page)
// root Optional view to be the parent of the generated hierarchy.
// 返回值：
// The root View of the inflated hierarchy. If root was supplied, this is the root
// View; otherwise it is the root of the inflated XML file.
// 下面這幾句話，就是將 tab1.xml 、 tab2.xml 、 tab3.xml 的內容，全嵌入到 tabhost.getTabContentView()
// 所返回的 FrameLayout 中。
inflater.inflate(R.layout. tab1 , tabhost .getTabContentView());
inflater.inflate(R.layout. tab2 , tabhost .getTabContentView());
inflater.inflate(R.layout. tab3 , tabhost .getTabContentView());
// 給 tabhost 增加 tab
// newTabSpec(String tag) 返回一個 TabHost.TabSpec 對象， TabHost.TabSpec
// setIndicator(" 國籍 "): 顯示 tab 上的文字
// setContent(R.id.tab_demo_tv1) ：指定 tab 的內容
tabhost .addTab( tabhost .newTabSpec( "tab1" ).setIndicator( " 國籍 " ).setContent(R.id. tab1 ));
tabhost .addTab( tabhost .newTabSpec( "tab2" ).setIndicator( " 愛好 " ).setContent(R.id. tab2 ));
tabhost .addTab( tabhost .newTabSpec( "tab3" ).setIndicator( " 系統 " ).setContent(R.id. tab3 ));
// 指定顯示第幾個 tab
tabhost .setCurrentTab(1);
// 在上面的工作都做完後，調用 setContentView
//setContentView(R.layout.main);
setContentView( tabhost );
// 獲取 6 個按鈕對象，並分別給它們增加 OnClickListener
tab1btn1 = (Button)findViewById(R.id. tab1btn1 );
tab1btn1 .setOnClickListener( this );
tab2btn1 = (Button)findViewById(R.id. tab2btn1 );
tab2btn2 = (Button)findViewById(R.id. tab2btn2 );
tab2btn1 .setOnClickListener( this );
tab2btn2 .setOnClickListener( this );
tab3btn1 = (Button)findViewById(R.id. tab3btn1 );
tab3btn2 = (Button)findViewById(R.id. tab3btn2 );
tab3btn3 = (Button)findViewById(R.id. tab3btn3 );
tab3btn1 .setOnClickListener( this );
tab3btn2 .setOnClickListener( this );
tab3btn3 .setOnClickListener( this );
}
//@Override
public void onClick(View v)
{
switch (v.getId())
{
case R.id. tab1btn1 :
tabhost .setCurrentTab(1); // 跳轉到第二個 tab
break ;
case R.id. tab2btn1 :
tabhost .setCurrentTab(0); // 跳轉到第一個 tab
break ;
case R.id. tab2btn2 :
tabhost .setCurrentTab(2); // 跳轉到第三個 tab
break ;
case R.id. tab3btn1 :
tabhost .setCurrentTab(0); // 跳轉到第一個 tab
break ;
case R.id. tab3btn2 :
tabhost .setCurrentTab(1); // 跳轉到第二個 tab
break ;
case R.id. tab3btn3 :
tabhost .setCurrentTab(2); // 跳轉到第三個 tab( 自己 )
break ;
}
}
}
運行結果如下：
可以發現，點擊“按鈕 1 ”會跳轉到“國籍”，點擊“按鈕 2 ”會跳轉到“系統”
6. 在上面的基礎上，我們給每個 tab 增加一個圖標。爲此我們將 amplifer_1.png 、 basketball.png 和 cn.png 等 3 個圖片文件拷貝到 res/drawable-mdpi 文件夾下，然後修改 Activity 的代碼使之如下 ( 注意下面的粗體字部分未改動部分 ) ：
package com.pat.gui;
import android.app.TabActivity;
import android.content.res.Resources;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TabHost;
public class AndroidGUI24Activity extends TabActivity
implements
OnClickListener
{
private TabHost tabhost ;
private Resources res ;
private Button tab1btn1 ;
private Button tab2btn1 ;
private Button tab2btn2 ;
private Button tab3btn1 ;
private Button tab3btn2 ;
private Button tab3btn3 ;
@Override
public void onCreate(Bundle savedInstanceState)
{
super .onCreate(savedInstanceState);
// 獲取該 Activity 用於容納 tab 的 TabHost 對象
// Returns the TabHost the activity is using to host its tabs.
tabhost = getTabHost();
res = getResources();
// 獲取 LayoutInflater 對象
LayoutInflater inflater = LayoutInflater.from ( this );
// TabHost.getTabContentView 方法的作用： Get the FrameLayout which holds tab content
// LayoutInflater.inflate 方法的作用：
// Inflate a new view hierarchy from the specified xml resource.
// 其原型爲： public View inflate (int resource, ViewGroup root)
// 參數：
// resource ID for an XML layout resource to load (e.g., R.layout.main_page)
// root Optional view to be the parent of the generated hierarchy.
// 返回值：
// The root View of the inflated hierarchy. If root was supplied, this is the root
// View; otherwise it is the root of the inflated XML file.
// 下面這幾句話，就是將 tab1.xml 、 tab2.xml 、 tab3.xml 的內容，全嵌入到 tabhost.getTabContentView()
// 所返回的 FrameLayout 中。
inflater.inflate(R.layout. tab1 , tabhost .getTabContentView());
inflater.inflate(R.layout. tab2 , tabhost .getTabContentView());
inflater.inflate(R.layout. tab3 , tabhost .getTabContentView());
// 給 tabhost 增加 tab
// newTabSpec(String tag) 返回一個 TabHost.TabSpec 對象， TabHost.TabSpec
// setIndicator(" 國籍 "): 顯示 tab 上的文字
// setContent(int id) ：指定 tab 的內容
tabhost .addTab( tabhost .newTabSpec( "tab1" ).setIndicator( " 國籍 " , res .getDrawable(R.drawable. cn ) )
.setContent(R.id. tab1 ));
tabhost .addTab( tabhost .newTabSpec( "tab2" ).setIndicator( " 愛好 " , res .getDrawable(R.drawable. basketball ) )
.setContent(R.id. tab2 ));
tabhost .addTab( tabhost .newTabSpec( "tab3" ).setIndicator( " 系統 " , res .getDrawable(R.drawable. amplifer_1 ) )
.setContent(R.id. tab3 ));
// 指定顯示第幾個 tab
tabhost .setCurrentTab(1);
// 在上面的工作都做完後，調用 setContentView
//setContentView(R.layout.main);
setContentView( tabhost );
// 獲取 6 個按鈕對象，並分別給它們增加 OnClickListener
tab1btn1 = (Button)findViewById(R.id. tab1btn1 );
tab1btn1 .setOnClickListener( this );
tab2btn1 = (Button)findViewById(R.id. tab2btn1 );
tab2btn2 = (Button)findViewById(R.id. tab2btn2 );
tab2btn1 .setOnClickListener( this );
tab2btn2 .setOnClickListener( this );
tab3btn1 = (Button)findViewById(R.id. tab3btn1 );
tab3btn2 = (Button)findViewById(R.id. tab3btn2 );
tab3btn3 = (Button)findViewById(R.id. tab3btn3 );
tab3btn1 .setOnClickListener( this );
tab3btn2 .setOnClickListener( this );
tab3btn3 .setOnClickListener( this );
}
//@Override
public void onClick(View v)
{
switch (v.getId())
{
case R.id. tab1btn1 :
tabhost .setCurrentTab(1); // 跳轉到第二個 tab
break ;
case R.id. tab2btn1 :
tabhost .setCurrentTab(0); // 跳轉到第一個 tab
break ;
case R.id. tab2btn2 :
tabhost .setCurrentTab(2); // 跳轉到第三個 tab
break ;
case R.id. tab3btn1 :
tabhost .setCurrentTab(0); // 跳轉到第一個 tab
break ;
case R.id. tab3btn2 :
tabhost .setCurrentTab(1); // 跳轉到第二個 tab
break ;
case R.id. tab3btn3 :
tabhost .setCurrentTab(2); // 跳轉到第三個 tab( 自己 )
break ;
}
}
}
運行結果爲：
其它和 5 中的運行結果相同。
7. 在本文開始出，曾經提到“或者是通過 Intent 對象啓動的 Activity ”，也就是說 setContent 的參數可以是一個 Intent 對象，然後用該對象啓動另外一個 Activity 。爲此我們先創建一個 Activity 類，併爲它指定相應的 layout 。假定我們讓第三個 tab 顯示的內容爲 Intent 對象所指定的 Activity 。 Layout 內容如下：
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content" >
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Hello, Android"
android:textSize = "30px"
android:textColor = "#FF0" />
</ LinearLayout >
對應的 Activity 代碼如下：
package com.pat.gui;
import android.app.Activity;
import android.os.Bundle;
public class ThirdTab extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.thirdtab);
}
}
在 AndroidManifest.xml 中的 Application 標籤內，增加對 ThirdTab 的描述：
<activity android:name=".ThirdTab" />
8. 現在，咱們來修改 AndroidGUI24Activity 的代碼，使之如下 ( 注意粗體字部分的代碼變化 ) ：
package com.pat.gui;
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TabHost;
public class AndroidGUI24Activity extends TabActivity
implements
OnClickListener
{
private TabHost tabhost;
private Resources res;
private Button tab1btn1;
private Button tab2btn1;
private Button tab2btn2;
@Override
public void onCreate(Bundle savedInstanceState)
{
super .onCreate(savedInstanceState);
// 獲取該 Activity 用於容納 tab 的 TabHost 對象
// Returns the TabHost the activity is using to host its tabs.
tabhost = getTabHost();
res = getResources();
// 獲取 LayoutInflater 對象
LayoutInflater inflater = LayoutInflater.from (this );
// TabHost.getTabContentView 方法的作用： Get the FrameLayout which holds tab content
// LayoutInflater.inflate 方法的作用：
// Inflate a new view hierarchy from the specified xml resource.
// 其原型爲： public View inflate (int resource, ViewGroup root)
// 參數：
// resource ID for an XML layout resource to load (e.g., R.layout.main_page)
// root Optional view to be the parent of the generated hierarchy.
// 返回值：
// The root View of the inflated hierarchy. If root was supplied, this is the root
// View; otherwise it is the root of the inflated XML file.
// 下面這幾句話，就是將 tab1.xml 、 tab2.xml 的內容，全嵌入到 tabhost.getTabContentView()
// 所返回的 FrameLayout 中。這次我們僅 inflate 兩個 tab 的內容，第三個 tab 將有一個 Intent 對象指定
inflater.inflate(R.layout.tab1 , tabhost.getTabContentView());
inflater.inflate(R.layout.tab2 , tabhost.getTabContentView());
// 給 tabhost 增加 tab
// newTabSpec(String tag) 返回一個 TabHost.TabSpec 對象， TabHost.TabSpec
// setIndicator(" 國籍 "): 顯示 tab 上的文字
// setContent(int id) ：指定 tab 的內容
tabhost.addTab(tabhost.newTabSpec("tab1").setIndicator(" 國籍 ", res.getDrawable(R.drawable.cn )).setContent(R.id.tab1 ));
tabhost.addTab(tabhost.newTabSpec("tab2").setIndicator(" 愛好 ", res.getDrawable(R.drawable.basketball )).setContent(R.id.tab2 ));
tabhost.addTab(tabhost.newTabSpec("tab3").setIndicator(" 系統 ",res.getDrawable(R.drawable.amplifer_1 ))
.setContent(new Intent(this , ThirdTab.class ) ));
// 指定顯示第幾個 tab
tabhost.setCurrentTab(1);
// 在上面的工作都做完後，調用 setContentView
//setContentView(R.layout.main);
setContentView(tabhost);
// 獲取 6 個按鈕對象，並分別給它們增加 OnClickListener
tab1btn1 = (Button)findViewById(R.id.tab1btn1 );
tab1btn1.setOnClickListener(this );
tab2btn1 = (Button)findViewById(R.id.tab2btn1 );
tab2btn2 = (Button)findViewById(R.id.tab2btn2 );
tab2btn1.setOnClickListener(this );
tab2btn2.setOnClickListener(this );
}
//@Override
public void onClick(View v)
{
switch (v.getId())
{
case R.id.tab1btn1 :
tabhost.setCurrentTab(1); // 跳轉到第二個 tab
break ;
case R.id.tab2btn1 :
tabhost.setCurrentTab(0); // 跳轉到第一個 tab
break ;
case R.id.tab2btn2 :
tabhost.setCurrentTab(2); // 跳轉到第三個 tab
break ;
}
}
}
運行結果如下 ( 點擊“系統”這個 tab) ：
點擊“國籍”、“愛好”和“系統”，各 tab 之間可以進行很好的切換。
第二種情況：不使用 TabActivity
不使用 TabActivity 來 實現Tab 功能 ，情況要稍微複雜一些，但同時也更靈活一些，比如可以把 tab 的位置放在屏幕的下方。爲此，需要對 TabHost 、 TabWidget 底層有所瞭解。在定義包含各 tab 信息的 xml 文件中，必須：
a. 根佈局必須是 TabHost
b. 在 TabHost 內，必須包含一個垂直的 LinearLayout
c. 在 LinearLayout 中，必須包含一個 TabWidget 和一個 FrameLayout ，且其中 TabWidget 的 id 必須命名爲 @android:id/tabs ， FrameLayout 的 id 必須命名爲 @android:id/tabcontent ，各 tab 的內容可以定義在 FrameLayout 中。
1. 創建一個新的佈局文件： tab_demo2.xml ，並使之如下：
<? xml version = "1.0" encoding = "utf-8" ?>
< TabHost
xmlns:android = "http://schemas.android.com/apk/res/android"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:id = "@+id/v_tabhost"
>
< LinearLayout
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
< FrameLayout
android:id = "@android:id/tabcontent "
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:layout_weight = "1"
>
< LinearLayout
android:id = "@+id/tab1"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Hello, Android1"
android:textColor = "#FF0"
android:textSize = "30px"
>
</ TextView >
< Spinner
android:id = "@+id/Spinner01"
android:layout_width = "160px"
android:layout_height = "wrap_content"
android:entries = "@array/cities"
android:prompt = "@string/spin_prompt"
/>
</ LinearLayout >
< LinearLayout
android:id = "@+id/tab2"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Hello, Android2"
android:textColor = "#F0F"
android:textSize = "30px"
>
</ TextView >
< DigitalClock
android:id = "@+id/digital_clock"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:textSize = "50px"
/>
</ LinearLayout >
< LinearLayout
android:id = "@+id/tab3"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Hello, Android3"
android:textColor = "#0FF"
android:textSize = "30px"
>
</ TextView >
< AnalogClock
android:id = "@+id/analog_clock"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
/>
</ LinearLayout >
</ FrameLayout >
< TabWidget
android:id = "@android:id/tabs "
android:layout_width = "fill_parent"
android:layout_height = "60px" />
</ LinearLayout >
</ TabHost >
注意上面代碼中，粗體字部分的寫法。
其中 android:layout_weight="1" 必須要出現在 FrameLayout 的屬性中，否則 tab 不可見。
2. 在strings.xml中增加如下內容：
< string name = "spin_prompt" > 請選擇城市 </ string >
< string-array name = "cities" >
< item > 北京 </ item >
< item > 上海 </ item >
< item > 南京 </ item >
< item > 烏魯木齊 </ item >
< item > 哈爾濱 </ item >
< item > 符拉迪沃斯託克 </ item >
</ string-array >
3. 修改 AndroidGUI24Activity 的代碼如下：
package com.pat.gui;
import android.app.Activity;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
public class AndroidGUI24Activity extends Activity
{
private Resources res ;
//@Override
public void onCreate(Bundle savedInstanceState)
{
super .onCreate(savedInstanceState);
setContentView(R.layout. tab_demo2 );
// 下面兩行對於不使用 TabActivity 實現 tab 效果是必須的
TabHost tabhost = (TabHost)findViewById(R.id. v_tabhost );
tabhost.setup();
res = getResources();
tabhost.addTab(tabhost.newTabSpec( "tab1" ).setIndicator( " 國籍 " , res .getDrawable(R.drawable. cn ))
.setContent(R.id. tab1 ));
tabhost.addTab(tabhost.newTabSpec( "tab2" ).setIndicator( " 愛好 " , res .getDrawable(R.drawable. basketball ))
.setContent(R.id. tab2 ));
tabhost.addTab(tabhost.newTabSpec( "tab3" ).setIndicator( " 系統 " , res .getDrawable(R.drawable. amplifer_1 ))
.setContent(R.id. tab3 ));
}
}
運行結果：
