Android程序开发之Fragment实现底部导航栏实例代码

流行的应用的导航一般分为两种，一种是底部导航，一种是侧边栏。本文给大家介绍Fragment实现底部导航栏，对Fragment实现底部导航栏相关知识感兴趣的朋友一起学习吧  

流行的应用的导航一般分为两种，一种是底部导航，一种是侧边栏。

说明

IDE：AS，Android studio;
模拟器：genymotion;

实现的效果，见下图。

具体实现

为了讲明白这个实现过程，我们贴出来的代码多一写，这样更方便理解 [最后还会放出完整的代码实现] 。看上图的界面做的比较粗糙，但实现过程的骨架都具有了，想要更完美的设计，之后自行完善吧 ^0^。

布局

通过观察上述效果图，发现任意一个选项页面都有三部分组成：

顶部去除ActionBar后的标题栏；

中间一个FragmentLayout用来放相应的Fragment；

底部一个大的LinearLayout放着四个样式一样的（ImagView + TextView）的小Item。

(1) 完整具体的代码，详见：show_main_lay.xml，通过注释可以看到该布局的三部分组成。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://www.easck.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="vertical">
<!--1. 顶部标题栏-->
<include
android:id="@+id/show_main_title"
layout="@layout/title_layout" />
<!--2. 存放四个Fragment-->
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/whitesmoke"></FrameLayout>
<!--3. 底部的四个选项菜单-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#FFFFFF">
<!--四个部分都一样：ImageView + TextView-->
<RelativeLayout
android:id="@+id/first_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/first_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_compass" />
<TextView
android:id="@+id/first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="消息"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/second_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/second_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_agenda" />
<TextView
android:id="@+id/second_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="发现"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/third_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/third_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_edit" />
<TextView
android:id="@+id/third_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="记录"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/fourth_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical">
<ImageView
android:id="@+id/fourth_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@android:drawable/ic_menu_myplaces" />
<TextView
android:id="@+id/fourth_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="我的"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>								 
 1/5    1 2 3 4 5 下一页 尾页