Android Activity与Fragment实现底部导航器

单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.

效果图预览：

效果图

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！