Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android開發之TabHost組件實例

Android開發之TabHost組件實例

編輯:Android開發實例

       大家在進行其他語言的編程時應該都見過甚至用過標簽組件,Android開發中也經常會用到標簽組件。一般情況下如果一屏放不下所有組件,則我們可能會選擇滾動視圖,另外一種方法就是使用標簽組件對屏幕進行分頁,單擊不同標簽顯示它對應的內容。Android中的TabHost是標簽組件的核心類,也是標簽的集合,每一個標簽顯示一個View或一個Activity。

       TabHost簡介

       所謂的TabHost是提供選項卡(Tab頁)的窗口視圖容器.此對象包含兩個子對象: 一個是使用戶可以選擇指定標簽頁的標簽的集合;另一個是用於顯示標簽頁內容的 FrameLayout. 選項卡中的個別元素一般通過其容器對象來控制,而不是直接設置子元素本身的值。

       常用方法:

                   addTab(TabHost.TabSpec tabSpec):添加一項 Tab 頁

                   clearAllTabs():清除所有與之相關聯的 Tab 頁.

                   getCurrentTab():返回當前 Tab 頁.

                   getTabContentView():返回包含內容的 FrameLayout

                   newTabSpec(String tag):返回一個與之關聯的新的 TabSpec

       TabHost開發實例

       下面是TabHost組件的一個開發實例,代碼如下:

XML/HTML代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"    
  4.     android:layout_height="fill_parent"  
  5.     android:background="@drawable/framebackground">  
  6.     <!-- 第一個Tab中得layout -->  
  7.     <LinearLayout android:id="@+id/frist_tab_linearlayout"  
  8.         android:layout_width="fill_parent"    
  9.         android:layout_height="fill_parent"  
  10.         android:orientation="vertical"    
  11.         >  
  12.         <TextView    
  13.             android:layout_width="wrap_content"  
  14.             android:layout_height="wrap_content"  
  15.             android:layout_gravity="center_horizontal"  
  16.             android:gravity="center_vertical"  
  17.             android:layout_marginTop="100dp"  
  18.             android:text="@string/love"  
  19.             android:textColor="#000000"  
  20.             android:textSize="20sp"  
  21.         />  
  22.         <TextView    
  23.             android:layout_width="220dp"  
  24.             android:layout_height="wrap_content"  
  25.             android:layout_gravity="center_horizontal"  
  26.             android:gravity="center_vertical"  
  27.             android:paddingTop="17dp"  
  28.             android:text="@string/love_text"  
  29.             android:textColor="#000000"  
  30.             android:textSize="15sp"  
  31.         />  
  32.     </LinearLayout>  
  33.     <!-- 第二個Tab中得layout -->  
  34.     <LinearLayout android:id="@+id/second_tab_linearlayout"  
  35.         android:layout_width="fill_parent"    
  36.         android:layout_height="fill_parent"  
  37.         android:orientation="vertical"    
  38.         >  
  39.         <TextView    
  40.             android:layout_width="wrap_content"  
  41.             android:layout_height="wrap_content"  
  42.             android:layout_gravity="center_horizontal"  
  43.             android:gravity="center_vertical"  
  44.             android:layout_marginTop="100dp"  
  45.             android:text="@string/friendship"  
  46.             android:textColor="#000000"  
  47.             android:textSize="20sp"  
  48.         />  
  49.         <TextView    
  50.             android:layout_width="220dp"  
  51.             android:layout_height="wrap_content"  
  52.             android:layout_gravity="center_horizontal"  
  53.             android:gravity="center_vertical"  
  54.             android:paddingTop="17dp"  
  55.             android:text="@string/friendship_text"  
  56.             android:textColor="#000000"  
  57.             android:textSize="15sp"  
  58.         />  
  59.     </LinearLayout>  
  60.     <!-- 第三個Tab中得layout -->  
  61.     <LinearLayout android:id="@+id/third_tab_linearlayout"  
  62.         android:layout_width="fill_parent"    
  63.         android:layout_height="fill_parent"  
  64.         android:orientation="vertical"    
  65.         >  
  66.         <TextView    
  67.             android:layout_width="wrap_content"  
  68.             android:layout_height="wrap_content"  
  69.             android:layout_gravity="center_horizontal"  
  70.             android:gravity="center_vertical"  
  71.             android:layout_marginTop="100dp"  
  72.             android:text="@string/kinship"  
  73.             android:textColor="#000000"  
  74.             android:textSize="20sp"  
  75.         />  
  76.         <TextView    
  77.             android:layout_width="220dp"  
  78.             android:layout_height="wrap_content"  
  79.             android:layout_gravity="center_horizontal"  
  80.             android:gravity="center_vertical"  
  81.             android:paddingTop="17dp"  
  82.             android:text="@string/kinship_text"  
  83.             android:textColor="#000000"  
  84.             android:textSize="15sp"  
  85.         />  
  86.     </LinearLayout>  
  87.        
  88. </FrameLayout>  
XML/HTML代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <menu  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.      <group    
  5.         android:id="@+id/love_group">  
  6.             <item    
  7.                 android:id="@+id/love_item"    
  8.                 android:icon="@drawable/aiqing"    
  9.                 android:title="Love">  
  10.             </item>  
  11.      </group>  
  12. </menu>  
XML/HTML代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <menu  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.      <group    
  5.         android:id="@+id/kinship_group">  
  6.             <item    
  7.                 android:id="@+id/kinship_item"    
  8.                 android:icon="@drawable/qinqing"    
  9.                 android:title="KinShip">  
  10.             </item>  
  11.      </group>  
  12. </menu>  
XML/HTML代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <menu  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.      <group    
  5.         android:id="@+id/friendship_group">  
  6.             <item    
  7.                 android:id="@+id/friendship_item"    
  8.                 android:icon="@drawable/youqing"    
  9.                 android:title="FriendShip">  
  10.             </item>  
  11.      </group>  
  12. </menu>  
Java代碼
  1. package net.csdn.blog.androidtoast;   
  2.   
  3.   
  4. import android.app.TabActivity;   
  5. import android.graphics.Color;   
  6. import android.os.Bundle;   
  7. import android.view.LayoutInflater;   
  8. import android.view.Menu;   
  9. import android.view.MenuInflater;   
  10. import android.widget.TabHost;   
  11.   
  12. public class TabHostExampleActivity extends TabActivity {   
  13.        
  14.     TabHost mTabHost;   
  15.     int mMenuTag=0;   
  16.     Menu mMenu;   
  17.     static final int mMenuResources[] = {    
  18.           R.layout.love_menu,   
  19.           R.layout.friendship_menu,    
  20.           R.layout.kinship_menu   
  21.           };   
  22.        
  23.     /** Called when the activity is first created. */  
  24.     @Override  
  25.     protected void onCreate(Bundle savedInstanceState) {   
  26.         // TODO Auto-generated method stub   
  27.         super.onCreate(savedInstanceState);   
  28.            
  29.         //獲取TabHost   
  30.         mTabHost=this.getTabHost();   
  31.         //過濾出TabHost布局   
  32.         LayoutInflater.from(this).inflate(R.layout.main, mTabHost.getTabContentView(), true);   
  33.         //為TabHost設置背景顏色   
  34.         mTabHost.setBackgroundColor(Color.argb(100, 30, 80, 160));   
  35.            
  36.         //增加三個選型卡 並設置其圖標及繪制布局   
  37.         mTabHost.addTab(mTabHost.newTabSpec("One")   
  38.                  .setIndicator("", getResources().getDrawable(R.drawable.aiqing))   
  39.                  .setContent(R.id.frist_tab_linearlayout));   
  40.            
  41.         mTabHost.addTab(mTabHost.newTabSpec("Two")   
  42.                 .setIndicator("", getResources().getDrawable(R.drawable.youqing))   
  43.                 .setContent(R.id.second_tab_linearlayout));   
  44.            
  45.         mTabHost.addTab(mTabHost.newTabSpec("Three")   
  46.                 .setIndicator("", getResources().getDrawable(R.drawable.qinqing))   
  47.                 .setContent(R.id.third_tab_linearlayout));   
  48.            
  49.         //添加監聽事件   
  50.         mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {   
  51.                
  52.             @Override  
  53.             public void onTabChanged(String tabId) {   
  54.                 if (tabId.equals("One")) {   
  55.                     mMenuTag = 1;   
  56.                 }   
  57.                 if (tabId.equals("Two")) {   
  58.                     mMenuTag = 2;   
  59.                 }   
  60.                 if (tabId.equals("Three")) {   
  61.                     mMenuTag = 3;   
  62.                 }   
  63.                 if (mMenu != null) {   
  64.                     onCreateOptionsMenu(mMenu);   
  65.                 }   
  66.             }   
  67.         });   
  68.            
  69.            
  70.     }   
  71.   
  72.     //創建對應的菜單項   
  73.     @Override  
  74.     public boolean onCreateOptionsMenu(Menu menu) {   
  75.         mMenu = menu;   
  76.         mMenu.clear();   
  77.            
  78.         //獲取菜單過濾器   
  79.         MenuInflater inflater = getMenuInflater();           
  80.           
  81.         switch (mMenuTag) {   
  82.         case 1:   
  83.             //動態加入數組中對應的menu.xml   
  84.             inflater.inflate(mMenuResources[0], menu);   
  85.             break;   
  86.         case 2:   
  87.             inflater.inflate(mMenuResources[1], menu);   
  88.             break;   
  89.         case 3:   
  90.             inflater.inflate(mMenuResources[2], menu);   
  91.             break;   
  92.         default:   
  93.             inflater.inflate(mMenuResources[0], menu);   
  94.             break;   
  95.         }   
  96.         return super.onCreateOptionsMenu(menu);   
  97.     }   
  98. }  

       程序的運行結果的界面如下: 

Android開發之TabHost組件實例

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved