¶前言
在做移动开发过程中底部导航栏是十分常见的功能,且市面上见到的做法也有很多种,这篇博文记录一下使用Fragment实现底部导航栏的功能,算是对这几天学习Android做的Demo的一个总结吧。
好久不敲代码,确实生疏不少。现在发现使用博客记录自己平时的学习资料,节省了很多搜集资料的时间,是一个很好的学习方法。
¶说明
1: IDE:AS,Android studio;
2: 模拟器:genymotion;
3: 实现的效果,见下图。
¶具体实现
为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] 。看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 0。
¶布局
通过观察上述效果图,发现任意一个选项页面都有三部分组成:
1: 顶部去除ActionBar后的标题栏;
2: 中间一个FragmentLayout用来放相应的Fragment;
3: 底部一个大的LinearLayout放着四个样式一样的(ImagView + TextView)的小Item。
(1) 完整具体的代码,详见:show_main_lay.xml
,通过注释可以看到该布局的三部分组成。
1 | <?xml version="1.0" encoding="utf-8"?> |
附上源码截图吧:
(2) 对于布局的第一部分的顶部标题栏,代码请见:title_layout.xml
:
1 | <?xml version="1.0" encoding="utf-8"?> |
见下截图:
(3) 布局中间的第二部分我们再分别建立4个.xml布局文件,分别命名为:fg1.xml、fg2.xml、fg3.xml、fg4.xml
,内容上只更改一下TextView中的文字说明,如第一个页面,改为第二个页面。下面只给出其中一个fg1.xml
:
1 | <?xml version="1.0" encoding="utf-8"?> |
如图:
(4) 这里也给出Values
目录下的colors.xml
内容吧,颜色还是比较完整的但是名字不好记:
1 | <?xml version="1.0" encoding="utf-8"?> |
如图:
那么到这里我们的界面布局就基本完成了!
¶相应Fragment的实现类
接下来我们需要写四个相应的Fragment
的实现类,同样拷贝4份,改用inflate
加载Fragment即可。即,包含四个差不多一样的Fragment,分别起名为:FirstFragment.java、SecondFragment.java、ThirdFragment.java、FourthFragment.java
。
下面主要展示一下FirstFragment.java
的具体代码:
1 | package com.example.dm.myapplication; |
如图:
¶最重要的MainActivity
各个七零八落的小部件都已经准备到序了,现在只剩下这个主界面实现类把他们融合在一起,实现相应的效果了。MainActivity.java 的编写也很简单,直接看代码和注释就可以了,不多解释额:主要包含几个初始化方法、选中处理、隐藏所有Fragment的方法。详见MainActivity.java:
1 | package com.example.dm.myapplication; |
见图:
到这里我们的功能就基本实现了,是不是还挺简单的。
¶注意
Fragment相关类导入的时候是v4包还是app包!我们这里导入的是V4的包,在代码的注释部分,已经给出说明;
在完整的代码包中,我们还添加了App启动界面及动画、登录界面,这两部分的内容,这里不做具体的说明,之后继续完善。
¶参考资料
(1) http://www.android100.org/html/201502/16/119643.html
(2) http://blog.sina.com.cn/s/blog_4e1e357d0101b3di.html