安卓開發筆記——TabHost組件(二)（實現底部菜單導航）

本文轉載自查看原文 2014-09-16 15:51 3112 安卓/ 控件/ android/ Android

上面文章《安卓開發復習筆記——TabHost組件(一)（實現底部菜單導航）》中提到了利用自定義View（ImageView+TextView）來設置一個底部菜單的樣式

這邊再補充一種更為靈活的方法，可以把TabWidget隱藏，用（RadioGroup+RadioButton）來代替，並利用監聽器的方式來實現監聽點擊點擊跳轉Activity。

在講解之前，先補充幾點：

1、當我們取得TabHost的實例對象時，我們可以用2種方法來設置當前界面內容（Activity）

查看下API，我們可以找到：

這2個方法，分別是利用頁面標志符（int，起始頁為0）和頁面標簽（String）來達到設置當前顯示頁

我們可以利用這2個方法，在對Radio進行監聽點擊時跳轉到對應的頁面。

2、在布局文件XML里，標簽RadioGroup的子標簽RadioButton里有幾個需要注意的地方：

　　1、android:button="@null"　　這個是用來隱藏系統自身提供的單選按鈕樣式

　　2、android:drawableTop="@drawable/tab_icon1"　　這個是用來設置單選按鈕的圖標（系統默認提供在左邊，這個可以把它設置在上面）

　　3、android:drawablePadding="3dp"　　這個是用來設置按鈕圖標與按鈕標簽所在的距離

3、需要把TabWidget設置為隱藏：android:visibility="gone"

為什么說采用這種方法更為靈活呢？

看過我上一篇文章的朋友應該都知道，在上一篇文章里我才采用了自定義的代碼布局，需要在JAVA代碼里去獲取XML布局對象，然后對樣式進行設置，而現在利用RadioGroup+RadioButton，我們可以把所有的樣式都設置在XML布局文件里，這樣更易於維護，在JAVA代碼里我們可以更加專注於業務邏輯的代碼實現。

好了，接下來上代碼吧，由於和上個例子幾乎一樣，重復部分我就不貼出來了，只貼代碼核心部分（注釋很全）

 1 package com.example.tabhosttest;
 2 
 3 import android.app.ActivityGroup;
 4 import android.content.Intent;
 5 import android.os.Bundle;
 6 import android.view.View;
 7 import android.widget.ImageView;
 8 import android.widget.RadioGroup;
 9 import android.widget.RadioGroup.OnCheckedChangeListener;
10 import android.widget.TabHost;
11 import android.widget.TabHost.TabSpec;
12 import android.widget.TextView;
13 
14 public class MainActivity extends ActivityGroup{
15     
16     private TabHost tabHost;//聲明一個TabHost對象
17     
18     private RadioGroup radioGroup;//聲明一個RadioGroup對象
19 
20     //資源文件
21     private Class activitys[]={TabActivity1.class,TabActivity2.class,TabActivity3.class,TabActivity4.class,TabActivity5.class};//跳轉的Activity
22     private String title[]={"首頁","搜索","設置","主題","更多"};//設置菜單的標題
23     private int image[]={R.drawable.tab_icon1,R.drawable.tab_icon2,R.drawable.tab_icon3,R.drawable.tab_icon4,R.drawable.tab_icon5,};//設置菜單
24     
25     @Override
26     protected void onCreate(Bundle savedInstanceState) {
27         super.onCreate(savedInstanceState);
28         setContentView(R.layout.activity_main);
29         initTabView();//初始化tab標簽
30         
31     }
32 
33     private void initTabView() {
34         //實例化tabhost
35         this.tabHost=(TabHost) findViewById(R.id.mytabhost);
36         //由於繼承了ActivityGroup，所以需要在setup方法里加入此參數，若繼承TabActivity則可省略
37         tabHost.setup(this.getLocalActivityManager());
38         
39         //創建標簽
40         for(int i=0;i<activitys.length;i++){
41             /*由於采用了RadioGroup，樣式已經在xml里設置，故這里無需再自定義view            
42             //實例化一個view作為tab標簽的布局
43             View view=View.inflate(this, R.layout.tab_layout, null);
44             
45             //設置imageview
46             ImageView imageView=(ImageView) view.findViewById(R.id.image);
47             imageView.setImageDrawable(getResources().getDrawable(image[i]));
48             //設置textview
49             TextView textView=(TextView) view.findViewById(R.id.title);
50             textView.setText(title[i]);    */
51             
52             //設置跳轉activity
53             Intent intent=new Intent(this, activitys[i]);    
54             
55             //載入view對象並設置跳轉的activity
56             TabSpec spec=tabHost.newTabSpec(title[i]).setIndicator(title[i]).setContent(intent);
57             
58             //添加到選項卡
59             tabHost.addTab(spec);
60         }
61         
62         radioGroup=(RadioGroup) findViewById(R.id.radiogroup);
63         radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
64             
65             @Override
66             public void onCheckedChanged(RadioGroup group, int checkedId) {
67                 switch(checkedId){
68                 
69                 case R.id.radio1:
70                     //tabHost.setCurrentTab(int id); 用當前所在頁數來跳轉activity
71                     //tabHost.setCurrentTabByTag(String tag); 用當前標簽來跳轉activity
72                     tabHost.setCurrentTabByTag(title[0]);
73                     break;
74                 case R.id.radio2:
75                     tabHost.setCurrentTabByTag(title[1]);
76                     break;
77                 case R.id.radio3:
78                     tabHost.setCurrentTabByTag(title[2]);
79                     break;
80                 case R.id.radio4:
81                     tabHost.setCurrentTabByTag(title[3]);
82                     break;
83                 case R.id.radio5:
84                     tabHost.setCurrentTabByTag(title[4]);
85                     break;
86                 }
87                 
88             }
89         });
90         
91     }
92 
93 
94 }

  1 <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  2     android:id="@+id/mytabhost"
  3     android:layout_width="fill_parent"
  4     android:layout_height="fill_parent" >
  5 
  6     <!-- 需要一個布局管理器 -->
  7 
  8     <RelativeLayout
  9         android:layout_width="fill_parent"
 10         android:layout_height="fill_parent" >
 11 
 12         <!--
 13        由於TabHost是繼承於FrameLayout，所以需要一個FrameLaytout布局(內容頁) ,id
 14        必須為tabcontent
 15         -->
 16         
 17         <FrameLayout
 18             android:id="@android:id/tabcontent"
 19             android:layout_width="fill_parent"
 20             android:layout_height="fill_parent" >
 21         </FrameLayout>
 22 
 23         <!-- TabWidget必須標簽，用來存放tab標簽，且id必須為tabs -->
 24 
 25         <TabWidget
 26             android:id="@android:id/tabs"
 27             android:layout_width="fill_parent"
 28             android:layout_height="wrap_content"
 29             android:layout_alignParentBottom="true"
 30             android:background="@drawable/tab_widget_background"
 31             android:visibility="gone" >
 32         </TabWidget>
 33 
 34         <RadioGroup
 35             android:id="@+id/radiogroup"
 36             android:layout_width="fill_parent"
 37             android:layout_height="wrap_content"
 38             android:layout_alignParentBottom="true"
 39             android:background="@drawable/tab_widget_background"
 40             android:orientation="horizontal"
 41             android:padding="3dp" >
 42 
 43             <RadioButton
 44                 android:id="@+id/radio1"
 45                 android:layout_width="wrap_content"
 46                 android:layout_height="wrap_content"
 47                 android:layout_weight="1"
 48                 android:background="@drawable/tab_selector"
 49                 android:button="@null"
 50                 android:drawablePadding="3dp"
 51                 android:drawableTop="@drawable/tab_icon1"
 52                 android:gravity="center_horizontal"
 53                 android:text="首頁"
 54                 android:textColor="@android:color/white"
 55                 android:textSize="10sp" />
 56 
 57             <RadioButton
 58                 android:id="@+id/radio2"
 59                 android:layout_width="wrap_content"
 60                 android:layout_height="wrap_content"
 61                 android:layout_weight="1"
 62                 android:background="@drawable/tab_selector"
 63                 android:button="@null"
 64                 android:drawablePadding="3dp"
 65                 android:drawableTop="@drawable/tab_icon2"
 66                 android:gravity="center_horizontal"
 67                 android:text="搜索"
 68                 android:textColor="@android:color/white"
 69                 android:textSize="10sp" />
 70 
 71             <RadioButton
 72                 android:id="@+id/radio3"
 73                 android:layout_width="wrap_content"
 74                 android:layout_height="wrap_content"
 75                 android:layout_weight="1"
 76                 android:background="@drawable/tab_selector"
 77                 android:button="@null"
 78                 android:drawablePadding="3dp"
 79                 android:drawableTop="@drawable/tab_icon3"
 80                 android:gravity="center_horizontal"
 81                 android:text="設置"
 82                 android:textColor="@android:color/white"
 83                 android:textSize="10sp" />
 84 
 85             <RadioButton
 86                 android:id="@+id/radio4"
 87                 android:layout_width="wrap_content"
 88                 android:layout_height="wrap_content"
 89                 android:layout_weight="1"
 90                 android:background="@drawable/tab_selector"
 91                 android:button="@null"
 92                 android:drawablePadding="3dp"
 93                 android:drawableTop="@drawable/tab_icon4"
 94                 android:gravity="center_horizontal"
 95                 android:text="主題"
 96                 android:textColor="@android:color/white"
 97                 android:textSize="10sp" />
 98 
 99             <RadioButton
100                 android:id="@+id/radio5"
101                 android:layout_width="wrap_content"
102                 android:layout_height="wrap_content"
103                 android:layout_weight="1"
104                 android:background="@drawable/tab_selector"
105                 android:button="@null"
106                 android:drawablePadding="3dp"
107                 android:drawableTop="@drawable/tab_icon5"
108                 android:gravity="center_horizontal"
109                 android:text="更多"
110                 android:textColor="@android:color/white"
111                 android:textSize="10sp" />
112         </RadioGroup>
113     </RelativeLayout>
114 
115 </TabHost>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。