android開發(8) 選項卡的切換 - Android 台灣中文網

a1.jpg (18.22 KB, 下載次數: 1)

2011-7-10 15:27 上傳

這個選項卡頁面，或者說是標籤卡。分為兩部分：
一個頂部的按鈕（可點擊的）的切換卡部分
一個主內容區（上圖顯示「第二個窗體」字體的）的主顯示區。
我們想實現的效果是點擊切換的選項卡卡部分，主顯示區的內容隨之改變。那麼我們看下頁面佈局代碼

<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"
android:paddingLeft="1dip"
android:paddingRight="1dip"
android:paddingTop="4dip"
/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_weight="1"
/>
</LinearLayout>
</TabHost>

複製代碼

如上面的代碼所示：
整個窗體在一個TabHost元素下。TabHost是根元素。他包含了一個子佈局對像LinearLayout，這個佈局對象的方向為「vertical」，注意這個垂直方向。它指示了如何排列這個佈局對象的子對象，也就是它指示了TabWidget 和FrameLayout 這兩個控件的排列。我們目前的排列是 TabWidget 在上，FrameLayout 在下。如果想實現「選項卡標籤在底部的效果」，嘗試下relativeLayout吧。
TabWidget 就是標籤卡對象。就是用來切換的那個頂部標籤卡。注意id必須為@android:id/tabs
FrameLayout 是內容區域，當標籤卡變化時，這裡的內容會隨之變化。注意id必須為@android:id/tabcontent

佈局構建完畢後。下一步要做的，就是如何為這個佈局添加子選項卡了。
首先，讓我們的activty繼承自TabActivity

public class ActTabActivityDemo1 extends TabActivity

複製代碼

在onCreate時獲得tabHost對象，並添加選項卡

_tabHost = getTabHost();
AddTabPage1(); //執行添加子選項卡的方法

複製代碼

我們看下AddTabPage1()方法的具體實現。

Intent internt1 = new Intent();
internt1.setClass(this,Act1.class);
TabSpec tabSpec = _tabHost.newTabSpec("act1");
//指定選項卡的顯示名稱
tabSpec.setIndicator("選項卡一");
//指定跳轉方向
tabSpec.setContent(internt1);
_tabHost.addTab(tabSpec);

複製代碼

如上面的代碼所示，我們構建了一個TabSpec 對象，並調用_tabHost.addTab(tabSpec);方法，將這個對象加入到選項卡集合中。
TabSpec 是一個選項卡對象，或者說是 TabSpec 描述一個選項卡的。通過
tabSpec.setIndicator 指定選項卡的顯示名稱。
tabSpec.setContent(internt1); 指定跳轉方向，在這裡指定了當頂部的標籤卡被指定時，執行的Intent 對象。我們常常使用Intent 來做窗體間的跳轉。

完成了上述步驟後，就可以具體實現具體的選項卡裡的佈局（內容）了。
下面貼出完成的Activity代碼

package demo.TabActivityDemo1;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class ActTabActivityDemo1 extends TabActivity {
private TabHost _tabHost;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
_tabHost = getTabHost();
AddTabPage1();
AddTabPage2();
AddTabPage1();
}
private void AddTabPage1() {
// TODO Auto-generated method stub
Intent internt1 = new Intent();
internt1.setClass(this,Act1.class);
TabSpec tabSpec = _tabHost.newTabSpec("act1");
//指定選項卡的顯示名稱
tabSpec.setIndicator("選項卡一");
//指定跳轉方向
tabSpec.setContent(internt1);
_tabHost.addTab(tabSpec);
}
private void AddTabPage2() {
// TODO Auto-generated method stub
Intent internt1 = new Intent();
internt1.setClass(this,Act2.class);
TabSpec tabSpec = _tabHost.newTabSpec("act2");
tabSpec.setIndicator("選項卡二");
tabSpec.setContent(internt1);
_tabHost.addTab(tabSpec);
}
}

複製代碼

tabActivityDemo2.rar

43.06 KB, 下載次數: 18, 下載積分: 碎鑽 -1 個

作者: bnbenson 時間: 2012-10-17 10:16
很常用的動作效果，研究看看
謝

作者: wuyanyin 時間: 2013-5-28 16:40
這個一定是要學的哦！

歡迎光臨 Android 台灣中文網 (https://apk.tw/)