Android程序中,Tab標(biāo)簽窗口是一種常用的UI界面元素。它的實(shí)現(xiàn)主要是利用了TabHost類。
TabHost說明
TabHost是一個(gè)標(biāo)簽窗口的容器。
一個(gè)TabHost對象包含兩個(gè)子元素對象:
一個(gè)對象是tab標(biāo)簽集合(TabWidget),用戶點(diǎn)擊它們來選擇一個(gè)特定的標(biāo)簽;
另一個(gè)是FrameLayout對象,展示當(dāng)前頁的內(nèi)容。
子元素通常是通過容器對象來控制,而不是直接設(shè)置子元素的值。
下面結(jié)合ApiDemos中的例子來說明TabHost的用法。
第一個(gè)Tab例子:使用TabActivity
這個(gè)例子使用了 TabActivity。
Java程序代碼:
package com.meng.hellotab;import android.os.Bundle;import android.view.LayoutInflater;import android.widget.TabHost;import android.app.TabActivity;@SuppressWarnings("deprecation")public class HelloTabActivity extends TabActivity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 得到TabActivity中的TabHost對象 TabHost tabHost = getTabHost(); // 內(nèi)容:采用布局文件中的布局 LayoutInflater.from(this).inflate(R.layout.activity_hello_tab, tabHost.getTabContentView(), true); // 加上標(biāo)簽 // 參數(shù)設(shè)置:新增的TabSpec的標(biāo)簽,標(biāo)簽中顯示的字樣 // setContent設(shè)置內(nèi)容對應(yīng)的View資源標(biāo)號 tabHost.addTab(tabHost.newTabSpec("tab1") .setIndicator("tab1 indicator").setContent(R.id.view1)); tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2") .setContent(R.id.view2)); tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3") .setContent(R.id.view3)); }}其中布局文件如下:
布局文件1
布局文件1<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/view1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/blue" android:text="@string/tab1" /> <TextView android:id="@+id/view2" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/red" android:text="@string/tab2" /> <TextView android:id="@+id/view3" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/green" android:text="@string/tab3" /></FrameLayout>
布局文件中的顏色字符串如下:文本字符串略。
colors.xml<?xml version="1.0" encoding="utf-8"?><resources> <drawable name="red">#7f00</drawable> <drawable name="blue">#770000ff</drawable> <drawable name="green">#7700ff00</drawable> <drawable name="yellow">#77ffff00</drawable> <drawable name="screen_background_black">#ff000000</drawable> <drawable name="translucent_background">#e0000000</drawable> <drawable name="transparent_background">#00000000</drawable> <color name="solid_red">#f00</color> <color name="solid_blue">#0000ff</color> <color name="solid_green">#f0f0</color> <color name="solid_yellow">#ffffff00</color></resources>
運(yùn)行截圖:



注意 TabActivity這個(gè)類已經(jīng)被標(biāo)注為:This class was deprecated in API level 13。
第二個(gè)程序:使用TabHost.TabContentFactory
TabHost.TabContentFactory這個(gè)接口是用來在tab被選擇時(shí)自己創(chuàng)建內(nèi)容,而不是顯示一個(gè)已經(jīng)存在的view或者啟動一個(gè)activity,這兩種要用其他的方法。
具體實(shí)現(xiàn)見代碼:
package com.meng.hellotab;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.widget.TabHost;import android.widget.TextView;import android.app.TabActivity;@SuppressWarnings("deprecation")public class HelloTabActivity extends TabActivity implements TabHost.TabContentFactory{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TabHost tabHost = getTabHost(); // 不再需要載入布局文件,如果此句不注釋掉會導(dǎo)致content的重疊 // LayoutInflater.from(this).inflate(R.layout.activity_hello_tab, // tabHost.getTabContentView(), true); // setContent中傳遞this tabHost.addTab(tabHost.newTabSpec("tab1") .setIndicator("tab1 indicator").setContent(this)); tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2") .setContent(this)); tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3") .setContent(this)); } // setContent的參數(shù)設(shè)為this時(shí),從這個(gè)方法得到每一個(gè)Tab的內(nèi)容(此次不用布局文件,用的話會重疊) @Override public View createTabContent(String tag) { // 參數(shù): 這個(gè)方法會接受到被選擇的tag的標(biāo)簽 final TextView tv = new TextView(this); tv.setText("Content for tab with tag " + tag); return tv; }}程序運(yùn)行截圖:

另外,Tab的content的內(nèi)容還可以啟動另一個(gè)Activity,只要在setContent方法中傳入一個(gè)Intent即可。
此部分不再介紹,可以參見ApiDemos中的Tabs3.java代碼。
第三個(gè)程序:不繼承TabActivity
前面兩個(gè)程序例子中都是繼承了TabActivity類,如果不繼承它,需要自己寫TabHost的布局,其中包含了兩個(gè)必要的子元素:TabWidget和FrameLayout,其id都是固定值,見代碼。
布局文件代碼:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> <!-- TabHost必須包含一個(gè) TabWidget和一個(gè)FrameLayout --> <TabHost android:id="@+id/myTabHost" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <!-- TabWidget的id屬性必須為 @android:id/tabs --> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" android:orientation="horizontal" /> <!-- FrameLayout的id屬性必須為 @android:id/tabcontent --> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0" > <TextView android:id="@+id/view1" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Tab1 Content" /> <TextView android:id="@+id/view2" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Tab2 Content" /> <TextView android:id="@+id/view3" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Tab3 Content" /> </FrameLayout> </LinearLayout> </TabHost></LinearLayout>
Activity代碼:
package com.meng.hellotabhost;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import android.widget.TabHost;public class HelloTabHostActivity extends Activity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_hello_tab_host); TabHost tabHost = (TabHost) findViewById(R.id.myTabHost); // 如果不是繼承TabActivity,則必須在得到tabHost之后,添加標(biāo)簽之前調(diào)用tabHost.setup() tabHost.setup(); // 這里content的設(shè)置采用了布局文件中的view tabHost.addTab(tabHost.newTabSpec("tab1") .setIndicator("tab1 indicator").setContent(R.id.view1)); tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2") .setContent(R.id.view2)); tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3") .setContent(R.id.view3)); }}這種方式可以實(shí)現(xiàn)比較靈活的布局,可以方便地加入其他組件,還可以改變標(biāo)簽欄和內(nèi)容欄的相對位置。
第四個(gè)程序:scrolling Tab
當(dāng)標(biāo)簽太多時(shí),需要把標(biāo)簽設(shè)置進(jìn)一個(gè)ScrollView中進(jìn)行滾動。有了上面的程序做基礎(chǔ),這個(gè)很好理解。
ApiDemos中給出的仍然是繼承TabActivity的方法,在這里給出另一種不用繼承TabActivity的方法,兩種方法很類似。
布局文件:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TabHost 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" android:padding="5dp" > <HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none" > <TabWidget android:id="@android:id/tabs" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </HorizontalScrollView> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" /> </LinearLayout> </TabHost></LinearLayout>
Java代碼:
package com.meng.hellotabscroll;import android.os.Bundle;import android.app.Activity;import android.view.View;import android.widget.TabHost;import android.widget.TextView;public class HelloTabScrollActivity extends Activity implements TabHost.TabContentFactory{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_hello_tab_scroll); // 從布局中獲取TabHost并建立 TabHost tabHost = (TabHost) findViewById(R.id.myTabHost); tabHost.setup(); // 加上30個(gè)標(biāo)簽 for (int i = 1; i <= 30; i++) { String name = "Tab " + i; tabHost.addTab(tabHost.newTabSpec(name).setIndicator(name) .setContent(this)); } } @Override public View createTabContent(String tag) { final TextView tv = new TextView(this); tv.setText("Content for tab with tag " + tag); return tv; }}以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選