欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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(),至于两者的区别,这里就不再说明了,感兴趣的话可以谷歌。

Android Activity与Fragment实现底部导航器

整体结构

底部导航通常由图片和文字组成,上面为imageview,下面为textview

Android Activity与Fragment实现底部导航器

底部导航

底部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 Activity与Fragment实现底部导航器

效果图

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