Android 底部菜单栏实现

3 月，跳不动了？>>>

虽然网上有很多底部菜单栏的实现方式，但是实现方式各种各样，很多也不符合自己的口味，所以还是总结下底部菜单栏的实现方式，以便以后方便查询使用
实现方式一：通过TabWidget实现
这种方式主要是在布局中将TabWidget标签嵌套在RelativeLayout中，并且在TabWidget标签中中设置 android:layout_alignParentBottom="true"
另外，下划线和选项卡之间的线去除的方法时在TabWidget标签中设置属性android:tabStripEnabled="false"

main.xml

1. 
   
2. <?xml version="1.0" encoding="utf-8"?>
   
3. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
   
4.     android:id="@android :id/tabhost"
   
5.     android:layout_width="fill_parent"
   
6.     android:layout_height="fill_parent"
   
7.     android:orientation="vertical" >
   
8.      <FrameLayout 
   
9.             android:id="@android :id/tabcontent"
   
10.             android:layout_width="fill_parent"
    
11.             android:layout_height="fill_parent"
    
12.             android:padding="5dp"
    
13.             ></FrameLayout>
    
14.     <RelativeLayout
    
15.         android:layout_width="fill_parent"
    
16.         android:layout_height="fill_parent">
    
17.         <!-- tabStripEnabled属性去掉底部下划线与选项卡间的下划线 -->
    
18.         <!-- layout_alignParentBottom属性即可将其放在底部菜单栏，注意，必须在RelativeLayout里 -->
    
19.         <TabWidget 
    
20.             android:id="@android :id/tabs"
    
21.             android:tabStripEnabled="false"
    
22.             android:background="#6E6E6E"
    
23.             android:layout_width="fill_parent"
    
24.             android:layout_height="wrap_content"
    
25.             android:layout_alignParentBottom="true"
    
26.             ></TabWidget>
    
27.        
    
28.     </RelativeLayout>
    
29. </TabHost>
    

复制代码

主要代码

1. 
   
2. package com.loulijun.demo1;
   
3. import android.app.TabActivity;
   
4. import android.content.Intent;
   
5. import android.os.Bundle;
   
6. import android.widget.TabHost;
   
7. public class Demo1Activity extends TabActivity {
   
8.     /** Called when the activity is first created. */
   
9.     private TabHost tabhost;
   
10.     private Intent intent1, intent2, intent3, intent4;
    
11.     @Override
    
12.     public void onCreate(Bundle savedInstanceState) {
    
13.         super.onCreate(savedInstanceState);
    
14.         setContentView(R.layout.main);
    
15.         tabhost = getTabHost();
    
16.         
    
17.         intent1 = new Intent(Demo1Activity.this, One.class);
    
18.         tabhost.addTab(tabhost.newTabSpec("one")
    
19.                 .setIndicator("电话",getResources().getDrawable(android.R.drawable.ic_menu_call))
    
20.                 .setContent(intent1));
    
21.         
    
22.         intent2 = new Intent(Demo1Activity.this, Two.class);
    
23.         tabhost.addTab(tabhost.newTabSpec("two")
    
24.                 .setIndicator("相机",getResources().getDrawable(android.R.drawable.ic_menu_camera))
    
25.                 .setContent(intent2));
    
26.         
    
27.         intent3 = new Intent(Demo1Activity.this, Three.class);
    
28.         tabhost.addTab(tabhost.newTabSpec("three")
    
29.                 .setIndicator("分享",getResources().getDrawable(android.R.drawable.ic_menu_share))
    
30.                 .setContent(intent3));
    
31.         
    
32.         intent4 = new Intent(Demo1Activity.this, Four.class);
    
33.         tabhost.addTab(tabhost.newTabSpec("four")
    
34.                 .setIndicator("更多",getResources().getDrawable(android.R.drawable.ic_menu_more))
    
35.                 .setContent(intent4));
    
36.     }
    
37. }
    

复制代码

运行效果如下：


---------------------------------------------------

实现方式二：隐藏TabWidget，通过RadioGroup和RadioButton实现底部菜单栏
这种方式更漂亮，网上基本用的是这种方式，通过setCurrentTabByTag来切换不同的选项卡
main.xml

1. 
   
2. <?xml version="1.0" encoding="utf-8"?>
   
3. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
   
4.     android:id="@android :id/tabhost"
   
5.     android:layout_width="fill_parent"
   
6.     android:layout_height="fill_parent"
   
7.     >
   
8.     <LinearLayout
   
9.         android:orientation="vertical"
   
10.         android:layout_width="fill_parent"
    
11.         android:layout_height="fill_parent">
    
12.         <FrameLayout 
    
13.             android:id="@android :id/tabcontent"
    
14.             android:layout_width="fill_parent"
    
15.             android:layout_height="0.0dip"
    
16.             android:layout_weight="1.0"/>
    
17.         <TabWidget 
    
18.             android:id="@android :id/tabs"
    
19.             android:layout_width="fill_parent"
    
20.             android:layout_height="wrap_content"
    
21.             android:layout_weight="0.0"
    
22.             android:visibility="gone"/>
    
23.         <RadioGroup
    
24.             android:id="@+id/main_tab"
    
25.             android:background="@drawable/maintab_toolbar_bg"
    
26.             android:orientation="horizontal"
    
27.             android:layout_width="fill_parent"
    
28.             android:layout_height="wrap_content"
    
29.             android:gravity="center_vertical"
    
30.             android:layout_gravity="bottom">
    
31.             <RadioButton 
    
32.                 android:layout_marginTop="2.0dip"
    
33.                 android:text="@string/main_home"
    
34.                 android:drawableTop="@drawable/icon_1_n"
    
35.                 android:id="@+id/radio_button0"
    
36.                 style="@style/main_tab_bottom"/>
    
37.             <RadioButton 
    
38.                 android:layout_marginTop="2.0dip"
    
39.                 android:text="@string/main_news"
    
40.                 android:drawableTop="@drawable/icon_2_n"
    
41.                 android:id="@+id/radio_button1"
    
42.                 style="@style/main_tab_bottom"/>
    
43.             <RadioButton 
    
44.                 android:layout_marginTop="2.0dip"
    
45.                 android:text="@string/main_my_info"
    
46.                 android:drawableTop="@drawable/icon_3_n"
    
47.                 android:id="@+id/radio_button2"
    
48.                 style="@style/main_tab_bottom"/>
    
49.             <RadioButton 
    
50.                 android:layout_marginTop="2.0dip"
    
51.                 android:text="@string/menu_search"
    
52.                 android:drawableTop="@drawable/icon_4_n"
    
53.                 android:id="@+id/radio_button3"
    
54.                 style="@style/main_tab_bottom"/>
    
55.             <RadioButton 
    
56.                 android:layout_marginTop="2.0dip"
    
57.                 android:text="@string/more"
    
58.                 android:drawableTop="@drawable/icon_5_n"
    
59.                 android:id="@+id/radio_button4"
    
60.                 style="@style/main_tab_bottom"/>
    
61.         </RadioGroup>
    
62.     </LinearLayout>
    
63. </TabHost>
    

复制代码

drawable/home_btn_bg.xml：切换时的效果

1. 
   
2. <?xml version="1.0" encoding="UTF-8"?>
   
3. <selector
   
4.   xmlns:android="http://schemas.android.com/apk/res/android">
   
5.     <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s" />
   
6.     <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s" />
   
7.     <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d" />
   
8.     <item android:drawable="@drawable/transparent" />
   
9. </selector>
   

复制代码

string/dimens.xml 尺寸文件

1. <? xml version="1.0" encoding="utf-8"?>
   
2. <resources>
   
3.     <dimen name="bottom_tab_padding_drawable">2.0dip</dimen>
   
4.     <dimen name="bottom_tab_padding_up">5.0dip</dimen>
   
5.     <dimen name="bottom_tab_font_size">10.0dip</dimen>
   
6. </resources>

复制代码

string/drawables.xml 设置为透明

1. <? xml version="1.0" encoding="utf-8"?>
   
2. <resources>
   
3. <item type="drawable" name="transparent">#00000000</item>
   
4. </resources>

复制代码

string/styles.xml 样式文件

1. 
   
2. <?xml version="1.0" encoding="utf-8"?>
   
3. <resources>
   
4. <style name="main_tab_bottom">
   
5.     <item name="android:textSize">@dimen/bottom_tab_font_size</item>
   
6.     <item name="android:textColor">#ffffffff</item>
   
7.     <item name="android:ellipsize">marquee</item>
   
8.     <item name="android:gravity">center_horizontal</item>
   
9.     <item name="android:background">@drawable/home_btn_bg</item>
   
10.     <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
    
11.     <item name="android:layout_width">fill_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>
    

复制代码

主要的代码

1. 
   
2. package com.loulijun.demo2;
   
3. import android.app.TabActivity;
   
4. import android.content.Intent;
   
5. import android.os.Bundle;
   
6. import android.view.Window;
   
7. import android.widget.RadioGroup;
   
8. import android.widget.TabHost;
   
9. import android.widget.RadioGroup.OnCheckedChangeListener;
   
10. public class MainTabActivity extends TabActivity implements OnCheckedChangeListener{
    
11.     private RadioGroup mainTab;
    
12.     private TabHost tabhost;
    
13.     private Intent iHome;
    
14.     private Intent iNews;
    
15.     private Intent iInfo;
    
16.     private Intent iSearch;
    
17.     private Intent iMore;
    
18.     
    
19.     @Override
    
20.     public void onCreate(Bundle savedInstanceState) {
    
21.         super.onCreate(savedInstanceState);
    
22.         requestWindowFeature(Window.FEATURE_NO_TITLE);
    
23.         setContentView(R.layout.main);
    
24.         mainTab=(RadioGroup)findViewById(R.id.main_tab);
    
25.         mainTab.setOnCheckedChangeListener(this);
    
26.         tabhost = getTabHost();
    
27.         
    
28.         iHome = new Intent(this, HomeActivity.class);
    
29.         tabhost.addTab(tabhost.newTabSpec("iHome")
    
30.                 .setIndicator(getResources().getString(R.string.main_home), getResources().getDrawable(R.drawable.icon_1_n))
    
31.                 .setContent(iHome));
    
32.         
    
33.         iNews = new Intent(this, NewsActivity.class);
    
34.         tabhost.addTab(tabhost.newTabSpec("iNews")
    
35.                 .setIndicator(getResources().getString(R.string.main_news), getResources().getDrawable(R.drawable.icon_2_n))
    
36.                 .setContent(iNews));
    
37.         
    
38.         iInfo = new Intent(this, MyInfoActivity.class);
    
39.         tabhost.addTab(tabhost.newTabSpec("iInfo")
    
40.                 .setIndicator(getResources().getString(R.string.main_my_info), getResources().getDrawable(R.drawable.icon_3_n))
    
41.                 .setContent(iInfo));
    
42.         
    
43.         iSearch = new Intent(this,SearchActivity.class);
    
44.         tabhost.addTab(tabhost.newTabSpec("iSearch")
    
45.                 .setIndicator(getResources().getString(R.string.menu_search), getResources().getDrawable(R.drawable.icon_4_n))
    
46.                 .setContent(iSearch));
    
47.         
    
48.         iMore = new Intent(this, MoreActivity.class);
    
49.          tabhost.addTab(tabhost.newTabSpec("iMore")
    
50.                     .setIndicator(getResources().getString(R.string.more), getResources().getDrawable(R.drawable.icon_5_n))
    
51.                     .setContent(iMore));
    
52.     }
    
53.    
    
54.     @Override
    
55.     public void onCheckedChanged(RadioGroup group, int checkedId) {
    
56.         switch(checkedId){
    
57.         case R.id.radio_button0:
    
58.             this.tabhost.setCurrentTabByTag("iHome");
    
59.             break;
    
60.         case R.id.radio_button1:
    
61.             this.tabhost.setCurrentTabByTag("iNews");
    
62.             break;
    
63.         case R.id.radio_button2:
    
64.             this.tabhost.setCurrentTabByTag("iInfo");
    
65.             break;
    
66.         case R.id.radio_button3:
    
67.             this.tabhost.setCurrentTabByTag("iSearch");
    
68.             break;
    
69.         case R.id.radio_button4:
    
70.             this.tabhost.setCurrentTabByTag("iMore");
    
71.             break;
    
72.         }
    
73.     }  
    
74. }
    

复制代码

效果图

来源：oschina

链接：https://my.oschina.net/u/942913/blog/105861