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.   
8.     <LinearLayout  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:orientation="vertical" >  
12.   
13.         <FrameLayout  
14.             android:id="@android:id/tabcontent"  
15.             android:layout_width="match_parent"  
16.             android:layout_height="0.0dip"  
17.             android:layout_weight="1.0" />  
18.   
19.         <TabWidget  
20.             android:id="@android:id/tabs"  
21.             android:layout_width="match_parent"  
22.             android:layout_height="wrap_content"  
23.             android:layout_weight="0.0"  
24.             android:visibility="gone" />  
25.   
26.         <RadioGroup  
27.             android:id="@+id/main_radio"  
28.             android:layout_width="match_parent"  
29.             android:layout_height="wrap_content"  
30.             android:layout_gravity="bottom"  
31.             android:background="@drawable/image_tabbar_background"  
32.             android:gravity="center_vertical"  
33.             android:orientation="horizontal" >  
34.   
35.             <RadioButton  
36.                 android:id="@+id/home_button"  
37.                 style="@style/main_tab_bottom"  
38.                 android:layout_marginTop="8.0dip"  
39.                 android:background="@drawable/image_tabbar_button_news_home_selector"  
40.                 android:tag="home_button" />  
41.   
42.             <RadioButton  
43.                 android:id="@+id/subscribe_button"  
44.                 style="@style/main_tab_bottom"  
45.                 android:layout_marginTop="8.0dip"  
46.                 android:background="@drawable/image_tabbar_button_subscription_selector"  
47.                 android:tag="subscribe_button" />  
48.   
49.             <RadioButton  
50.                 android:id="@+id/hotnews_button"  
51.                 style="@style/main_tab_bottom"  
52.                 android:layout_marginTop="8.0dip"  
53.                 android:background="@drawable/image_tabbar_button_hot_news_selector"  
54.                 android:tag="hotnews_button" />  
55.   
56.             <RadioButton  
57.                 android:id="@+id/financial_button"  
58.                 style="@style/main_tab_bottom"  
59.                 android:layout_marginTop="8.0dip"  
60.                 android:background="@drawable/image_tabbar_button_financial_index_selector"  
61.                 android:tag="financial_button" />  
62.   
63.             <RadioButton  
64.                 android:id="@+id/search_button"  
65.                 style="@style/main_tab_bottom"  
66.                 android:layout_marginTop="8.0dip"  
67.                 android:background="@drawable/image_tabbar_button_search_news_selector"  
68.                 android:tag="search_button" />  
69.         </RadioGroup>  
70.     </LinearLayout>  
71.   
72. </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.   
5.     <style name="main_tab_bottom">  
6.         <item name="android:textSize">@dimen/bottom_tab_font_size</item>  
7.         <item name="android:textColor">#ff0000</item>  
8.         <item name="android:ellipsize">marquee</item>  
9.         <item name="android:gravity">center_horizontal</item>    
10.         <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>  
11.         <item name="android:layout_width">match_parent</item>  
12.         <item name="android:layout_height">wrap_content</item>  
13.         <item name="android:button">@null</item>    
14.         <item name="android:singleLine">true</item>  
15.         <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>  
16.         <item name="android:layout_weight">1.0</item>  
17.     </style>  
18. </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.   
9.     <RelativeLayout  
10.         android:id="@id/titlebar_layout"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:background="@drawable/image_titlebar_background" >  
14.   
15.         <TextView  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_marginLeft="10.0dip"  
19.             android:layout_marginTop="9.0dip"  
20.             android:text="@string/app_name"  
21.             android:textColor="@color/white"  
22.             android:textSize="23.0sp" />  
23.   
24.         <Button  
25.             android:id="@id/titlebar_refresh"  
26.             android:layout_width="wrap_content"  
27.             android:layout_height="wrap_content"  
28.             android:layout_alignParentRight="true"  
29.             android:layout_marginRight="5.0dip"  
30.             android:layout_marginTop="6.0dip"  
31.             android:background="@drawable/btn_titlebar_refresh_selector" />  
32.   
33.         <ProgressBar  
34.             android:id="@id/titlebar_progress"  
35.             style="?android:attr/progressBarStyleLarge"  
36.             android:layout_width="25.0dip"  
37.             android:layout_height="25.0dip"  
38.             android:layout_alignParentRight="true"  
39.             android:layout_marginRight="14.0dip"  
40.             android:layout_marginTop="10.0dip"  
41.             android:clickable="false"  
42.             android:visibility="gone" />  
43.     </RelativeLayout>  
44.   
45.     <RelativeLayout  
46.         android:id="@id/categorybar_layout"  
47.         android:layout_width="match_parent"  
48.         android:layout_height="wrap_content"  
49.         android:layout_marginTop="-16dip"  
50.         android:background="@drawable/image_categorybar_background" >  
51.   
52.         <Button  
53.             android:id="@id/category_arrow_right"  
54.             android:layout_width="6.0dip"  
55.             android:layout_height="10.0dip"  
56.             android:layout_alignParentRight="true"  
57.             android:layout_marginRight="12dip"  
58.             android:layout_marginTop="17dip"  
59.             android:background="@drawable/image_categorybar_right_arrow" />  
60.   
61.     </RelativeLayout>  
62. </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.   
9.     <RelativeLayout  
10.         android:id="@+id/titlebar_layout"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:background="@drawable/image_titlebar_background" >  
14.   
15.         <TextView  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_marginLeft="10.0dip"  
19.             android:layout_marginTop="9.0dip"  
20.             android:text="@string/financial_news"  
21.             android:textColor="@color/white"  
22.             android:textSize="23.0sp" />  
23.   
24.         <Button  
25.             android:id="@+id/titlebar_refresh"  
26.             android:layout_width="wrap_content"  
27.             android:layout_height="wrap_content"  
28.             android:layout_alignParentRight="true"  
29.             android:layout_marginRight="5.0dip"  
30.             android:layout_marginTop="6.0dip"  
31.             android:background="@drawable/btn_titlebar_refresh_selector" />  
32.   
33.         <ProgressBar  
34.             android:id="@+id/titlebar_progress"  
35.             style="?android:attr/progressBarStyleLarge"  
36.             android:layout_width="25.0dip"  
37.             android:layout_height="25.0dip"  
38.             android:layout_alignParentRight="true"  
39.             android:layout_marginRight="14.0dip"  
40.             android:layout_marginTop="10.0dip"  
41.             android:clickable="false"  
42.             android:visibility="gone" />  
43.     </RelativeLayout>  
44.   
45.     <RelativeLayout  
46.         android:id="@+id/categorybar_layout"  
47.         android:layout_width="match_parent"  
48.         android:layout_height="wrap_content"  
49.         android:layout_marginTop="-16dip"  
50.         android:background="@drawable/image_categorybar_background" >  
51.   
52.   
53.         <HorizontalScrollView  
54.             android:id="@+id/categorybar_scrollView"  
55.             android:layout_width="match_parent"  
56.             android:layout_height="wrap_content"  
57.             android:layout_marginLeft="8dip"  
58.             android:layout_marginTop="3.0dip"  
59.             android:layout_toLeftOf="@+id/category_arrow_right"  
60.             android:scrollbars="none" >  
61.   
62.             <LinearLayout  
63.                 android:id="@+id/category_layout"  
64.                 android:layout_width="match_parent"  
65.                 android:layout_height="match_parent"  
66.                 android:gravity="center_vertical" >  
67.             </LinearLayout>  
68.         </HorizontalScrollView>  
69.     </RelativeLayout>  
70.     <RelativeLayout   
71.         android:id="@+id/financial_index_table_title_layout"  
72.         android:layout_width="match_parent"  
73.         android:layout_height="wrap_content"  
74.         android:layout_marginTop="-10.0dip"  
75.         android:background="@drawable/image_financial_index_table_title_background"  
76.         >  
77.         <TextView   
78.             android:id="@+id/txt1"  
79.             android:layout_width="wrap_content"  
80.             android:layout_height="wrap_content"  
81.             android:text="指数"  
82.             android:textColor="#000000"  
83.             android:layout_marginLeft="5.0dip"  
84.             android:layout_marginTop="5.0dip"  
85.             android:layout_alignParentLeft="true"  
86.             />  
87.         <TextView  
88.             android:id="@+id/txt2"  
89.             android:layout_width="wrap_content"  
90.             android:layout_height="wrap_content"  
91.             android:layout_toLeftOf="@+id/txt3"  
92.             android:text="最新价"  
93.             android:textColor="#000000"  
94.             android:layout_marginRight="10.0dip"  
95.             android:layout_marginTop="5.0dip"  
96.             />  
97.            <TextView  
98.             android:id="@+id/txt3"  
99.             android:layout_width="wrap_content"  
100.             android:layout_height="wrap_content"  
101.             android:layout_toLeftOf="@+id/txt4"  
102.             android:text="涨跌额"  
103.             android:textColor="#000000"  
104.             android:layout_marginRight="10.0dip"  
105.             android:layout_marginTop="5.0dip"  
106.             />  
107.         <TextView  
108.             android:id="@+id/txt4"  
109.             android:layout_width="wrap_content"  
110.             android:layout_height="wrap_content"  
111.             android:layout_alignParentRight="true"  
112.             android:text="涨跌幅"  
113.             android:textColor="#000000"  
114.             android:layout_marginRight="15.0dip"  
115.             android:layout_marginTop="5.0dip"  
116.             />          
117.     </RelativeLayout>  
118.   
119. </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.   
9.     <RelativeLayout  
10.         android:id="@id/titlebar_layout"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:background="@drawable/image_titlebar_background" >  
14.   
15.         <TextView  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_marginLeft="10.0dip"  
19.             android:layout_marginTop="9.0dip"  
20.             android:text="@string/hot_news"  
21.             android:textColor="@color/white"  
22.             android:textSize="23.0sp" />  
23.   
24.         <Button  
25.             android:id="@id/titlebar_refresh"  
26.             android:layout_width="wrap_content"  
27.             android:layout_height="wrap_content"  
28.             android:layout_alignParentRight="true"  
29.             android:layout_marginRight="5.0dip"  
30.             android:layout_marginTop="6.0dip"  
31.             android:background="@drawable/btn_titlebar_refresh_selector" />  
32.   
33.     </RelativeLayout>  
34.   
35.     <RelativeLayout  
36.         android:id="@id/categorybar_layout"  
37.         android:layout_width="match_parent"  
38.         android:layout_height="wrap_content"  
39.         android:layout_marginTop="-16dip"  
40.         android:background="@drawable/image_categorybar_background" >  
41.     </RelativeLayout>  
42. </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.   
9.     <RelativeLayout  
10.         android:id="@id/titlebar_layout"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:background="@drawable/image_titlebar_background" >  
14.   
15.         <TextView  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:layout_marginLeft="10.0dip"  
19.             android:layout_marginTop="9.0dip"  
20.             android:text="@string/search_news"  
21.             android:textColor="@color/white"  
22.             android:textSize="23.0sp" />  
23.     </RelativeLayout>  
24.     <RelativeLayout   
25.         android:id="@+id/searchBox_layout"  
26.         android:layout_width="wrap_content"  
27.         android:layout_height="wrap_content"  
28.         android:background="@drawable/image_search_searchbox"  
29.         android:layout_marginTop="-16.0dip"  
30.         >  
31.         <Button   
32.             android:layout_width="wrap_content"  
33.             android:layout_height="wrap_content"  
34.             android:layout_alignParentRight="true"  
35.             android:background="@drawable/search_button_selector"/>  
36.           
37.     </RelativeLayout>  
38.    
39. </LinearLayout>  

 

 

 

 

创建6个Activity:

MainActivity.java

NewsHomeActivity

SubscribeActivity.java

HotNewsActivity.java

FinancialActivity.java

SearchNewsActivty.java

 

源代码如下：

[java]  view plain copy

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

[java]  view plain copy

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

 

[java]  view plain copy

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

 

[java]  view plain copy

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

 

 

[java]  view plain copy

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

 

[java]  view plain copy

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

 

[java]  view plain copy

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

 

 

如果需要的源码的童鞋可以到以下地址下载：点击打开链接