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

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

程序员文章站 2024-02-21 17:13:28
以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果. 实现的效果就是类似qq.微信的页面间(也就是fragment间)的切换...

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

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

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

布局只要一个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的底部导航栏的实现方法,希望对大家有所帮助