欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-02-26 17:15:16
流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏。 说明 ide:as,android studio; 模拟器:genymotion; 实现的效果,见下图...

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

说明

ide:as,android studio;
模拟器:genymotion;

实现的效果,见下图。

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

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

具体实现

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

布局

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

顶部去除actionbar后的标题栏;

中间一个fragmentlayout用来放相应的fragment;

底部一个大的linearlayout放着四个样式一样的(imagview + textview)的小item。

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

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.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>

附上源码截图吧:

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

(2) 对于布局的第一部分的顶部标题栏,代码请见:title_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="@color/colorprimarydark"
android:orientation="horizontal">
<imageview
android:id="@+id/title_imv"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centervertical="true"
android:layout_marginleft="10dp"
android:src="@android:drawable/ic_menu_more" />
<textview
android:id="@+id/title_text_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerinparent="true"
android:text="首 页"
android:textsize="20sp"
android:textcolor="@color/bg_color"/>
</relativelayout>

见下截图:

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

(3) 布局中间的第二部分我们再分别建立4个.xml布局文件,分别命名为:fg1.xml、fg2.xml、fg3.xml、fg4.xml,内容上只更改一下textview中的文字说明,如第一个页面,改为第二个页面。下面只给出其中一个fg1.xml:

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/aquamarine"
android:orientation="vertical">
<textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二个页面"
android:textsize="22sp"/>
</linearlayout>

如图:

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

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

(4) 这里也给出values目录下的colors.xml内容吧,颜色还是比较完整的但是名字不好记:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorprimary">#3f51b5</color>
<color name="colorprimarydark">#303f9f</color>
<color name="coloraccent">#ff4081</color>
<color name="bg_color">#ededed</color>
<color name="contents_text">#ff000000</color>
<color name="encode_view">#ffffffff</color>
<color name="help_button_view">#ffcccccc</color>
<color name="help_view">#ff404040</color>
<color name="possible_result_points">#c0ffff00</color>
<color name="result_image_border">#ffffffff</color>
<color name="result_minor_text">#ffc0c0c0</color>
<color name="result_points">#c000ff00</color>
<color name="result_text">#ffffffff</color>
<color name="result_view">#b0000000</color>
<color name="sbc_header_text">#ff808080</color>
<color name="sbc_header_view">#ffffffff</color>
<color name="sbc_list_item">#fffff0e0</color>
<color name="sbc_layout_view">#ffffffff</color>
<color name="sbc_page_number_text">#ff000000</color>
<color name="sbc_snippet_text">#ff4b4b4b</color>
<color name="share_text">#ff000000</color>
<color name="share_view">#ffffffff</color>
<color name="status_view">#50000000</color>
<color name="status_text">#ffffffff</color>
<color name="transparent">#00000000</color>
<color name="viewfinder_frame">#ffffffff</color>
<color name="viewfinder_laser">#ffff0000</color>
<color name="viewfinder_mask">#60000000</color>
<color name="header">#58567d</color>
<color name="grgray">#686868</color>
<color name="white">#ffffff</color>
<!--白色 -->
<color name="ivory">#fffff0</color>
<!--象牙色 -->
<color name="lightyellow">#ffffe0</color>
<!--亮黄色 -->
<color name="yellow">#ffff00</color>
<!--黄色 -->
<color name="snow">#fffafa</color>
<!--雪白色 -->
<color name="floralwhite">#fffaf0</color>
<!--花白色 -->
<color name="lemonchiffon">#fffacd</color>
<!--柠檬绸色 -->
<color name="cornsilk">#fff8dc</color>
<!--米绸色 -->
<color name="seashell">#fff5ee</color>
<!--海贝色 -->
<color name="lavenderblush">#fff0f5</color>
<!--淡紫红 -->
<color name="papayawhip">#ffefd5</color>
<!--番木色 -->
<color name="blanchedalmond">#ffebcd</color>
<!--白杏色 -->
<color name="mistyrose">#ffe4e1</color>
<!--浅玫瑰色 -->
<color name="bisque">#ffe4c4</color>
<!--桔黄色 -->
<color name="moccasin">#ffe4b5</color>
<!--鹿皮色 -->
<color name="navajowhite">#ffdead</color>
<!--纳瓦白 -->
<color name="peachpuff">#ffdab9</color>
<!--桃色 -->
<color name="gold">#ffd700</color>
<!--金色 -->
<color name="pink">#ffc0cb</color>
<!--粉红色 -->
<color name="lightpink">#ffb6c1</color>
<!--亮粉红色 -->
<color name="orange">#ffa500</color>
<!--橙色 -->
<color name="lightsalmon">#ffa07a</color>
<!--亮肉色 -->
<color name="darkorange">#ff8c00</color>
<!--暗桔黄色 -->
<color name="coral">#ff7f50</color>
<!--珊瑚色 -->
<color name="hotpink">#ff69b4</color>
<!--热粉红色 -->
<color name="tomato">#ff6347</color>
<!--西红柿色 -->
<color name="orangered">#ff4500</color>
<!--红橙色 -->
<color name="deeppink">#ff1493</color>
<!--深粉红色 -->
<color name="fuchsia">#ff00ff</color>
<!--紫红色 -->
<color name="magenta">#ff00ff</color>
<!--红紫色 -->
<color name="red">#ff0000</color>
<!--红色 -->
<color name="oldlace">#fdf5e6</color>
<!--老花色 -->
<color name="lightgoldenyellow">#fafad2</color>
<!--亮金黄色 -->
<color name="linen">#faf0e6</color>
<!--亚麻色 -->
<color name="antiquewhite">#faebd7</color>
<!--古董白 -->
<color name="salmon">#fa8072</color>
<!--鲜肉色 -->
<color name="ghostwhite">#f8f8ff</color>
<!--幽灵白 -->
<color name="mintcream">#f5fffa</color>
<!--薄荷色 -->
<color name="whitesmoke">#f5f5f5</color>
<!--烟白色 -->
<color name="beige">#f5f5dc</color>
<!--米色 -->
<color name="wheat">#f5deb3</color>
<!--浅黄色 -->
<color name="sandybrown">#f4a460</color>
<!--沙褐色 -->
<color name="azure">#f0ffff</color>
<!--天蓝色 -->
<color name="honeydew">#f0fff0</color>
<!--蜜色 -->
<color name="aliceblue">#f0f8ff</color>
<!--艾利斯兰 -->
<color name="khaki">#f0e68c</color>
<!--黄褐色 -->
<color name="lightcoral">#f08080</color>
<!--亮珊瑚色 -->
<color name="palegoldenrod">#eee8aa</color>
<!--苍麒麟色 -->
<color name="violet">#ee82ee</color>
<!--紫罗兰色 -->
<color name="darksalmon">#e9967a</color>
<!--暗肉色 -->
<color name="lavender">#e6e6fa</color>
<!--淡紫色 -->
<color name="lightcyan">#e0ffff</color>
<!--亮青色 -->
<color name="burlywood">#deb887</color>
<!--实木色 -->
<color name="plum">#dda0dd</color>
<!--洋李色 -->
<color name="gainsboro">#dcdcdc</color>
<!--淡灰色 -->
<color name="crimson">#dc143c</color>
<!--暗深红色 -->
<color name="palevioletred">#db7093</color>
<!--苍紫罗兰色-->
<color name="goldenrod">#daa520</color>
<!--金麒麟色 -->
<color name="orchid">#da70d6</color>
<!--淡紫色 -->
<color name="thistle">#d8bfd8</color>
<!--蓟色 -->
<color name="lightgray">#d3d3d3</color>
<!--亮灰色 -->
<color name="lightgrey">#d3d3d3</color>
<!--亮灰色 -->
<color name="tan">#d2b48c</color>
<!--茶色 -->
<color name="chocolate">#d2691e</color>
<!--巧可力色 -->
<color name="peru">#cd853f</color>
<!--秘鲁色 -->
<color name="indianred">#cd5c5c</color>
<!--印第安红 -->
<color name="mediumvioletred">#c71585</color>
<!--中紫罗兰色 -->
<color name="silver">#c0c0c0</color>
<!--银色 -->
<color name="darkkhaki">#bdb76b</color>
<!-- 暗黄褐色 -->
<color name="rosybrown">#bc8f8f</color>
<!--褐玫瑰红-->
<color name="mediumorchid">#ba55d3</color>
<!--中粉紫色 -->
<color name="darkgoldenrod">#b8860b</color>
<!--暗金黄色 -->
<color name="firebrick">#b22222</color>
<!--火砖色 -->
<color name="powderblue">#b0e0e6</color>
<!--粉蓝色 -->
<color name="lightsteelblue">#b0c4de</color>
<!--亮钢兰色 -->
<color name="paleturquoise">#afeeee</color>
<!--苍宝石绿 -->
<color name="greenyellow">#adff2f</color>
<!--黄绿色 -->
<color name="lightblue">#add8e6</color>
<!--亮蓝色 -->
<color name="darkgray">#a9a9a9</color>
<!--暗灰色 -->
<color name="darkgrey">#a9a9a9</color>
<!--暗灰色 -->
<color name="brown">#a52a2a</color>
<!--褐色 -->
<color name="sienna">#a0522d</color>
<!--赭色 -->
<color name="darkorchid">#9932cc</color>
<!--暗紫色 -->
<color name="palegreen">#98fb98</color>
<!--苍绿色 -->
<color name="darkviolet">#9400d3</color>
<!--暗紫罗兰色 -->
<color name="mediumpurple">#9370db</color>
<!--中紫色 -->
<color name="lightgreen">#90ee90</color>
<!--亮绿色 -->
<color name="darkseagreen">#8fbc8f</color>
<!--暗海兰色 -->
<color name="saddlebrown">#8b4513</color>
<!--重褐色 -->
<color name="darkmagenta">#8b008b</color>
<!--暗洋红 -->
<color name="darkred">#8b0000</color>
<!--暗红色 -->
<color name="blueviolet">#8a2be2</color>
<!--紫罗兰蓝色-->
<color name="lightskyblue">#87cefa</color>
<!--亮天蓝色-->
<color name="skyblue">#87ceeb</color>
<!--天蓝色 -->
<color name="gray">#808080</color>
<!--灰色 -->
<color name="grey">#808080</color>
<!--灰色 -->
<color name="olive">#808000</color>
<!--橄榄色 -->
<color name="purple">#800080</color>
<!--紫色 -->
<color name="maroon">#800000</color>
<!--粟色 -->
<color name="aquamarine">#7fffd4</color>
<!--碧绿色 -->
<color name="chartreuse">#7fff00</color>
<!--黄绿色 -->
<color name="lawngreen">#7cfc00</color>
<!--草绿色 -->
<color name="mediumslateblue">#7b68ee</color>
<!--中暗蓝色 -->
<color name="lightslategray">#778899</color>
<!--亮蓝灰 -->
<color name="lightslategrey">#778899</color>
<!--亮蓝灰 -->
<color name="slategray">#708090</color>
<!--灰石色 -->
<color name="slategrey">#708090</color>
<!--灰石色 -->
<color name="olivedrab">#6b8e23</color>
<!--深绿褐色 -->
<color name="slateblue">#6a5acd</color>
<!--石蓝色 -->
<color name="dimgray">#696969</color>
<!--暗灰色 -->
<color name="dimgrey">#696969</color>
<!--暗灰色 -->
<color name="mediumaquamarine">#66cdaa</color>
<!--中绿色-->
<color name="cornflowerblue">#6495ed</color>
<!--菊兰色 -->
<color name="cadetblue">#5f9ea0</color>
<!--军兰色 -->
<color name="darkolivegreen">#556b2f</color>
<!--暗橄榄绿 -->
<color name="indigo">#4b0082</color>
<!--靛青色 -->
<color name="mediumturquoise">#48d1cc</color>
<!--中绿宝石-->
<color name="darkslateblue">#483d8b</color>
<!--暗灰蓝色 -->
<color name="steelblue">#4682b4</color>
<!--钢兰色 -->
<color name="royalblue">#4169e1</color>
<!--皇家蓝 -->
<color name="turquoise">#40e0d0</color>
<!--青绿色 -->
<color name="mediumseagreen">#3cb371</color>
<!--中海蓝 -->
<color name="limegreen">#32cd32</color>
<!--橙绿色 -->
<color name="darkslategray">#2f4f4f</color>
<!--暗瓦灰色 -->
<color name="darkslategrey">#2f4f4f</color>
<!--暗瓦灰色 -->
<color name="seagreen">#2e8b57</color>
<!--海绿色 -->
<color name="forestgreen">#228b22</color>
<!--森林绿 -->
<color name="lightseagreen">#20b2aa</color>
<!--亮海蓝色 -->
<color name="dodgerblue">#1e90ff</color>
<!--闪兰色 -->
<color name="midnightblue">#191970</color>
<!--中灰兰色 -->
<color name="aqua">#00ffff</color>
<!--浅绿色 -->
<color name="cyan">#00ffff</color>
<!--青色 -->
<color name="springgreen">#00ff7f</color>
<!--春绿色 -->
<color name="lime">#00ff00</color>
<!--酸橙色 -->
<color name="mediumspringgreen">#00fa9a</color>
<!--中春绿色 -->
<color name="darkturquoise">#00ced1</color>
<!--暗宝石绿 -->
<color name="deepskyblue">#00bfff</color>
<!--深天蓝色 -->
<color name="darkcyan">#008b8b</color>
<!--暗青色 -->
<color name="teal">#008080</color>
<!--水鸭色 -->
<color name="green">#008000</color>
<!--绿色 -->
<color name="darkgreen">#006400</color>
<!--暗绿色 -->
<color name="blue">#0000ff</color>
<!--蓝色 -->
<color name="mediumblue">#0000cd</color>
<!--中兰色 -->
<color name="darkblue">#00008b</color>
<!--暗蓝色 -->
<color name="navy">#000080</color>
<!--海军色 -->
<color name="black">#000000</color>
<!--黑色 -->
</resources>

如图:

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

那么到这里我们的界面布局就基本完成了!

相应fragment的实现类

接下来我们需要写四个相应的fragment的实现类,同样拷贝4份,改用inflate加载fragment即可。即,包含四个差不多一样的fragment,分别起名为:firstfragment.java、secondfragment.java、thirdfragment.java、fourthfragment.java。下面主要展示一下firstfragment.java的具体代码:

package com.example.dm.myapplication;
import android.os.bundle;
import android.support.v4.app.fragment;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
/**
* created by dm on 16-3-29.
* 第一个页面
*/
public class firstfragment extends fragment {
@override
public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
view view = inflater.inflate(r.layout.fg1, container, false);
return view;
}
}

如图:

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

最重要的mainactivity

各个七零八落的小部件都已经准备到序了,现在只剩下这个主界面实现类把他们融合在一起,实现相应的效果了。

mainactivity.java 的编写也很简单,直接看代码和注释就可以了,不多解释额:主要包含几个初始化方法、选中处理、隐藏所有fragment的方法。详见mainactivity.java:

package com.example.dm.myapplication;
import android.content.intent;
import android.os.bundle;
import android.support.v4.app.fragmentactivity; // 注意这里我们导入的v4的包,不要导成app的包了
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmenttransaction;
import android.view.view;
import android.widget.framelayout;
import android.widget.imageview;
import android.widget.relativelayout;
import android.widget.textview;
/**
* 主页面内容
* created by dm on 16-1-19.
*/
public class mainactivity extends fragmentactivity implements view.onclicklistener {
// 初始化顶部栏显示
private imageview titleleftimv;
private textview titletv;
// 定义4个fragment对象
private firstfragment fg1;
private secondfragment fg2;
private thirdfragment fg3;
private fourthfragment fg4;
// 帧布局对象,用来存放fragment对象
private framelayout framelayout;
// 定义每个选项中的相关控件
private relativelayout firstlayout;
private relativelayout secondlayout;
private relativelayout thirdlayout;
private relativelayout fourthlayout;
private imageview firstimage;
private imageview secondimage;
private imageview thirdimage;
private imageview fourthimage;
private textview firsttext;
private textview secondtext;
private textview thirdtext;
private textview fourthtext;
// 定义几个颜色
private int whirt = 0xffffffff;
private int gray = 0xff7597b3;
private int dark = 0xff000000;
// 定义fragmentmanager对象管理器
private fragmentmanager fragmentmanager;
@override
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.show_main_lay);
fragmentmanager = getsupportfragmentmanager();
initview(); // 初始化界面控件
setchioceitem(0); // 初始化页面加载时显示第一个选项卡
}
/**
* 初始化页面
*/
private void initview() {
// 初始化页面标题栏
titleleftimv = (imageview) findviewbyid(r.id.title_imv);
titleleftimv.setonclicklistener(new view.onclicklistener() {
@override
public void onclick(view v) {
startactivity(new intent(mainactivity.this, loginactivity.class));
}
});
titletv = (textview) findviewbyid(r.id.title_text_tv);
titletv.settext("首 页");
// 初始化底部导航栏的控件
firstimage = (imageview) findviewbyid(r.id.first_image);
secondimage = (imageview) findviewbyid(r.id.second_image);
thirdimage = (imageview) findviewbyid(r.id.third_image);
fourthimage = (imageview) findviewbyid(r.id.fourth_image);
firsttext = (textview) findviewbyid(r.id.first_text);
secondtext = (textview) findviewbyid(r.id.second_text);
thirdtext = (textview) findviewbyid(r.id.third_text);
fourthtext = (textview) findviewbyid(r.id.fourth_text);
firstlayout = (relativelayout) findviewbyid(r.id.first_layout);
secondlayout = (relativelayout) findviewbyid(r.id.second_layout);
thirdlayout = (relativelayout) findviewbyid(r.id.third_layout);
fourthlayout = (relativelayout) findviewbyid(r.id.fourth_layout);
firstlayout.setonclicklistener(mainactivity.this);
secondlayout.setonclicklistener(mainactivity.this);
thirdlayout.setonclicklistener(mainactivity.this);
fourthlayout.setonclicklistener(mainactivity.this);
}
@override
public void onclick(view v) {
switch (v.getid()) {
case r.id.first_layout:
setchioceitem(0);
break;
case r.id.second_layout:
setchioceitem(1);
break;
case r.id.third_layout:
setchioceitem(2);
break;
case r.id.fourth_layout:
setchioceitem(3);
break;
default:
break;
}
}
/**
* 设置点击选项卡的事件处理
*
* @param index 选项卡的标号:0, 1, 2, 3
*/
private void setchioceitem(int index) {
fragmenttransaction fragmenttransaction = fragmentmanager.begintransaction();
clearchioce(); // 清空, 重置选项, 隐藏所有fragment
hidefragments(fragmenttransaction);
switch (index) {
case 0:
// firstimage.setimageresource(r.drawable.xxxx); 需要的话自行修改
firsttext.settextcolor(dark);
firstlayout.setbackgroundcolor(gray);
// 如果fg1为空,则创建一个并添加到界面上
if (fg1 == null) {
fg1 = new firstfragment();
fragmenttransaction.add(r.id.content, fg1);
} else {
// 如果不为空,则直接将它显示出来
fragmenttransaction.show(fg1);
}
break;
case 1:
// secondimage.setimageresource(r.drawable.xxxx);
secondtext.settextcolor(dark);
secondlayout.setbackgroundcolor(gray);
if (fg2 == null) {
fg2 = new secondfragment();
fragmenttransaction.add(r.id.content, fg2);
} else {
fragmenttransaction.show(fg2);
}
break;
case 2:
// thirdimage.setimageresource(r.drawable.xxxx);
thirdtext.settextcolor(dark);
thirdlayout.setbackgroundcolor(gray);
if (fg3 == null) {
fg3 = new thirdfragment();
fragmenttransaction.add(r.id.content, fg3);
} else {
fragmenttransaction.show(fg3);
}
break;
case 3:
// fourthimage.setimageresource(r.drawable.xxxx);
fourthtext.settextcolor(dark);
fourthlayout.setbackgroundcolor(gray);
if (fg4 == null) {
fg4 = new fourthfragment();
fragmenttransaction.add(r.id.content, fg4);
} else {
fragmenttransaction.show(fg4);
}
break;
}
fragmenttransaction.commit(); // 提交
}
/**
* 当选中其中一个选项卡时,其他选项卡重置为默认
*/
private void clearchioce() {
// firstimage.setimageresource(r.drawable.xxx);
firsttext.settextcolor(gray);
firstlayout.setbackgroundcolor(whirt);
// secondimage.setimageresource(r.drawable.xxx);
secondtext.settextcolor(gray);
secondlayout.setbackgroundcolor(whirt);
// thirdimage.setimageresource(r.drawable.xxx);
thirdtext.settextcolor(gray);
thirdlayout.setbackgroundcolor(whirt);
// fourthimage.setimageresource(r.drawable.xxx);
fourthtext.settextcolor(gray);
fourthlayout.setbackgroundcolor(whirt);
}
/**
* 隐藏fragment
*
* @param fragmenttransaction
*/
private void hidefragments(fragmenttransaction fragmenttransaction) {
if (fg1 != null) {
fragmenttransaction.hide(fg1);
}
if (fg2 != null) {
fragmenttransaction.hide(fg2);
}
if (fg3 != null) {
fragmenttransaction.hide(fg3);
}
if (fg4 != null) {
fragmenttransaction.hide(fg4);
}
}
}

见图:

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

到这里我们的功能就基本实现了,是不是还挺简单的。

注意

fragment相关类导入的时候是v4包还是app包!我们这里导入的是v4的包,在代码的注释部分,已经给出说明;

在完整的代码包中,我们还添加了app启动界面及动画、登录界面,这两部分的内容,这里不做具体的说明,之后继续完善。

以上内容是小逼给大家分享的android程序开发之fragment实现底部导航栏实例代码,希望对大家有所帮助!