Android底部菜單切換實作

這裡有幾個關鍵點：

1.用TabHost布局，需要聲明id為android:id="@android:id/tabhost"

2.MainActivity需要繼承TabActivity

3.實作OnCheckedChangeListener

4.通過getHost方法擷取Tabhost

5.通過addTab方法添加頁籤

6.設定Activity跳轉需要為每個頁籤setContent

7.在onCheckedChanged監聽每一個頁籤

8.頁籤通過調用setCurrentTabByTag方法實作顯示Activity

項目執行個體：小巫新聞用戶端的底部菜單實作

項目運作效果圖：

建立項目：ButtonMenuTest

首先來看看界面布局：maintabs.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@android:id/tabhost"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"   
6.     android:background="@drawable/main_background">  
7.     <LinearLayout  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:orientation="vertical" >  
11.         <FrameLayout  
12.             android:id="@android:id/tabcontent"  
13.             android:layout_width="match_parent"  
14.             android:layout_height="0.0dip"  
15.             android:layout_weight="1.0" />  
16.         <TabWidget  
17.             android:id="@android:id/tabs"  
18.             android:layout_width="match_parent"  
19.             android:layout_height="wrap_content"  
20.             android:layout_weight="0.0"  
21.             android:visibility="gone" />  
22.         <RadioGroup  
23.             android:id="@+id/main_radio"  
24.             android:layout_width="match_parent"  
25.             android:layout_height="wrap_content"  
26.             android:layout_gravity="bottom"  
27.             android:background="@drawable/image_tabbar_background"  
28.             android:gravity="center_vertical"  
29.             android:orientation="horizontal" >  
30.             <RadioButton  
31.                 android:id="@+id/home_button"  
32.                 style="@style/main_tab_bottom"  
33.                 android:layout_marginTop="8.0dip"  
34.                 android:background="@drawable/image_tabbar_button_news_home_selector"  
35.                 android:tag="home_button" />  
36.             <RadioButton  
37.                 android:id="@+id/subscribe_button"  
38.                 style="@style/main_tab_bottom"  
39.                 android:layout_marginTop="8.0dip"  
40.                 android:background="@drawable/image_tabbar_button_subscription_selector"  
41.                 android:tag="subscribe_button" />  
42.             <RadioButton  
43.                 android:id="@+id/hotnews_button"  
44.                 style="@style/main_tab_bottom"  
45.                 android:layout_marginTop="8.0dip"  
46.                 android:background="@drawable/image_tabbar_button_hot_news_selector"  
47.                 android:tag="hotnews_button" />  
48.             <RadioButton  
49.                 android:id="@+id/financial_button"  
50.                 style="@style/main_tab_bottom"  
51.                 android:layout_marginTop="8.0dip"  
52.                 android:background="@drawable/image_tabbar_button_financial_index_selector"  
53.                 android:tag="financial_button" />  
54.             <RadioButton  
55.                 android:id="@+id/search_button"  
56.                 style="@style/main_tab_bottom"  
57.                 android:layout_marginTop="8.0dip"  
58.                 android:background="@drawable/image_tabbar_button_search_news_selector"  
59.                 android:tag="search_button" />  
60.         </RadioGroup>  
61.     </LinearLayout>  
62. </TabHost>  

style代碼：styles.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources xmlns:android="http://schemas.android.com/apk/res/android">   
3. <style name="AppTheme" parent="android:Theme.Light" />  
4.     <style name="main_tab_bottom">  
5.         <item name="android:textSize">@dimen/bottom_tab_font_size</item>  
6.         <item name="android:textColor">#ff0000</item>  
7.         <item name="android:ellipsize">marquee</item>  
8.         <item name="android:gravity">center_horizontal</item>    
9.         <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>  
10.         <item name="android:layout_width">match_parent</item>  
11.         <item name="android:layout_height">wrap_content</item>  
12.         <item name="android:button">@null</item>    
13.         <item name="android:singleLine">true</item>  
14.         <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>  
15.         <item name="android:layout_weight">1.0</item>  
16.     </style>  
17. </resources>   

news_home_layout.xml

[html]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/main_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:background="@drawable/main_background"  
7.     android:orientation="vertical" >  
8.     <RelativeLayout  
9.         android:id="@id/titlebar_layout"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:background="@drawable/image_titlebar_background" >  
13.         <TextView  
14.             android:layout_width="wrap_content"  
15.             android:layout_height="wrap_content"  
16.             android:layout_marginLeft="10.0dip"  
17.             android:layout_marginTop="9.0dip"  
18.             android:text="@string/app_name"  
19.             android:textColor="@color/white"  
20.             android:textSize="23.0sp" />  
21.         <Button  
22.             android:id="@id/titlebar_refresh"  
23.             android:layout_width="wrap_content"  
24.             android:layout_height="wrap_content"  
25.             android:layout_alignParentRight="true"  
26.             android:layout_marginRight="5.0dip"  
27.             android:layout_marginTop="6.0dip"  
28.             android:background="@drawable/btn_titlebar_refresh_selector" />  
29.         <ProgressBar  
30.             android:id="@id/titlebar_progress"  
31.             style="?android:attr/progressBarStyleLarge"  
32.             android:layout_width="25.0dip"  
33.             android:layout_height="25.0dip"  
34.             android:layout_alignParentRight="true"  
35.             android:layout_marginRight="14.0dip"  
36.             android:layout_marginTop="10.0dip"  
37.             android:clickable="false"  
38.             android:visibility="gone" />  
39.     </RelativeLayout>  
40.     <RelativeLayout  
41.         android:id="@id/categorybar_layout"  
42.         android:layout_width="match_parent"  
43.         android:layout_height="wrap_content"  
44.         android:layout_marginTop="-16dip"  
45.         android:background="@drawable/image_categorybar_background" >  
46.         <Button  
47.             android:id="@id/category_arrow_right"  
48.             android:layout_width="6.0dip"  
49.             android:layout_height="10.0dip"  
50.             android:layout_alignParentRight="true"  
51.             android:layout_marginRight="12dip"  
52.             android:layout_marginTop="17dip"  
53.             android:background="@drawable/image_categorybar_right_arrow" />  
54.     </RelativeLayout>  
55. </LinearLayout>  

financial_index_layout.xml

[html]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/financial_index_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:background="@drawable/main_background"  
7.     android:orientation="vertical" >  
8.     <RelativeLayout  
9.         android:id="@+id/titlebar_layout"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:background="@drawable/image_titlebar_background" >  
13.         <TextView  
14.             android:layout_width="wrap_content"  
15.             android:layout_height="wrap_content"  
16.             android:layout_marginLeft="10.0dip"  
17.             android:layout_marginTop="9.0dip"  
18.             android:text="@string/financial_news"  
19.             android:textColor="@color/white"  
20.             android:textSize="23.0sp" />  
21.         <Button  
22.             android:id="@+id/titlebar_refresh"  
23.             android:layout_width="wrap_content"  
24.             android:layout_height="wrap_content"  
25.             android:layout_alignParentRight="true"  
26.             android:layout_marginRight="5.0dip"  
27.             android:layout_marginTop="6.0dip"  
28.             android:background="@drawable/btn_titlebar_refresh_selector" />  
29.         <ProgressBar  
30.             android:id="@+id/titlebar_progress"  
31.             style="?android:attr/progressBarStyleLarge"  
32.             android:layout_width="25.0dip"  
33.             android:layout_height="25.0dip"  
34.             android:layout_alignParentRight="true"  
35.             android:layout_marginRight="14.0dip"  
36.             android:layout_marginTop="10.0dip"  
37.             android:clickable="false"  
38.             android:visibility="gone" />  
39.     </RelativeLayout>  
40.     <RelativeLayout  
41.         android:id="@+id/categorybar_layout"  
42.         android:layout_width="match_parent"  
43.         android:layout_height="wrap_content"  
44.         android:layout_marginTop="-16dip"  
45.         android:background="@drawable/image_categorybar_background" >  
46.         <HorizontalScrollView  
47.             android:id="@+id/categorybar_scrollView"  
48.             android:layout_width="match_parent"  
49.             android:layout_height="wrap_content"  
50.             android:layout_marginLeft="8dip"  
51.             android:layout_marginTop="3.0dip"  
52.             android:layout_toLeftOf="@+id/category_arrow_right"  
53.             android:scrollbars="none" >  
54.             <LinearLayout  
55.                 android:id="@+id/category_layout"  
56.                 android:layout_width="match_parent"  
57.                 android:layout_height="match_parent"  
58.                 android:gravity="center_vertical" >  
59.             </LinearLayout>  
60.         </HorizontalScrollView>  
61.     </RelativeLayout>  
62.     <RelativeLayout   
63.         android:id="@+id/financial_index_table_title_layout"  
64.         android:layout_width="match_parent"  
65.         android:layout_height="wrap_content"  
66.         android:layout_marginTop="-10.0dip"  
67.         android:background="@drawable/image_financial_index_table_title_background"  
68.         >  
69.         <TextView   
70.             android:id="@+id/txt1"  
71.             android:layout_width="wrap_content"  
72.             android:layout_height="wrap_content"  
73.             android:text="指數"  
74.             android:textColor="#000000"  
75.             android:layout_marginLeft="5.0dip"  
76.             android:layout_marginTop="5.0dip"  
77.             android:layout_alignParentLeft="true"  
78.             />  
79.         <TextView  
80.             android:id="@+id/txt2"  
81.             android:layout_width="wrap_content"  
82.             android:layout_height="wrap_content"  
83.             android:layout_toLeftOf="@+id/txt3"  
84.             android:text="最新價"  
85.             android:textColor="#000000"  
86.             android:layout_marginRight="10.0dip"  
87.             android:layout_marginTop="5.0dip"  
88.             />  
89.            <TextView  
90.             android:id="@+id/txt3"  
91.             android:layout_width="wrap_content"  
92.             android:layout_height="wrap_content"  
93.             android:layout_toLeftOf="@+id/txt4"  
94.             android:text="漲跌額"  
95.             android:textColor="#000000"  
96.             android:layout_marginRight="10.0dip"  
97.             android:layout_marginTop="5.0dip"  
98.             />  
99.         <TextView  
100.             android:id="@+id/txt4"  
101.             android:layout_width="wrap_content"  
102.             android:layout_height="wrap_content"  
103.             android:layout_alignParentRight="true"  
104.             android:text="漲跌幅"  
105.             android:textColor="#000000"  
106.             android:layout_marginRight="15.0dip"  
107.             android:layout_marginTop="5.0dip"  
108.             />          
109.     </RelativeLayout>  
110. </LinearLayout>  

hot_news_layout.xml

[html]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/hot_news_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:background="@drawable/main_background"  
7.     android:orientation="vertical" >  
8.     <RelativeLayout  
9.         android:id="@id/titlebar_layout"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:background="@drawable/image_titlebar_background" >  
13.         <TextView  
14.             android:layout_width="wrap_content"  
15.             android:layout_height="wrap_content"  
16.             android:layout_marginLeft="10.0dip"  
17.             android:layout_marginTop="9.0dip"  
18.             android:text="@string/hot_news"  
19.             android:textColor="@color/white"  
20.             android:textSize="23.0sp" />  
21.         <Button  
22.             android:id="@id/titlebar_refresh"  
23.             android:layout_width="wrap_content"  
24.             android:layout_height="wrap_content"  
25.             android:layout_alignParentRight="true"  
26.             android:layout_marginRight="5.0dip"  
27.             android:layout_marginTop="6.0dip"  
28.             android:background="@drawable/btn_titlebar_refresh_selector" />  
29.     </RelativeLayout>  
30.     <RelativeLayout  
31.         android:id="@id/categorybar_layout"  
32.         android:layout_width="match_parent"  
33.         android:layout_height="wrap_content"  
34.         android:layout_marginTop="-16dip"  
35.         android:background="@drawable/image_categorybar_background" >  
36.     </RelativeLayout>  
37. </LinearLayout>  

search_news_layout.xml

[html]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/search_news_layout"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:background="@drawable/main_background"  
7.     android:orientation="vertical" >  
8.     <RelativeLayout  
9.         android:id="@id/titlebar_layout"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:background="@drawable/image_titlebar_background" >  
13.         <TextView  
14.             android:layout_width="wrap_content"  
15.             android:layout_height="wrap_content"  
16.             android:layout_marginLeft="10.0dip"  
17.             android:layout_marginTop="9.0dip"  
18.             android:text="@string/search_news"  
19.             android:textColor="@color/white"  
20.             android:textSize="23.0sp" />  
21.     </RelativeLayout>  
22.     <RelativeLayout   
23.         android:id="@+id/searchBox_layout"  
24.         android:layout_width="wrap_content"  
25.         android:layout_height="wrap_content"  
26.         android:background="@drawable/image_search_searchbox"  
27.         android:layout_marginTop="-16.0dip"  
28.         >  
29.         <Button   
30.             android:layout_width="wrap_content"  
31.             android:layout_height="wrap_content"  
32.             android:layout_alignParentRight="true"  
33.             android:background="@drawable/search_button_selector"/>  
34.     </RelativeLayout>  
35. </LinearLayout>  

建立6個Activity:

MainActivity.java

NewsHomeActivity

SubscribeActivity.java

HotNewsActivity.java

FinancialActivity.java

SearchNewsActivty.java

源代碼如下：

[java]  view plain copy

1. package com.wwj.buttonmenu;  
2. import android.os.Bundle;  
3. import android.app.TabActivity;  
4. import android.content.Intent;  
5. import android.widget.RadioGroup;  
6. import android.widget.RadioGroup.OnCheckedChangeListener;  
7. import android.widget.TabHost;  
8. public class MainActivity extends TabActivity implements OnCheckedChangeListener{  
9.     private TabHost mTabHost;  
10.     private RadioGroup radioGroup;  
11.     @Override  
12.     protected void onCreate(Bundle savedInstanceState) {  
13.         // TODO Auto-generated method stub  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.maintabs);  
16.         // 執行個體化TabHost  
17.         mTabHost = this.getTabHost();  
18.         // 添加頁籤  
19.         mTabHost.addTab(mTabHost.newTabSpec("ONE").setIndicator("ONE")  
20.                 .setContent(new Intent(this, NewsHomeActivity.class)));  
21.         mTabHost.addTab(mTabHost.newTabSpec("TWO").setIndicator("TWO")  
22.                 .setContent(new Intent(this, SubscribeActivity.class)));  
23.         mTabHost.addTab(mTabHost.newTabSpec("THREE").setIndicator("THREE")  
24.                 .setContent(new Intent(this, HotNewsActivity.class)));  
25.         mTabHost.addTab(mTabHost.newTabSpec("FOUR").setIndicator("FOUR")  
26.                 .setContent(new Intent(this, FinancialActivity.class)));  
27.         mTabHost.addTab(mTabHost.newTabSpec("FIVE").setIndicator("FIVE")  
28.                 .setContent(new Intent(this, SearchNewsActiity.class)));  
29.         radioGroup = (RadioGroup) findViewById(R.id.main_radio);  
30.         //注冊監聽器  
31.         radioGroup.setOnCheckedChangeListener(this);          
32.     }  
33.     @Override  
34.     public void onCheckedChanged(RadioGroup group, int checkedId) {  
35.         // TODO Auto-generated method stub  
36.         switch(checkedId) {  
37.         case R.id.home_button:  
38.             mTabHost.setCurrentTabByTag("ONE");  
39.             break;  
40.         case R.id.subscribe_button:  
41.             mTabHost.setCurrentTabByTag("TWO");  
42.             break;  
43.         case R.id.hotnews_button:  
44.             mTabHost.setCurrentTabByTag("THREE");  
45.             break;  
46.         case R.id.financial_button:  
47.             mTabHost.setCurrentTabByTag("FOUR");  
48.             break;  
49.         case R.id.search_button:  
50.             mTabHost.setCurrentTabByTag("FIVE");  
51.             break;            
52.         }  
53.     }  
54. }  

[java]  view plain copy

1. package com.wwj.buttonmenu;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. public class SubscribeActivity extends Activity{  
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         // TODO Auto-generated method stub  
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.subscription_layout);  
10.     }  
11. }  

[java]  view plain copy

1. package com.wwj.buttonmenu;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. public class NewsHomeActivity extends Activity{  
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         // TODO Auto-generated method stub  
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.news_home_layout);  
10.     }  
11. }  

[java]  view plain copy

1. package com.wwj.buttonmenu;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. public class SubscribeActivity extends Activity{  
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         // TODO Auto-generated method stub  
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.subscription_layout);  
10.     }  
11. }  

[java]  view plain copy

1. package com.wwj.buttonmenu;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. public class HotNewsActivity extends Activity {  
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         // TODO Auto-generated method stub  
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.hot_news_layout);  
10.     }  
11. }  

[java]  view plain copy

1. package com.wwj.buttonmenu;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. public class FinancialActivity extends Activity {  
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         // TODO Auto-generated method stub  
8.         super.onCreate(savedInstanceState);  
9.         setContentView(R.layout.financial_index_layout);  
10.     }  
11. }  

[java]  view plain copy

1. package com.wwj.buttonmenu;  
2. import android.app.Activity;  
3. import android.content.Intent;  
4. import android.os.Bundle;  
5. import android.view.View;  
6. import android.view.View.OnClickListener;  
7. import android.widget.Button;  
8. public class SearchNewsActiity extends Activity {  
9.     @Override  
10.     protected void onCreate(Bundle savedInstanceState) {  
11.         // TODO Auto-generated method stub  
12.         super.onCreate(savedInstanceState);  
13.         setContentView(R.layout.search_news_layout);  
14.     }  
15. }  

如果需要的源碼的童鞋可以到以下位址下載下傳：點選打開連結