Android design包自定义tablayout的底部导航栏的实现方法

以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果.

实现的效果就是类似qq.微信的页面间(也就是fragment间)的切换.如图:

 

布局只要一个tablayout

<android.support.design.widget.tablayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/nav_tl"
    app:tabindicatorheight="0dp"//将指示器去掉 ps:如果大家对tablayout有一些样式上的需求
    可以自定义style,这里就不加了
    android:layout_gravity="bottom"
    ></android.support.design.widget.tablayout>

然后就是activity了

public class mainactivity extends baseactivity implements tablayout.ontabselectedlistener{
  @bindview(r.id.main_container)
  linearlayout maincontainer;
  @bindview(r.id.nav_tl)
  tablayout navtl;
  //tab 文字
  private final int[] tab_titles = new int[]{r.string.nav_home,r.string.nav_order,r.string.nav_my};
  //tab 图片
  private final int[] tab_imgs = new int[]{r.drawable.nav_home_bg,r.drawable.nav_order_bg,r.drawable.nav_my_bg};
//贴出一个r.drawable.nav_home_bg的文件,其他类似:`<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_selected="true" android:drawable="@mipmap/nav_home_selected"></item>
  <item android:state_selected="false" android:drawable="@mipmap/nav_home_normal"></item>
</selector>`
  private firstpagerfragment firstpagerfragment;
  private personalfragment personalfragment;
  private seekorderfragment seekorderfragment;
  private android.support.v4.app.fragmentmanager manager;
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    butterknife.bind(this);
    iniview();
    inidata();
  }
  private void inidata() {
  }
  private void iniview() {
    layoutinflater inflater = layoutinflater.from(this);
    manager = getsupportfragmentmanager();
    gettab(r.id.main_container,manager,0);
    settabs(navtl,inflater,tab_titles,tab_imgs);
    navtl.setontabselectedlistener(this);
  }
  /**
   * @description: 设置添加tab
   * 我们自定义的布局customer_layout其实就是一张图片加文字
   * `<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">
  <imageview
    android:id="@+id/img_tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    />
  <textview
    android:id="@+id/tv_tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textcolor="@drawable/tv_color_bg"//text我用了一个颜色选择器,主要在我选中的时候能改变颜色
    />
</linearlayout>`
   */
  private void settabs(tablayout tablayout, layoutinflater inflater, int[] tabtitlees, int[] tabimgs) {
    for (int i = 0; i < tabimgs.length; i++) {
      tablayout.tab tab = tablayout.newtab();
      view view = inflater.inflate(r.layout.customer_layout, null);
      tab.setcustomview(view);
      textview tvtitle = (textview) view.findviewbyid(r.id.tv_tab);
      tvtitle.settext(tabtitlees[i]);
      imageview imgtab = (imageview) view.findviewbyid(r.id.img_tab);
      imgtab.setimageresource(tabimgs[i]);
      tablayout.addtab(tab);
    }
  }
  @override
  public void ontabselected(tablayout.tab tab) {
    gettab(r.id.main_container,manager,tab.getposition());
  }
  @override
  public void ontabunselected(tablayout.tab tab) {
  }
  @override
  public void ontabreselected(tablayout.tab tab) {
  }
  //设置tab的监听,选中某一个tab对应的fragment要及时切换,相信大家看代码能看明白
  private void gettab(int container, android.support.v4.app.fragmentmanager manager, int position){
    fragmenttransaction ft = manager.begintransaction();
    hideall(ft);
    switch (position){
      case 0:
        if(firstpagerfragment==null){
          firstpagerfragment=new firstpagerfragment();
          ft.add(container,firstpagerfragment);
        }else {
          ft.show(firstpagerfragment);
        }
        break;
      case 1:
        if(seekorderfragment==null){
          seekorderfragment=new seekorderfragment();
          ft.add(container,seekorderfragment);
        }else {
          ft.show(seekorderfragment);
        }
        break;
      case 2:
        if(personalfragment==null){
          personalfragment=new personalfragment();
          ft.add(container,personalfragment);
        }else {
          ft.show(personalfragment);
        }
        break;
    }
    ft.commit();
  }
  private void hideall(fragmenttransaction ft) {
    if(firstpagerfragment!=null){
      ft.hide(firstpagerfragment);
    }
    if(personalfragment!=null){
      ft.hide(personalfragment);
    }
    if(seekorderfragment!=null){
      ft.hide(seekorderfragment);
    }
  }
}

以上所述是小编给大家介绍的android design包自定义tablayout的底部导航栏的实现方法，希望对大家有所帮助