Android 底部菜单栏实现

落爺英雄遲暮 提交于 2020-03-21 21:21:51

3 月,跳不动了?>>>

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

main.xml

  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="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     android:orientation="vertical" >
  7.      <FrameLayout 
  8.             android:id="@android :id/tabcontent"
  9.             android:layout_width="fill_parent"
  10.             android:layout_height="fill_parent"
  11.             android:padding="5dp"
  12.             ></FrameLayout>
  13.     <RelativeLayout
  14.         android:layout_width="fill_parent"
  15.         android:layout_height="fill_parent">
  16.         <!-- tabStripEnabled属性去掉底部下划线与选项卡间的下划线 -->
  17.         <!-- layout_alignParentBottom属性即可将其放在底部菜单栏,注意,必须在RelativeLayout里 -->
  18.         <TabWidget 
  19.             android:id="@android :id/tabs"
  20.             android:tabStripEnabled="false"
  21.             android:background="#6E6E6E"
  22.             android:layout_width="fill_parent"
  23.             android:layout_height="wrap_content"
  24.             android:layout_alignParentBottom="true"
  25.             ></TabWidget>
  26.        
  27.     </RelativeLayout>
  28. </TabHost>
复制代码
主要代码

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


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

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

  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="fill_parent"
  5.     android:layout_height="fill_parent"
  6.     >
  7.     <LinearLayout
  8.         android:orientation="vertical"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="fill_parent">
  11.         <FrameLayout 
  12.             android:id="@android :id/tabcontent"
  13.             android:layout_width="fill_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="fill_parent"
  19.             android:layout_height="wrap_content"
  20.             android:layout_weight="0.0"
  21.             android:visibility="gone"/>
  22.         <RadioGroup
  23.             android:id="@+id/main_tab"
  24.             android:background="@drawable/maintab_toolbar_bg"
  25.             android:orientation="horizontal"
  26.             android:layout_width="fill_parent"
  27.             android:layout_height="wrap_content"
  28.             android:gravity="center_vertical"
  29.             android:layout_gravity="bottom">
  30.             <RadioButton 
  31.                 android:layout_marginTop="2.0dip"
  32.                 android:text="@string/main_home"
  33.                 android:drawableTop="@drawable/icon_1_n"
  34.                 android:id="@+id/radio_button0"
  35.                 style="@style/main_tab_bottom"/>
  36.             <RadioButton 
  37.                 android:layout_marginTop="2.0dip"
  38.                 android:text="@string/main_news"
  39.                 android:drawableTop="@drawable/icon_2_n"
  40.                 android:id="@+id/radio_button1"
  41.                 style="@style/main_tab_bottom"/>
  42.             <RadioButton 
  43.                 android:layout_marginTop="2.0dip"
  44.                 android:text="@string/main_my_info"
  45.                 android:drawableTop="@drawable/icon_3_n"
  46.                 android:id="@+id/radio_button2"
  47.                 style="@style/main_tab_bottom"/>
  48.             <RadioButton 
  49.                 android:layout_marginTop="2.0dip"
  50.                 android:text="@string/menu_search"
  51.                 android:drawableTop="@drawable/icon_4_n"
  52.                 android:id="@+id/radio_button3"
  53.                 style="@style/main_tab_bottom"/>
  54.             <RadioButton 
  55.                 android:layout_marginTop="2.0dip"
  56.                 android:text="@string/more"
  57.                 android:drawableTop="@drawable/icon_5_n"
  58.                 android:id="@+id/radio_button4"
  59.                 style="@style/main_tab_bottom"/>
  60.         </RadioGroup>
  61.     </LinearLayout>
  62. </TabHost>
复制代码
drawable/home_btn_bg.xml:切换时的效果

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <selector
  3.   xmlns:android="http://schemas.android.com/apk/res/android">
  4.     <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s" />
  5.     <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s" />
  6.     <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d" />
  7.     <item android:drawable="@drawable/transparent" />
  8. </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. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <style name="main_tab_bottom">
  4.     <item name="android:textSize">@dimen/bottom_tab_font_size</item>
  5.     <item name="android:textColor">#ffffffff</item>
  6.     <item name="android:ellipsize">marquee</item>
  7.     <item name="android:gravity">center_horizontal</item>
  8.     <item name="android:background">@drawable/home_btn_bg</item>
  9.     <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
  10.     <item name="android:layout_width">fill_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>
复制代码
主要的代码

  1. package com.loulijun.demo2;
  2. import android.app.TabActivity;
  3. import android.content.Intent;
  4. import android.os.Bundle;
  5. import android.view.Window;
  6. import android.widget.RadioGroup;
  7. import android.widget.TabHost;
  8. import android.widget.RadioGroup.OnCheckedChangeListener;
  9. public class MainTabActivity extends TabActivity implements OnCheckedChangeListener{
  10.     private RadioGroup mainTab;
  11.     private TabHost tabhost;
  12.     private Intent iHome;
  13.     private Intent iNews;
  14.     private Intent iInfo;
  15.     private Intent iSearch;
  16.     private Intent iMore;
  17.     
  18.     @Override
  19.     public void onCreate(Bundle savedInstanceState) {
  20.         super.onCreate(savedInstanceState);
  21.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  22.         setContentView(R.layout.main);
  23.         mainTab=(RadioGroup)findViewById(R.id.main_tab);
  24.         mainTab.setOnCheckedChangeListener(this);
  25.         tabhost = getTabHost();
  26.         
  27.         iHome = new Intent(this, HomeActivity.class);
  28.         tabhost.addTab(tabhost.newTabSpec("iHome")
  29.                 .setIndicator(getResources().getString(R.string.main_home), getResources().getDrawable(R.drawable.icon_1_n))
  30.                 .setContent(iHome));
  31.         
  32.         iNews = new Intent(this, NewsActivity.class);
  33.         tabhost.addTab(tabhost.newTabSpec("iNews")
  34.                 .setIndicator(getResources().getString(R.string.main_news), getResources().getDrawable(R.drawable.icon_2_n))
  35.                 .setContent(iNews));
  36.         
  37.         iInfo = new Intent(this, MyInfoActivity.class);
  38.         tabhost.addTab(tabhost.newTabSpec("iInfo")
  39.                 .setIndicator(getResources().getString(R.string.main_my_info), getResources().getDrawable(R.drawable.icon_3_n))
  40.                 .setContent(iInfo));
  41.         
  42.         iSearch = new Intent(this,SearchActivity.class);
  43.         tabhost.addTab(tabhost.newTabSpec("iSearch")
  44.                 .setIndicator(getResources().getString(R.string.menu_search), getResources().getDrawable(R.drawable.icon_4_n))
  45.                 .setContent(iSearch));
  46.         
  47.         iMore = new Intent(this, MoreActivity.class);
  48.          tabhost.addTab(tabhost.newTabSpec("iMore")
  49.                     .setIndicator(getResources().getString(R.string.more), getResources().getDrawable(R.drawable.icon_5_n))
  50.                     .setContent(iMore));
  51.     }
  52.    
  53.     @Override
  54.     public void onCheckedChanged(RadioGroup group, int checkedId) {
  55.         switch(checkedId){
  56.         case R.id.radio_button0:
  57.             this.tabhost.setCurrentTabByTag("iHome");
  58.             break;
  59.         case R.id.radio_button1:
  60.             this.tabhost.setCurrentTabByTag("iNews");
  61.             break;
  62.         case R.id.radio_button2:
  63.             this.tabhost.setCurrentTabByTag("iInfo");
  64.             break;
  65.         case R.id.radio_button3:
  66.             this.tabhost.setCurrentTabByTag("iSearch");
  67.             break;
  68.         case R.id.radio_button4:
  69.             this.tabhost.setCurrentTabByTag("iMore");
  70.             break;
  71.         }
  72.     }  
  73. }
复制代码
效果图
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!