Android底部菜单栏实现的实例代码

📅 2026/8/27 13:15:05
Android底部菜单栏实现的实例代码
Android使用RadioGroup 实现底部导航菜单栏。一、主界面布局的实现先来张效果图介绍一下总体界面包括的内容底部五个导航按钮主界面包括一个FrameLayout用来放五个Fragment。点击底部按钮会对应跳转到指定的界面。实现布局activity_main.xml?xml version1.0encodingutf-8?RelativeLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parenttools:contextcom.garvey.activitys.MainActivityFrameLayoutandroid:idid/id_fragment_contentandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:layout_aboveid/id_diverline/FrameLayoutViewandroid:idid/id_diverlineandroid:layout_aboveid/id_bottom_tagsandroid:layout_widthmatch_parentandroid:layout_height0.1dpandroid:background#C2C5CE/LinearLayoutandroid:idid/id_bottom_tagsandroid:layout_widthmatch_parentandroid:layout_height55dpandroid:layout_alignParentBottomtrueandroid:backgrounddrawable/bt_tag_bgandroid:orientationhorizontalRadioGroupandroid:idid/id_navcontentandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:layout_gravitycenterandroid:backgroundcolor/transparentandroid:gravitycenterandroid:orientationhorizontalRadioButtonandroid:idid/id_nav_btshouyeandroid:layout_width0dpandroid:checkedtrueandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:layout_weight1android:backgroundcolor/transparentandroid:buttonnullandroid:clickabletrueandroid:drawablePadding2dpandroid:drawableTopdrawable/x_nav_menu_syandroid:gravitycenterandroid:onClickswitchViewandroid:text首页android:textColordrawable/x_nav_menu_colorandroid:textSize10sp/RadioButtonandroid:idid/id_nav_btgouwuandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:layout_weight1android:backgroundcolor/transparentandroid:buttonnullandroid:clickabletrueandroid:drawablePadding2dpandroid:drawableTopdrawable/x_nav_menu_gwandroid:gravitycenterandroid:onClickswitchViewandroid:text购物android:textColordrawable/x_nav_menu_colorandroid:textSize10sp/RadioButtonandroid:idid/id_nav_btfengshangandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:layout_weight1android:backgroundcolor/transparentandroid:buttonnullandroid:clickabletrueandroid:drawablePadding2dpandroid:drawableTopdrawable/x_nav_menu_fsandroid:gravitycenterandroid:onClickswitchViewandroid:text风尚android:textColordrawable/x_nav_menu_colorandroid:textSize10sp/RadioButtonandroid:idid/id_nav_btshequandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:layout_weight1android:backgroundcolor/transparentandroid:buttonnullandroid:clickabletrueandroid:drawablePadding2dpandroid:drawableTopdrawable/x_nav_menu_sqandroid:gravitycenterandroid:onClickswitchViewandroid:text社区android:textColordrawable/x_nav_menu_colorandroid:textSize10sp/RadioButtonandroid:idid/id_nav_btwodeandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_gravitycenterandroid:layout_weight1android:backgroundcolor/transparentandroid:buttonnullandroid:clickabletrueandroid:drawablePadding2dpandroid:drawableTopdrawable/x_nav_menu_wdandroid:gravitycenterandroid:onClickswitchViewandroid:text我的android:textColordrawable/x_nav_menu_colorandroid:textSize10sp//RadioGroup/LinearLayout/RelativeLayout编写selector 用来设置点击后的背景变化x_nav_menu_fs.xmlx_nav_menu_gw.xmlx_nav_menu_sq.xmlx_nav_menu_sy.xmlx_nav_menu_wd.xml例如x_nav_menu_sy.xml文件的书写为?xml version1.0encodingutf-8?selector xmlns:androidhttp://schemas.android.com/apk/res/androiditem android:drawablemipmap/tabitem_0android:state_checkedtrue/itemitem android:drawablemipmap/tabitem0/item/selector编写文字点击后颜色的变化drawable:x_nav_menu_color.xml?xml version1.0encodingUTF-8?selector xmlns:androidhttp://schemas.android.com/apk/res/androiditem android:color#CF75E9android:state_checkedtrue/itemitem android:color#989898/item/selector编写底部菜单栏背景的drawablebt_tag_bg.xml:?xml version1.0encodingutf-8?shape xmlns:androidhttp://schemas.android.com/apk/res/androidsolid android:color#FFFFFF//shape按照上述方式的就完成了底部菜单栏的布局方式同时在布局的时候我们为每个RadioButton设置了点击监听器监听方法是switchView(View view)。二、布局的代码实现创建五个fragment,分别对应每个按钮的界面Fragment的代码非常简单例如下面一个Fragmentpackagecom.garvey.modules;importandroid.os.Bundle;importandroid.support.v4.app.Fragment;importandroid.view.LayoutInflater;importandroid.view.View;importandroid.view.ViewGroup;importcom.garvey.babyshop.R;/** * 作者 Garvey on 2016/6/13. * 邮箱 lianjiawei18163.com */publicclassShouYeFragmentextendsFragment{// 缓存Fragment viewprivateView rootView;privatestaticShouYeFragment shouYeFragment;publicShouYeFragment(){}publicstaticShouYeFragmentgetNewInstance(){if(shouYeFragmentnull){shouYeFragmentnewShouYeFragment();}returnshouYeFragment;}OverridepublicvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);}OverridepublicViewonCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){if(rootViewnull){rootViewinflater.inflate(R.layout.fragment_shouye,container,false);}// 缓存的rootView需要判断是否已经被加过parent// 如果有parent需要从parent删除要不然会发生这个rootview已经有parent的错误。ViewGroup parent(ViewGroup)rootView.getParent();if(parent!null){parent.removeView(rootView);}returnrootView;}OverridepublicvoidonResume(){super.onResume();}}然后编写MainActivity的代码首先确立界面对应的索引publicstaticfinal intVIEW_SHOUYE_INDEX0;publicstaticfinal intVIEW_GOUWU_INDEX1;publicstaticfinal intVIEW_FENGSHANG_INDEX2;publicstaticfinal intVIEW_SHEQU_INDEX3;publicstaticfinal intVIEW_WODE_INDEX4;privateint temp_position_index-1;然后书写对应的switchView(View view )方法来实现对应的界面切换publicvoidswitchView(View view){switch(view.getId()){caseR.id.id_nav_btshouye:if(temp_position_index!VIEW_SHOUYE_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,syFragemnt);mTransaction.commit();}temp_position_indexVIEW_SHOUYE_INDEX;break;caseR.id.id_nav_btgouwu:if(temp_position_index!VIEW_GOUWU_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,gwFragment);mTransaction.commit();}temp_position_indexVIEW_GOUWU_INDEX;break;caseR.id.id_nav_btfengshang:if(temp_position_index!VIEW_FENGSHANG_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,fsFragment);mTransaction.commit();}temp_position_indexVIEW_FENGSHANG_INDEX;break;caseR.id.id_nav_btshequ:if(temp_position_index!VIEW_SHEQU_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,sqFragment);mTransaction.commit();}temp_position_indexVIEW_SHEQU_INDEX;break;caseR.id.id_nav_btwode:if(temp_position_index!VIEW_WODE_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,wdFragment);mTransaction.commit();}temp_position_indexVIEW_WODE_INDEX;break;}}MainActivity的总代码如下packagecom.garvey.activitys;importandroid.os.Bundle;importandroid.support.v4.app.Fragment;importandroid.support.v4.app.FragmentTransaction;importandroid.support.v7.app.AppCompatActivity;importandroid.view.View;importandroid.widget.RadioGroup;importcom.garvey.babyshop.R;importcom.garvey.modules.FengShangFragment;importcom.garvey.modules.GouWuFragment;importcom.garvey.modules.SheQuFragment;importcom.garvey.modules.ShouYeFragment;importcom.garvey.modules.WoDeFragment;publicclassMainActivityextendsAppCompatActivity{/** * 底部导航栏的widdget */privateRadioGroup mNavGroup;privateFragmentTransaction mTransaction;/** * 五个Fragments */Fragment syFragemnt,gwFragment,fsFragment,sqFragment,wdFragment;publicstaticfinal intVIEW_SHOUYE_INDEX0;publicstaticfinal intVIEW_GOUWU_INDEX1;publicstaticfinal intVIEW_FENGSHANG_INDEX2;publicstaticfinal intVIEW_SHEQU_INDEX3;publicstaticfinal intVIEW_WODE_INDEX4;privateint temp_position_index-1;OverrideprotectedvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}privatevoidinitView(){mNavGroup(RadioGroup)findViewById(R.id.id_navcontent);syFragemntShouYeFragment.getNewInstance();gwFragmentGouWuFragment.getNewInstance();fsFragmentFengShangFragment.getNewInstance();sqFragmentSheQuFragment.getNewInstance();wdFragmentWoDeFragment.getNewInstance();//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,syFragemnt);mTransaction.commit();}publicvoidswitchView(View view){switch(view.getId()){caseR.id.id_nav_btshouye:if(temp_position_index!VIEW_SHOUYE_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,syFragemnt);mTransaction.commit();}temp_position_indexVIEW_SHOUYE_INDEX;break;caseR.id.id_nav_btgouwu:if(temp_position_index!VIEW_GOUWU_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,gwFragment);mTransaction.commit();}temp_position_indexVIEW_GOUWU_INDEX;break;caseR.id.id_nav_btfengshang:if(temp_position_index!VIEW_FENGSHANG_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,fsFragment);mTransaction.commit();}temp_position_indexVIEW_FENGSHANG_INDEX;break;caseR.id.id_nav_btshequ:if(temp_position_index!VIEW_SHEQU_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,sqFragment);mTransaction.commit();}temp_position_indexVIEW_SHEQU_INDEX;break;caseR.id.id_nav_btwode:if(temp_position_index!VIEW_WODE_INDEX){//显示mTransactiongetSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,wdFragment);mTransaction.commit();}temp_position_indexVIEW_WODE_INDEX;break;}}}源码下载以上就是这篇文章的全部内容了希望本文的内容对大家的学习或者工作具有一定的参考学习价值如果有疑问大家可以留言交流谢谢大家对ZaLou.Cn的支持。更多Android进阶指南 可以扫码 解锁《Android十大板块文档》1.Android车载应用开发系统学习指南附项目实战2.Android Framework学习指南助力成为系统级开发高手3.2024最新Android中高级面试题汇总解析告别零offer4.企业级Android音视频开发学习路线项目实战附源码5.Android Jetpack从入门到精通构建高质量UI界面6.Flutter技术解析与实战跨平台首要之选7.Kotlin从入门到实战全方面提升架构基础8.高级Android插件化与组件化含实战教程和源码9.Android 性能优化实战360°全方面性能调优10.Android零基础入门到精通高手进阶之路敲代码不易关注一下吧。ღ( ´ᴗ )