Android Activity与Fragment实现底部导航器

概述单Activity多Fragment实现底部导航器最近由于Android基础知识讲解需要，采用单Activity多Fragment实现类似QQ底部导航器示例，这种开发模式广泛应用于App开发，比如QQ,微信，新浪等，关于Android底部导航栏的实现方式

单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 Activity与Fragment实现底部导航器全部内容，希望文章能够帮你解决Android Activity与Fragment实现底部导航器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。