人生必须的知识就是引人向光明方面的明灯。这篇文章主要讲述Android Android studio 底部导航栏的基本实现相关的知识,希望能为你提供帮助。
【爱迪的懂】本期来学一学一个底部导航栏的基本实现~
效果图:点击三个按钮任意一个,切换页面上文字。

文章图片
步骤:
1.准备
开始前需要准备导航栏底部的图片,以及点击后变换的图片,这里共6张。放在 drawable 下

文章图片
2.新建一个Activity

文章图片
,修改他对应的布局文件
FrameLayout: 相当于一个碎片的容器
1 < LinearLayout 2xmlns:android="http://schemas.android.com/apk/res/android" 3android:id="@+id/main_body_bar" 4android:orientation="vertical" 5android:layout_width="match_parent" 6android:layout_height="match_parent"> 7 8< include layout="@layout/bottom_title_bar"/> 9 10< RelativeLayout 11android:id="@+id/main_body" 12android:layout_width="match_parent" 13android:layout_height="match_parent"> 14 15< FrameLayout 16android:id="@+id/fl_container" 17android:layout_width="match_parent" 18android:layout_height="match_parent" 19android:layout_above="@+id/bottom_bar"/> 20 21< LinearLayout 22android:id="@+id/bottom_bar" 23android:layout_alignParentBottom="true" 24android:orientation="horizontal" 25android:background="#F2F2F8" 26android:layout_width="match_parent" 27android:layout_height="50dp"> 28< RelativeLayout 29android:id="@+id/bottom_bar_1_btn" 30android:layout_weight="1" 31android:layout_width="0dp" 32android:layout_height="match_parent"> 33< TextView 34android:id="@+id/bottom_bar_text_1" 35android:layout_width="match_parent" 36android:layout_height="wrap_content" 37android:layout_alignParentBottom="true" 38android:layout_centerHorizontal="true" 39android:layout_marginBottom="2dp" 40android:gravity="center" 41android:text="botton_1" 42android:textColor="#000000" 43android:textSize="14sp"/> 44< ImageView 45android:id="@+id/bottom_bar_image_1" 46android:layout_width="30dp" 47android:layout_height="30dp" 48android:layout_above="@+id/bottom_bar_text_1" 49android:layout_alignParentTop="true" 50android:layout_centerHorizontal="true" 51android:layout_marginTop="2dp" 52android:src="https://www.songbingjia.com/android/@drawable/main_button_1"/> 53< /RelativeLayout> 54 55< RelativeLayout 56android:id="@+id/bottom_bar_2_btn" 57android:layout_weight="1" 58android:layout_width="0dp" 59android:layout_height="match_parent"> 60< TextView 61android:id="@+id/bottom_bar_text_2" 62android:layout_width="match_parent" 63android:layout_height="wrap_content" 64android:layout_alignParentBottom="true" 65android:layout_centerHorizontal="true" 66android:layout_marginBottom="2dp" 67android:gravity="center" 68android:text="botton_1" 69android:textColor="#000000" 70android:textSize="14sp"/> 71< ImageView 72android:id="@+id/bottom_bar_image_2" 73android:layout_width="30dp" 74android:layout_height="30dp" 75android:layout_above="@+id/bottom_bar_text_2" 76android:layout_alignParentTop="true" 77android:layout_centerHorizontal="true" 78android:layout_marginTop="2dp" 79android:src="https://www.songbingjia.com/android/@drawable/main_button_2"/> 80< /RelativeLayout> 81< RelativeLayout 82android:id="@+id/bottom_bar_3_btn" 83android:layout_weight="1" 84android:layout_width="0dp" 85android:layout_height="match_parent"> 86< TextView 87android:id="@+id/bottom_bar_text_3" 88android:layout_width="match_parent" 89android:layout_height="wrap_content" 90android:layout_alignParentBottom="true" 91android:layout_centerHorizontal="true" 92android:layout_marginBottom="2dp" 93android:gravity="center" 94android:text="botton_1" 95android:textColor="#000000" 96android:textSize="14sp"/> 97< ImageView 98android:id="@+id/bottom_bar_image_3" 99android:layout_width="30dp" 100android:layout_height="30dp" 101android:layout_above="@+id/bottom_bar_text_3" 102android:layout_alignParentTop="true" 103android:layout_centerHorizontal="true" 104android:layout_marginTop="2dp" 105android:src="https://www.songbingjia.com/android/@drawable/main_button_3"/> 106< /RelativeLayout> 107< /LinearLayout>
3. 返回该活动中

文章图片
,初始化布局文件中的控件

文章图片

文章图片
4. 新建三个Fragment (这里后两个我复制的第一个),后面只针对一 个说明,其余效果相同

文章图片
5.打开其中一个布局文件,设置一个TextView (其余两个修改一下 text 就行)

文章图片
6.返回对应的 Activity 修改代码(其他两个对应修改成各自的)

文章图片
onCreateView()参考 : https://blog.csdn.net/weixin_44618862/article/details/98209943
onViewCreated()参考:https://www.jianshu.com/p/20b1f11b72b8
inflater.inflate()参数详解:https://blog.csdn.net/weixin_41213648/article/details/98453845
7. 再次打开

文章图片
,将三个 Fragment 创建

文章图片
8. 写一个底部导航栏状态的切换方法

文章图片
9. 实现底部导航栏的响应
添加监听方方式:通过当前类实现OnClickListener接口并在其必须实现的onClick方法中添加事件
【Android Android studio 底部导航栏的基本实现】

文章图片

文章图片
9.1 点击事件
这里我设置了一个 TAG,目的是:如果一直都是 ADD ,会造成 fragment 重叠的效果,所以 TAG判断是否为第一次点击,如果不是则执行 replace 方法

文章图片
getSupportFragmentManager().beginTransaction(): https://www.jianshu.com/p/5761ee2d3ea1
10. 总结
到这里就差不多可以运行啦~ 可实现点击按钮切换碎片容器内的内容啦~
学习期间也出现过许多困难,比如在寻找学习教程的时找了很久,说到这不得不感觉 B站的up主和博主们,B站也是一个神仙app,安利。
还有遇到的就是方法过时等一些问题,不过这都不是事,一点一点解决,加油,奥里给!

文章图片
我这里还添加了一个 title bar 道友们可以自行添加

文章图片
参考博客: https://cloud.tencent.com/developer/article/1455581
推荐阅读
- 介绍 brick: 用于快速开发 webapp 的自定义标签组件
- Android 给服务器发送网络请求
- Appium---Android的keycode键值
- Android 开发 VectorDrawable 矢量图 用一张矢量图实现按下改变颜色的效果
- Android 中加载本地Html 跨域问题,http协议允许加载
- 提交APP到三星应用市场一直提示不符合 Galaxy特色体验的类别条件
- Find if all numbers appear an even number of times
- 安卓到底是不是Linux
- 无法加载文件 C:UsersAdministratorAppDataRoamingpm sc.ps1,因为在此系统上禁止运行脚本