单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.
效果图预览:
效果图
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!