android TabLayout使用方法详解

google在2015的io大会上，给我们带来了更加详细的material design设计规范，同时，也给我们带来了全新的android design support library，在这个support库里面，google给我们提供了更加规范的md设计风格的控件。最重要的是，android design support library的兼容性更广，直接可以向下兼容到android 2.2。

这两天需要做一个仿京东详情的页面，上面的tab切换，以前都是自己写viewpager+fragment，或者indicator的深度定制，一直想尝试一下tablayout，于是就有了下面的坑。

然后下面是我简单的实现效果（个人觉得很坑，还不如自己自定义的导航器）

添加引用库

dependencies {
  compile filetree(dir: 'libs', include: ['*.jar'])
  compile 'com.android.support:appcompat-v7:24.2.0'
  compile 'com.android.support:design:24.2.0'
  compile 'com.android.support:recyclerview-v7:24.2.0'
  compile 'com.android.support:cardview-v7:24.2.0'
}

toolbar与tablayout

我们来看一下实现的布局：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <android.support.v7.widget.toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:gravity="center_vertical"
    app:navigationicon="@drawable/back_icon"
   >

    <linearlayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:orientation="horizontal">

      <android.support.design.widget.tablayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        style="@style/style_c7_s20"
        />

    </linearlayout>

    <textview
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="right"
      android:background="@drawable/more_icon" />

  </android.support.v7.widget.toolbar>

  <view style="@style/horizontal_line" />

  <android.support.v4.view.viewpager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</linearlayout>

这布局文件最关键的一点就是android.support.design.widget.tablayout 标签中的app:tabmode=”scrollable”，他设置tab的模式为“可滑动的”。

其他的用法和indicator的用法差不多，都需要设置适配器，然后通过数据实现页面的适配。直接上代码

adapter

public class productdetailpageradapter extends fragmentpageradapter {

  private list<string> mtitles;

  public productdetailpageradapter(fragmentmanager fm, list<string> mtitles) {
    super(fm);
    this.mtitles = mtitles;
  }

  @override
  public fragment getitem(int position) {
    if (position == 0) {
      return new productfragment();
    } else if (position == 1) {
      return new productdetailfragment();
    }
    return new productfragment();
  }

  @override
  public int getcount() {
    return mtitles.size();
  }

  @override
  public charsequence getpagetitle(int position) {
    return mtitles.get(position);
  }
}

主页面的相关逻辑，这里的fragment就是简单的fragment。

public class productdetailsactivity extends baseactivity {

  @bindview(r.id.viewpager)
  viewpager viewpager;
  @bindview(r.id.tablayout)
  tablayout tablayout;
  @bindview(r.id.toolbar)
  toolbar toolbar;

  private textview tabproduct;
  private textview tabdetail;

  private list<string> mtitles = null;
  private productdetailpageradapter productpageradapter = null;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_product_details);
    butterknife.bind(this);
    init();
  }

  private void init() {
    inittoolbar();
    initviewpager();
  }

  private void inittoolbar() {
    settitle("");
    toolbar.setnavigationonclicklistener(new view.onclicklistener() {
      @override
      public void onclick(view view) {
        finish();
      }
    });
    inittab();
    inittabchange();
  }

  private void inittabchange() {
    tablayout.addontabselectedlistener(new tablayout.ontabselectedlistener() {
      @override
      public void ontabselected(tablayout.tab tab) {
        viewpager.setcurrentitem(tab.getposition());
        switch (tab.getposition()){
          case 0:
            tabproduct.settextcolor(getresources().getcolor(r.color.c8));
            tabproduct.settextsize(18);
            break;

          case 1:
            tabdetail.settextcolor(getresources().getcolor(r.color.c8));
            tabdetail.settextsize(18);
            break;
        }
      }

      @override
      public void ontabunselected(tablayout.tab tab) {
        tabproduct.settextcolor(getresources().getcolor(r.color.c7));
        tabdetail.settextcolor(getresources().getcolor(r.color.c7));
      }

      @override
      public void ontabreselected(tablayout.tab tab) {

      }
    });
  }

  private void inittab() {
    tablayout.setselectedtabindicatorcolor(getresources().getcolor(r.color.c8));
    tablayout.setselectedtabindicatorheight(uiutils.dp2px(this, 2));
    tablayout.settabtextcolors(r.color.c7, r.color.c8);

    tablayout.addtab(tablayout.newtab().setcustomview(r.layout.item_detail_tab_product_layout));
    tabproduct= (textview) findviewbyid(r.id.tab_product);
    tabproduct.settextcolor(getresources().getcolor(r.color.c8));

    tablayout.addtab(tablayout.newtab().setcustomview(r.layout.item_detail_tab_detail_layout));
    tabdetail= (textview) findviewbyid(r.id.tab_detail);
    tabproduct.settextcolor(getresources().getcolor(r.color.c7));
    
  }

  private void initviewpager() {
    mtitles = new arraylist<>();
    mtitles.add("商品");
    mtitles.add("详情");
    productpageradapter = new productdetailpageradapter(getsupportfragmentmanager(), mtitles);
    viewpager.setadapter(productpageradapter);
    viewpager.addonpagechangelistener(new viewpager.simpleonpagechangelistener() {
      @override
      public void onpageselected(int position) {
        tablayout.gettabat(position).select();
      }
    });
  }


  public static void open(context context) {
    intent intent = new intent(context, productdetailsactivity.class);
    context.startactivity(intent);
  }
}

我相信很多人看了上面的代码会觉得很麻烦，其实我也觉得，这种虽然可定制高，但是相对于以前的写法，代码丝毫没有减少，我还是建议使用自定义控件，之前有一篇android万能的指示器，大家可以借鉴借鉴。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。