Android開發(9) 選項卡的切換
- 2020 年 3 月 13 日
- 筆記
概述
相信使用過android手機的朋友都見過下面樣子的選項卡，本文我們嘗試做看看。
思路
這個選項卡頁面，或者說是標籤卡。分為兩部分：
- 一個頂部的按鈕（可點擊的）的切換卡部分
- 一個主內容區（上圖顯示「第二個窗體」字體的）的主顯示區。
實現
我們想實現的效果是點擊切換的選項卡卡部分，主顯示區的內容隨之改變。那麼我們看下頁面布局程式碼
<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); } }
