时间:2021-05-21
单Activity多Fragment实现底部导航器
最近由于Android基础知识讲解需要,采用单Activity多Fragment实现类似QQ底部导航器示例,这种开发模式广泛应用于App开发,比如QQ,微信,新浪等,关于Android底部导航栏的实现方式特别多,实现也是五花八门,同时Google在自己推出的Material design中也增加了Bottom Navigation导航控制,实现起来更加简单,且支持动态效果更加酷炫,但是因为是基础的知识,所以打算通过自定义来实现,不使用Bottom Navigation(如果是实际的项目开发可以考虑使用哈~~),希望对初学者有所帮助。
BottomNavigationBar 地址:https://github.com/Ashok-Varma/BottomNavigation
分析
整体区域分为两部分:底部的导航区域和其余的内容区域,内容区域使用Fragment最为UI展示,底部导航区域添加点击事件,点击TAB切换Fragment,并做字体颜色和图片的切换,在切换上使用add()和hide()的方式,不使用replase(),至于两者的区别,这里就不再说明了,感兴趣的话可以谷歌。
整体结构
底部导航通常由图片和文字组成,上面为ImageView,下面为TextView
底部导航
底部Bottom
使用布局使用RelativeLayout,添加weight,平分屏幕宽度
<?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="@dimen/bottom_height" android:background="@color/base_white" android:orientation="vertical"> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/gray_line" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <RelativeLayout android:id="@+id/layout_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"> <ImageView android:id="@+id/img_home" android:layout_width="24dp" android:layout_height="24dp" android:layout_centerHorizontal="true" android:src="@mipmap/icon_home_pressed" /> <TextView android:id="@+id/tv_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/img_home" android:layout_centerHorizontal="true" android:text="首页" android:textColor="@color/bottom_text_color_pressed" android:textSize="12sp" /> </RelativeLayout> </RelativeLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <RelativeLayout android:id="@+id/layout_health" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"> <ImageView android:id="@+id/img_health" android:layout_width="24dp" android:layout_height="24dp" android:layout_centerHorizontal="true" android:src="@mipmap/icon_health_normal" /> <TextView android:id="@+id/tv_health" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/img_health" android:layout_centerHorizontal="true" android:text="健康" android:textColor="@color/bottom_text_color_normal" android:textSize="12sp" /> </RelativeLayout> </RelativeLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <RelativeLayout android:id="@+id/layout_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"> <ImageView android:id="@+id/img_msg" android:layout_width="24dp" android:layout_height="24dp" android:layout_centerHorizontal="true" android:src="@mipmap/icon_msg_normal" /> <TextView android:id="@+id/tv_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/img_msg" android:layout_centerHorizontal="true" android:text="消息" android:textColor="@color/bottom_text_color_normal" android:textSize="12sp" /> </RelativeLayout> </RelativeLayout> > <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <RelativeLayout android:id="@+id/layout_usercenter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"> <ImageView android:id="@+id/img_usercenter" android:layout_width="24dp" android:layout_height="24dp" android:layout_centerHorizontal="true" android:src="@mipmap/icon_user_normal" /> <TextView android:id="@+id/tv_usercenter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/img_usercenter" android:layout_centerHorizontal="true" android:text="我的" android:textColor="@color/bottom_text_color_normal" android:textSize="12sp" /> </RelativeLayout> </RelativeLayout> > </LinearLayout></LinearLayout>activity_main.xml
MainActivity
四个Fragment只是一个简单的布局,里面放置了一个TextView,这里就不再贴出来O.o.
效果图预览:
效果图
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Android中Fragment与Activity通讯的详解与activity通讯尽管fragment的实现是独立于activity的,可以被用于多个activ
RadioGroup实现底部导航栏效果,如图::实现可最基本的导航栏功能,不能左右滑动,只能点击1.内嵌的fragment的布局:2.fragment的acti
底部导航栏,在我们App项目中是非常常用!而且实现它的方式很多,今天我们就来使用RadioButton+Fragment实现底部导航栏!下面就让我们动手吧,首先
FragmentAndroid是在Android3.0(APIlevel11)开始引入Fragment的。可以把Fragment想成Activity中的模块,这
Android使用FragmentTabhost代替Tabhost前言:现在Fragment使用越来越广了,虽然Fragment寄生在Activity下,但是它