TabHost效果圖 :
一. TabHost介紹
TabHost組件可以在界面中存放多個選項卡, 很多軟件都使用了改組件進行設計;
1. TabHost常用組件
TabWidget : 該組件就是TabHost標簽頁中上部 或者 下部的按鈕, 可以點擊按鈕切換選項卡;
TabSpec : 代表了選項卡界面, 添加一個TabSpec即可添加到TabHost中;
-- 創建選項卡 : newTabSpec(String tag), 創建一個選項卡;
-- 添加選項卡 : addTab(tabSpec);
2. TabHost使用步驟
a. 定義布局 : 在XML文件中 使用TabHost組件 , 并在其中 定義一個FrameLayout選項卡 內容;
b. 繼承TabActivity : 顯示選項卡組件的Activity 繼承TabActivity ;
c. 獲取組件 : 通過調用 getTabHost()方法 , 獲取TabHost對象;
d. 創建添加選項卡 : 通過TabHost創建添加選項卡;
3. 將按鈕放到下面
布局文件中TabWidget代表的就是選項卡按鈕, Fragement組件代表內容;
設置失敗情況 : 如果Fragement組件沒有設置 android:layout_weight屬性, 那么將TabWidget放到下面, 可能不會顯示按鈕;
設置權重 : 設置了Fragment組件的權重之后, 就可以成功顯示該選項卡按鈕;
二. TabHost布局文件
1. 根標簽及id
設置Android自帶id : XML布局文件中, 可以使用<TabHost> 標簽設置, 其中的id 需要引用 android的自帶id :android:id="@android:id/tabhost" ;
getHost()獲取前提 : 設置了該id之后, 在Activity界面可以使用 getHost(), 獲取這個TabHost 視圖對象;
示例 :
- < TabHost
- android:id = "@android:id/tabhost"
- android:layout_width = "match_parent"
- android:layout_height = "match_parent" >
2. TabWidget組件
選項卡切換 : 該組件是選項卡切換按鈕, 通過點擊該組件可以切換選項卡;
設置android自帶id : 這個組件的id要設置成android的自帶id :android:id="@android:id/tabs" ;
TabHost必備組件 : 該組件與FrameLayout組件是TabHost組件中必備的兩個組件;
切換按鈕下方顯示 : 如果想要將按鈕放到下面, 可以將該組件定義在下面, 但是注意, FrameLayout要設置android:layout_widget = "1" ;
設置TabWidget大小 : 如果想要設置該按鈕組件的大小, 可以設置該組件與FrameLayout組件的權重;
示例 :
- < TabWidget
- android:id = "@android:id/tabs"
- android:layout_width = "fill_parent"
- android:layout_height = "wrap_content"
- android:orientation = "horizontal" />
3. FrameLayout組件
組件作用 : 該組件中定義的子組件是TabHost中每個頁面顯示的選項卡, 可以將TabHost選項卡顯示的視圖定義在其中;
設置android自帶id : 這個組件的id要設置成android的自帶的id :android:id="@android:id/tabcontent" ;
示例 :
- < FrameLayout
- android:id = "@android:id/tabcontent"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:layout_weight = "1" >
二. Activity方法
1. 獲取TabHost
獲取方法 : getHost();
前提 : 調用getHost()方法獲取TabHost組件的方法的前提是在布局文件中, 設置了android自帶的idandroid:id="@android:id/tabhost" 才可以;
2. 創建選項卡
創建選項卡 : 調用TabHost組件的newTabHost(tag), 其中的tag是字符串, 即在 選項卡的唯一標識 ;
設置選項卡 :
-- 設置按鈕名稱 :setIndicator("叫獸");
-- 設置選項卡內容 : setContent(), 可以設置視圖組件, 可以設置Activity, 也可以設置Fragement;
添加選項卡 : tabHost.add(spec), 傳入的參數是創建選項卡的TabSpec對象;
三 代碼
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 = "fill_parent"
- android:layout_height = "fill_parent"
- android:orientation = "vertical" >
- < TabWidget
- android:id = "@android:id/tabs"
- android:layout_width = "fill_parent"
- android:layout_height = "wrap_content"
- android:orientation = "horizontal" />
- < FrameLayout
- android:id = "@android:id/tabcontent"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:layout_weight = "1" >
- < LinearLayout
- android:id = "@+id/alwayswet"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:orientation = "vertical" >
- < ImageView
- android:scaleType = "fitXY"
- android:layout_height = "fill_parent"
- android:layout_width = "fill_parent"
- android:src = "@drawable/alwayswet" />
- </ LinearLayout >
- < LinearLayout
- android:id = "@+id/isanimal"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:orientation = "vertical" >
- < ImageView
- android:scaleType = "fitXY"
- android:layout_height = "fill_parent"
- android:layout_width = "fill_parent"
- android:src = "@drawable/isanimal" />
- </ LinearLayout >
- < LinearLayout
- android:id = "@+id/nezha"
- android:layout_width = "fill_parent"
- android:layout_height = "fill_parent"
- android:orientation = "vertical" >
- < ImageView
- android:scaleType = "fitXY"
- android:layout_height = "fill_parent"
- android:layout_width = "fill_parent"
- android:src = "@drawable/nazha" />
- </ LinearLayout >
- </ FrameLayout >
- </ LinearLayout >
- </ TabHost >
Activity主界面代碼 :
- package shuliang.han.tabhost_test;
- import android.app.TabActivity;
- import android.os.Bundle;
- import android.widget.TabHost;
- import android.widget.TabHost.TabSpec;
- public class MainActivity extends TabActivity{
- @Override
- protected void onCreate(BundlesavedInstanceState){
- super .onCreate(savedInstanceState);
- setContentView(R.layout.tabhost);
- TabHosttabHost=getTabHost();
- TabSpecpage1=tabHost.newTabSpec( "tab1" )
- .setIndicator( "叫獸" )
- .setContent(R.id.isanimal);
- tabHost.addTab(page1);
- TabSpecpage2=tabHost.newTabSpec( "tab2" )
- .setIndicator( "老濕" )
- .setContent(R.id.alwayswet);
- tabHost.addTab(page2);
- TabSpecpage3=tabHost.newTabSpec( "tab3" )
- .setIndicator( "哪吒" )
- .setContent(R.id.nezha);
- tabHost.addTab(page3);
- }
- }
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
