企业官网建设流程全解析

Android使用RadioGroup 实现底部导航菜单栏。

一、主界面布局的实现：

先来张效果图：

介绍一下总体界面包括的内容：底部五个导航按钮，主界面包括一个FrameLayout用来放五个Fragment。点击底部按钮会对应跳转到指定的界面。

实现布局：activity_main.xml

<?xml version="1.0"encoding="utf-8"?<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.garvey.activitys.MainActivity"<FrameLayoutandroid:id="@+id/id_fragment_content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@+id/id_diverline"</FrameLayout<Viewandroid:id="@+id/id_diverline"android:layout_above="@+id/id_bottom_tags"android:layout_width="match_parent"android:layout_height="0.1dp"android:background="#C2C5CE"/<LinearLayoutandroid:id="@+id/id_bottom_tags"android:layout_width="match_parent"android:layout_height="55dp"android:layout_alignParentBottom="true"android:background="@drawable/bt_tag_bg"android:orientation="horizontal"<RadioGroupandroid:id="@+id/id_navcontent"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:background="@color/transparent"android:gravity="center"android:orientation="horizontal"<RadioButtonandroid:id="@+id/id_nav_btshouye"android:layout_width="0dp"android:checked="true"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:background="@color/transparent"android:button="@null"android:clickable="true"android:drawablePadding="2dp"android:drawableTop="@drawable/x_nav_menu_sy"android:gravity="center"android:onClick="switchView"android:text="首页"android:textColor="@drawable/x_nav_menu_color"android:textSize="10sp"/<RadioButtonandroid:id="@+id/id_nav_btgouwu"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:background="@color/transparent"android:button="@null"android:clickable="true"android:drawablePadding="2dp"android:drawableTop="@drawable/x_nav_menu_gw"android:gravity="center"android:onClick="switchView"android:text="购物"android:textColor="@drawable/x_nav_menu_color"android:textSize="10sp"/<RadioButtonandroid:id="@+id/id_nav_btfengshang"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:background="@color/transparent"android:button="@null"android:clickable="true"android:drawablePadding="2dp"android:drawableTop="@drawable/x_nav_menu_fs"android:gravity="center"android:onClick="switchView"android:text="风尚"android:textColor="@drawable/x_nav_menu_color"android:textSize="10sp"/<RadioButtonandroid:id="@+id/id_nav_btshequ"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:background="@color/transparent"android:button="@null"android:clickable="true"android:drawablePadding="2dp"android:drawableTop="@drawable/x_nav_menu_sq"android:gravity="center"android:onClick="switchView"android:text="社区"android:textColor="@drawable/x_nav_menu_color"android:textSize="10sp"/<RadioButtonandroid:id="@+id/id_nav_btwode"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_weight="1"android:background="@color/transparent"android:button="@null"android:clickable="true"android:drawablePadding="2dp"android:drawableTop="@drawable/x_nav_menu_wd"android:gravity="center"android:onClick="switchView"android:text="我的"android:textColor="@drawable/x_nav_menu_color"android:textSize="10sp"/</RadioGroup</LinearLayout</RelativeLayout

编写selector 用来设置点击后的背景变化：

x_nav_menu_fs.xml，x_nav_menu_gw.xml，x_nav_menu_sq.xml，x_nav_menu_sy.xml，x_nav_menu_wd.xml

例如x_nav_menu_sy.xml文件的书写为：

<?xml version="1.0"encoding="utf-8"?<selector xmlns:android="http://schemas.android.com/apk/res/android"<item android:drawable="@mipmap/tabitem_0"android:state_checked="true"</item<item android:drawable="@mipmap/tabitem0"</item</selector

编写文字点击后颜色的变化drawable:x_nav_menu_color.xml

<?xml version="1.0"encoding="UTF-8"?<selector xmlns:android="http://schemas.android.com/apk/res/android"<item android:color="#CF75E9"android:state_checked="true"</item<item android:color="#989898"</item</selector

编写底部菜单栏背景的drawablebt_tag_bg.xml:

<?xml version="1.0"encoding="utf-8"?<shape xmlns:android="http://schemas.android.com/apk/res/android"<solid android:color="#FFFFFF"/</shape

按照上述方式的就完成了底部菜单栏的布局方式，同时在布局的时候我们为每个RadioButton设置了点击监听器，监听方法是：switchView(View view)。

二、布局的代码实现

创建五个fragment,分别对应每个按钮的界面，Fragment的代码非常简单，例如下面一个Fragment：

packagecom.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. * 邮箱： lianjiawei18@163.com */publicclassShouYeFragmentextendsFragment{// 缓存Fragment viewprivateView rootView;privatestaticShouYeFragment shouYeFragment;publicShouYeFragment(){}publicstaticShouYeFragmentgetNewInstance(){if(shouYeFragment==null){shouYeFragment=newShouYeFragment();}returnshouYeFragment;}@OverridepublicvoidonCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);}@OverridepublicViewonCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){if(rootView==null){rootView=inflater.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_INDEX=0;publicstaticfinal intVIEW_GOUWU_INDEX=1;publicstaticfinal intVIEW_FENGSHANG_INDEX=2;publicstaticfinal intVIEW_SHEQU_INDEX=3;publicstaticfinal intVIEW_WODE_INDEX=4;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){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,syFragemnt);mTransaction.commit();}temp_position_index=VIEW_SHOUYE_INDEX;break;caseR.id.id_nav_btgouwu:if(temp_position_index!=VIEW_GOUWU_INDEX){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,gwFragment);mTransaction.commit();}temp_position_index=VIEW_GOUWU_INDEX;break;caseR.id.id_nav_btfengshang:if(temp_position_index!=VIEW_FENGSHANG_INDEX){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,fsFragment);mTransaction.commit();}temp_position_index=VIEW_FENGSHANG_INDEX;break;caseR.id.id_nav_btshequ:if(temp_position_index!=VIEW_SHEQU_INDEX){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,sqFragment);mTransaction.commit();}temp_position_index=VIEW_SHEQU_INDEX;break;caseR.id.id_nav_btwode:if(temp_position_index!=VIEW_WODE_INDEX){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,wdFragment);mTransaction.commit();}temp_position_index=VIEW_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_INDEX=0;publicstaticfinal intVIEW_GOUWU_INDEX=1;publicstaticfinal intVIEW_FENGSHANG_INDEX=2;publicstaticfinal intVIEW_SHEQU_INDEX=3;publicstaticfinal intVIEW_WODE_INDEX=4;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);syFragemnt=ShouYeFragment.getNewInstance();gwFragment=GouWuFragment.getNewInstance();fsFragment=FengShangFragment.getNewInstance();sqFragment=SheQuFragment.getNewInstance();wdFragment=WoDeFragment.getNewInstance();//显示mTransaction=getSupportFragmentManager().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){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,syFragemnt);mTransaction.commit();}temp_position_index=VIEW_SHOUYE_INDEX;break;caseR.id.id_nav_btgouwu:if(temp_position_index!=VIEW_GOUWU_INDEX){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,gwFragment);mTransaction.commit();}temp_position_index=VIEW_GOUWU_INDEX;break;caseR.id.id_nav_btfengshang:if(temp_position_index!=VIEW_FENGSHANG_INDEX){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,fsFragment);mTransaction.commit();}temp_position_index=VIEW_FENGSHANG_INDEX;break;caseR.id.id_nav_btshequ:if(temp_position_index!=VIEW_SHEQU_INDEX){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,sqFragment);mTransaction.commit();}temp_position_index=VIEW_SHEQU_INDEX;break;caseR.id.id_nav_btwode:if(temp_position_index!=VIEW_WODE_INDEX){//显示mTransaction=getSupportFragmentManager().beginTransaction();mTransaction.replace(R.id.id_fragment_content,wdFragment);mTransaction.commit();}temp_position_index=VIEW_WODE_INDEX;break;}}}

源码下载

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对ZaLou.Cn的支持。

更多Android进阶指南 可以扫码 解锁《Android十大板块文档》

1.Android车载应用开发系统学习指南（附项目实战）

2.Android Framework学习指南，助力成为系统级开发高手

3.2024最新Android中高级面试题汇总+解析，告别零offer

4.企业级Android音视频开发学习路线+项目实战（附源码）

5.Android Jetpack从入门到精通，构建高质量UI界面

6.Flutter技术解析与实战，跨平台首要之选

7.Kotlin从入门到实战，全方面提升架构基础

8.高级Android插件化与组件化（含实战教程和源码）

9.Android 性能优化实战+360°全方面性能调优

10.Android零基础入门到精通，高手进阶之路

敲代码不易，关注一下吧。ღ( ´･ᴗ･` ) 🤔