单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.
效果图预览：
效果图
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
如对本文有疑问， 点击进行留言回复！！
android RecyclerView checkbox复用解决
Android Q Input (1) -- InputManagerService启动
android -- ndk (stack corruption detected)
网友评论