Android Activity与Fragment实现底部导航器
程序员文章站
2024-03-03 22:06:22
单activity多fragment实现底部导航器
最近由于android基础知识讲解需要,采用单activity多fragment实现类似qq底部导航器示例,这种开发模...
单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
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <framelayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:id="@+id/frame_content" /> <include layout="@layout/layout_bottom"/> </linearlayout>
mainactivity
public class mainactivity extends baseactivity implements view.onclicklistener { private relativelayout layout_home; private relativelayout layout_health; private relativelayout layout_msg; private relativelayout layout_usercenter; private imageview img_home; private imageview img_health; private imageview img_msg; private imageview img_usercenter; private textview tv_home; private textview tv_health; private textview tv_msg; private textview tv_usercenter; private fragment[] fragments; private int currentindex; private int index; private int selectcolor; private int unselectcolor; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); init(); } @override public void init() { initviews(); initevent(); initdata(); } public void initviews(){ layout_health=(relativelayout)findviewbyid(r.id.layout_health); layout_home=(relativelayout)findviewbyid(r.id.layout_home); layout_msg=(relativelayout)findviewbyid(r.id.layout_msg); layout_usercenter=(relativelayout)findviewbyid(r.id.layout_usercenter); img_home=(imageview)findviewbyid(r.id.img_home); img_health=(imageview)findviewbyid(r.id.img_health); img_msg=(imageview)findviewbyid(r.id.img_msg); img_usercenter=(imageview)findviewbyid(r.id.img_usercenter); tv_home=(textview)findviewbyid(r.id.tv_home); tv_health=(textview)findviewbyid(r.id.tv_health); tv_msg=(textview)findviewbyid(r.id.tv_msg); tv_usercenter=(textview)findviewbyid(r.id.tv_usercenter); } public void initevent(){ layout_home.setonclicklistener(this); layout_health.setonclicklistener(this); layout_msg.setonclicklistener(this); layout_usercenter.setonclicklistener(this); } public void initdata(){ selectcolor=getresources().getcolor(r.color.bottom_text_color_pressed); unselectcolor=getresources().getcolor(r.color.bottom_text_color_normal); fragments=new fragment[4]; fragments[0]= homefragment.getinstance(); fragments[1]= healthfragment.getinstance(); fragments[2]= msgfragment.getinstance(); fragments[3]= usercenterfragment.getinstance(); getsupportfragmentmanager().begintransaction().add(r.id.frame_content,fragments[0]).commit(); } @override public void onclick(view view) { switch (view.getid()){ case r.id.layout_home: index=0; settabs(index); break; case r.id.layout_health: index=1; settabs(index); break; case r.id.layout_msg: index=2; settabs(index); break; case r.id.layout_usercenter: index=3; settabs(index); break; } if(currentindex!=index){ fragmentmanager fm=getsupportfragmentmanager(); fragmenttransaction ft=fm.begintransaction(); ft.hide(fragments[currentindex]); if(!fragments[index].isadded()){ ft.add(r.id.frame_content,fragments[index]); } ft.show(fragments[index]).commit(); } currentindex=index; } public void settabs(int pos){ resetcolor(); switch (pos){ case 0: img_home.setimageresource(r.mipmap.icon_home_pressed); tv_home.settextcolor(selectcolor); break; case 1: img_health.setimageresource(r.mipmap.icon_health_pressed); tv_health.settextcolor(selectcolor); break; case 2: img_msg.setimageresource(r.mipmap.icon_msg_pressed); tv_msg.settextcolor(selectcolor); break; case 3: img_usercenter.setimageresource(r.mipmap.icon_user_pressed); tv_usercenter.settextcolor(selectcolor); break; } } public void resetcolor(){ img_home.setimageresource(r.mipmap.icon_home_normal); img_health.setimageresource(r.mipmap.icon_health_normal); img_msg.setimageresource(r.mipmap.icon_msg_normal); img_usercenter.setimageresource(r.mipmap.icon_user_normal); tv_home.settextcolor(unselectcolor); tv_health.settextcolor(unselectcolor); tv_msg.settextcolor(unselectcolor); tv_usercenter.settextcolor(unselectcolor); } }
四个fragment只是一个简单的布局,里面放置了一个textview,这里就不再贴出来o.o.
效果图预览:
效果图
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!