Android零基礎入門第63節:過時但仍值得學習的選項卡TabHost

NO IMAGE

    由於前幾天參加一個學習培訓活動,幾乎每天都要從早晨7點到晚上一兩點,沒有什麼時間來分享,實在抱歉中間斷更了幾天。從今天開始恢復分享,更多精彩敬請期待。

   今天來了解一個過時的元件,瞭解的目的不是學會用起來開發,而是瞭解這種介面的設計和其特點,後期可以用其他方式來替代。

 

 

一、TabHost概述

 

    TabHost是一種非常實用的元件,TabHost可以很方便地在視窗上放置多個標籤頁,每個標籤頁相當於獲得了一個與外部容器相同大小的元件擺放區域。通過這種方式,就可以在一個容器裡放置更多元件。

    TabHost是整個Tab的容器,包含TabWidget和FrameLayout兩個部分,TabWidget是每個Tab的標籤,FrameLayout是Tab內容。與TabHost結合使用的有如下2個元件。

TabWidget:代表選項卡的標題條。

TabSpec:代表選項卡的一個Tab頁面。

    TabHost僅僅是一個簡單的容器,它提供瞭如下兩個方法來建立、新增標籤頁。

newTabSpec(String tag):建立選項卡。

addTab(TabHost.TabSpec tabSpec):新增選項卡。

    實現TabHost有兩種方式:

直接讓一個Activity程式繼承TabActivity類。

定義XML佈局檔案利用findViewById()方法取得TagHost元件,通過setup()方法例項化並進行配置。

 

 

二、繼承TabActivity實現

 

    通過繼承TabActivity類,使用TabHost的一般步驟如下。

在介面佈局檔案中定義TabHost元件,併為該元件定義該選項卡的內容。

Activity 應該繼承 TabActivity。

呼叫 TabActivity 的 getTabHost()方法獲取 TabHost 物件。

通過TabHost物件的方法來建立、新增選項卡。

    除此之外,TabHost還提供了一些方法來獲取當前選項卡。如果程式需要監控TabHost裡當前標籤頁的改變,則可以為它設定 TabHost.OnTabChangeListener 監聽器。

    接下來通過一個簡單的示例程式來學習TabHost的使用。

    繼續使用WidgetSample工程的advancedviewsample模組,在app/main/res/layout/目錄下建立tabhosttab_layout.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="match_parent"
android:layout_height="match_parent">
<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"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:id="@ id/widget_layout_red"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:orientation="vertical"/>
<LinearLayout
android:id="@ id/widget_layout_green"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00"
android:orientation="vertical"/>
<LinearLayout
android:id="@ id/widget_layout_blue"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ff"
android:orientation="vertical"/>
</FrameLayout>
</LinearLayout>
</TabHost>

    請注意上面的佈局檔案中程式碼,從上面的佈局檔案可以發現,TabHost容器內部需要組合兩個元件:TabWidget和FrameLayout,其中TabWidget用於定義選項卡的標題條, FrameLayout則用於層疊組合多個選項頁面。不僅如此,上面的佈局檔案中這三個元件的 ID也有要求。

TabHost 的 ID 應該為@android:id/tabhost。

TabWidget 的 ID 應該為@android:id/tabs。

FrameLayout 的 ID 應該為@android:id/tabcontent。

    上面這三個ID並不是開發者自己定義的,而是引用了 Android系統已有的ID。

    接下來主程式即可載入該佈局資源,並將佈局檔案中的三個Tab頁面新增到該TabHost 容器中。新建TabHostTabActivity.java檔案,載入上面新建的佈局檔案,具體程式碼如下:

package com.jinyu.cqkxzsxy.android.advancedviewsample;
import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
/**
* @建立者 鑫鱻
* @描述 Android零基礎入門到精通系列教程,歡迎關注微信公眾號ShareExpert
*/
public class TabHostTabActivity extends TabActivity {
private TabHost mTabHost = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabhosttab_layout);
// 從TabActivity上面獲取放置Tab的TabHost
mTabHost = getTabHost();
// 新增第一個標籤
TabHost.TabSpec tab1 = mTabHost.newTabSpec("0");
tab1.setIndicator("紅色");
tab1.setContent(R.id.widget_layout_red);
mTabHost.addTab(tab1);
// 新增第二個標籤
mTabHost.addTab(mTabHost
// 建立新標籤
.newTabSpec("1")
// 設定標籤標題
.setIndicator("綠色")
// 設定該標籤的佈局內容
.setContent(R.id.widget_layout_green));
// 新增第三個標籤
mTabHost.addTab(mTabHost.newTabSpec("2")
.setIndicator("藍色")
.setContent(R.id.widget_layout_blue));
}
}

    上面程式中的程式碼就是為TabHost建立並新增Tab頁面的程式碼。上面的程式一共新增了三個標籤頁,用了兩種方式來實現。

    修改啟動的Activity,執行程式,可以看到下圖所示介面效果。

    點選標籤,可以切換顯示的內容。

    上面的程式呼叫了 TabHost.TabSpec物件的 setContent(int viewld)方法來設定標籤頁內容。

    除此之外,還可呼叫setContent(Intent intent)方法來設定標籤頁內容,Intent還可用於啟動其他Activity——這意味著TabHost.TabSpec可直接裝載另一個Activity。

 

 

三、繼承Activity實現

 

    與繼承TabActivity實現TabHost大體步驟差不多,唯一的區別就是沒有TabActivity系統封裝,必須由開發者自己獲取TabHost元件而已。

    在上面的示例基礎上進行修改,建立tabhost_layout.xml檔案,在其中填充如下程式碼片段:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@ id/mytabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:id="@ id/widget_layout_red"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0000"
android:orientation="vertical"/>
<LinearLayout
android:id="@ id/widget_layout_green"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00"
android:orientation="vertical"/>
<LinearLayout
android:id="@ id/widget_layout_blue"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ff"
android:orientation="vertical"/>
</FrameLayout>
</LinearLayout>
</TabHost>

    從上述程式碼可以發現,除了TabHost 的id可以自定義外,TabWidget和FrameLayout仍然必須為系統的ID。

    介面互動程式碼稍微有所不同,新建TabHostActivity.java檔案,載入上面新建的佈局檔案,具體程式碼如下:

package com.jinyu.cqkxzsxy.android.advancedviewsample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TabHost;
/**
* @建立者 鑫鱻
* @描述 Android零基礎入門到精通系列教程,歡迎關注微信公眾號ShareExpert
*/
public class TabHostActivity extends AppCompatActivity {
private TabHost mTabHost = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabhost_layout);
// 獲取TabHost元件
mTabHost = (TabHost) findViewById(R.id.mytabhost);
//呼叫 TabHost.setup()
mTabHost.setup();
// 新增三個標籤
mTabHost.addTab(mTabHost.newTabSpec("0").setIndicator("紅色").setContent(R.id.widget_layout_red));;
mTabHost.addTab(mTabHost.newTabSpec("1").setIndicator("綠色").setContent(R.id.widget_layout_green));
mTabHost.addTab(mTabHost.newTabSpec("2").setIndicator("藍色").setContent(R.id.widget_layout_blue));
}
}

    會發現除了查詢我們自定義的TabHost元件外,還多了一條語句setup()來載入TabHost,否則程式會報錯。

    執行修改後的程式,最終效果同繼承TabActivity一樣。

    有木有發現這個介面很不美觀,所以在實際開發中經常會借用RadioButton來定製TabHost。

    其實TabHost元件在安卓4.0之後已經被廢棄了,建議使用Fragment元件來代替它。由於其設計違反了Activity單一視窗原則,它可以同時載入多個Activity,然後再它們之間進行來回切換;另外有個很致命的問題就是當點選別的選項時,按下Back後退鍵,它會使整個應用程式都退出,而不是切換到前一個選項卡,雖然可以在主程式裡覆寫OnKeyDown這個方法,但這樣就會導致每一次按下Back後退鍵都只能回到第一個選項選單。

 

    今天就先到這裡,如果有問題歡迎留言一起探討,也歡迎加入Android零基礎入門技術討論微信群,共同成長!

   此文章版權為微信公眾號分享達人秀(ShareExpert)——鑫鱻所有,若需轉載請聯絡作者授權,特此宣告!

 

往期總結分享:

Android零基礎入門第1節:Android的前世今生

Android零基礎入門第2節:Android 系統架構和應用元件那些事

Android零基礎入門第3節:帶你一起來聊一聊Android開發環境

Android零基礎入門第4節:正確安裝和配置JDK, 高富帥養成第一招

Android零基礎入門第5節:善用ADT Bundle, 輕鬆邂逅女神

Android零基礎入門第6節:配置優化SDK Manager, 正式約會女神

Android零基礎入門第7節:搞定Android模擬器,開啟甜蜜之旅

Android零基礎入門第8節:HelloWorld,我的第一趟旅程出發點

Android零基礎入門第9節:Android應用實戰,不懂程式碼也可以開發

Android零基礎入門第10節:開發IDE大升級,終於迎來了Android Studio

Android零基礎入門第11節:簡單幾步帶你飛,執行Android Studio工程

Android零基礎入門第12節:熟悉Android Studio介面,開始裝逼賣萌

Android零基礎入門第13節:Android Studio個性化配置,打造開發利器

Android零基礎入門第14節:使用高速Genymotion,跨入火箭時代

Android零基礎入門第15節:掌握Android Studio專案結構,揚帆起航

Android零基礎入門第16節:Android使用者介面開發概述

Android零基礎入門第17節:文字框TextView

Android零基礎入門第18節:輸入框EditText

Android零基礎入門第19節:按鈕Button

Android零基礎入門第20節:核取方塊CheckBox和單選按鈕RadioButton

Android零基礎入門第21節:開關元件ToggleButton和Switch

Android零基礎入門第22節:影象檢視ImageView

Android零基礎入門第23節:影象按鈕ImageButton和縮放按鈕ZoomButton

Android零基礎入門第24節:自定義View簡單使用,打造屬於你的控制元件

Android零基礎入門第25節:簡單且最常用的LinearLayout線性佈局

Android零基礎入門第26節:兩種對齊方式,layout_gravity和gravity大不同

Android零基礎入門第27節:正確使用padding和margin

Android零基礎入門第28節:輕鬆掌握RelativeLayout相對佈局

Android零基礎入門第29節:善用TableLayout表格佈局

Android零基礎入門第30節:兩分鐘掌握FrameLayout幀佈局

Android零基礎入門第31節:少用的AbsoluteLayout絕對佈局

Android零基礎入門第32節:新推出的GridLayout網格佈局

Android零基礎入門第33節:Android事件處理概述

Android零基礎入門第34節:Android中基於監聽的事件處理

Android零基礎入門第35節:Android中基於回撥的事件處理

Android零基礎入門第36節:Android系統事件的處理

Android零基礎入門第37節:初識ListView

Android零基礎入門第38節:初識Adapter

Android零基礎入門第39節:ListActivity和自定義列表項

Android零基礎入門第40節:自定義ArrayAdapter

Android零基礎入門第41節:使用SimpleAdapter

Android零基礎入門第42節:自定義BaseAdapter

Android零基礎入門第43節:ListView優化和列表首尾使用

Android零基礎入門第44節:ListView資料動態更新

Android零基礎入門第45節:網格檢視GridView

Android零基礎入門第46節:列表選項框Spinner

Android零基礎入門第47節:自動完成文字框AutoCompleteTextView

Android零基礎入門第48節:可摺疊列表ExpandableListView

Android零基礎入門第49節:AdapterViewFlipper圖片輪播

Android零基礎入門第50節:StackView卡片堆疊

Android零基礎入門第51節:進度條ProgressBar

Android零基礎入門第52節:自定義ProgressBar炫酷進度條

Android零基礎入門第53節:拖動條SeekBar和星級評分條RatingBar

Android零基礎入門第54節:檢視切換元件ViewSwitcher

Android零基礎入門第55節:ImageSwitcher和TextSwitcher

Android零基礎入門第56節:翻轉檢視ViewFlipper

Android零基礎入門第57節:DatePicker和TimePicker選擇器

Android零基礎入門第58節:數值選擇器NumberPicker

Android零基礎入門第59節:常用三大Clock時鐘元件

Android零基礎入門第60節:日曆檢視CalendarView和定時器Chronometer

Android零基礎入門第61節:滾動檢視ScrollView

Android零基礎入門第62節:搜尋框元件SearchView