TabLayout使用方法详解

tablayout是design库提供的控件,可以方便的使用指示器,功能类似viewpagerindicator.
使用非常方便,android studio只需要在gradle中引入即可使用 .

compile 'com.android.support:design:23.3.0'

tablayout即可以单独使用,也可以配合viewpager来使用.

先来看看单独使用的demo,实现如下图的效果:

代码如下:

package blog.csdn.net.mchenys.tablayoudemo;

import android.graphics.color;
import android.os.bundle;
import android.support.design.widget.tablayout;
import android.support.v7.app.appcompatactivity;
import android.view.gravity;
import android.view.viewgroup;
import android.widget.toast;

/**
 * created by mchenys on 2016/5/28.
 */
public class tablayoutonlyactivity extends appcompatactivity {
 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  //创建tablayout
  tablayout tablayout = new tablayout(this);
  tablayout.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.match_parent, 60));
  //tab可滚动
  tablayout.settabmode(tablayout.mode_scrollable);
  //tab居中显示
  tablayout.settabgravity(tablayout.gravity_center);
  //tab的字体选择器,默认黑色,选择时红色
  tablayout.settabtextcolors(color.black, color.red);
  //tab的下划线颜色,默认是粉红色
  tablayout.setselectedtabindicatorcolor(color.blue);
  for (int i = 0; i < 20; i++) {
   //添加tab
   tablayout.addtab(tablayout.newtab().settext("tab" + i));
  }
  final toast toast = toast.maketext(this, "", toast.length_short);
  toast.setgravity(gravity.center, 0, 0);
  //设置tab的点击监听器
  tablayout.setontabselectedlistener(new tablayout.ontabselectedlistener() {
   @override
   public void ontabselected(tablayout.tab tab) {
    toast.settext(tab.getposition() + ":" + tab.gettext());
    toast.show();
   }

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

   }

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

   }
  });
  setcontentview(tablayout);
 }
}

下面再来看看配合viewpager的使用方式,实现如下效果图:

布局文件如下:

<?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">

 <!--
 app:tabgravity="center" 对齐方式，可选fill和center
 app:tabindicatorcolor="@color/coloraccent" 设置tab下划线的颜色
 app:tabmode="scrollable" scrollable是可以横行滚动,fixed是指固定个数
 app:tabselectedtextcolor="@color/colorprimarydark" 选择tab的文本颜色
 app:tabtextcolor="@color/colorprimary" 普通tab字体颜色
 -->
 <android.support.design.widget.tablayout
  android:id="@+id/tl_tab"
  android:layout_width="match_parent"
  android:layout_height="55dp"
  app:tabgravity="center"
  app:tabindicatorcolor="@color/coloraccent"
  app:tabmode="scrollable"
  app:tabselectedtextcolor="@color/colorprimarydark"
  app:tabtextcolor="@color/colorprimary" />

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

代码如下:

package blog.csdn.net.mchenys.tablayoudemo;

import android.os.bundle;
import android.support.design.widget.tablayout;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;
import android.support.v7.app.appcompatactivity;

/**
 * created by mchenys on 2016/5/28.
 */
public class tablayoutwithviewpageractivity extends appcompatactivity {

 string[] mtitle = new string[20];
 string[] mdata = new string[20];
 tablayout mtablayout;
 viewpager mviewpager;

 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_tab_view_pager);
  initdata();
  initview();
 }

 private void initdata() {
  for (int i = 0; i < 20; i++) {
   mtitle[i] = "tab" + (i + 1);
   mdata[i] = "当前选中的是第" + (i + 1) + "fragment";
  }
 }

 private void initview() {
  mtablayout = (tablayout) findviewbyid(r.id.tl_tab);
  mviewpager = (viewpager) findviewbyid(r.id.vp_pager);
  mviewpager.setadapter(new fragmentpageradapter(getsupportfragmentmanager()) {
   //此方法用来显示tab上的名字
   @override
   public charsequence getpagetitle(int position) {
    return mtitle[position % mtitle.length];
   }

   @override
   public fragment getitem(int position) {
    //创建fragment并返回
    tabfragment fragment = new tabfragment();
    fragment.settitle(mdata[position % mtitle.length]);
    return fragment;
   }

   @override
   public int getcount() {
    return mtitle.length;
   }
  });
  //将viewpager关联到tablayout上
  mtablayout.setupwithviewpager(mviewpager);

//  设置监听,注意:如果设置了setontabselectedlistener,则setupwithviewpager不会生效
//  因为setupwithviewpager内部也是通过设置该监听来触发viewpager的切换的.
//  mtablayout.setontabselectedlistener(new tablayout.ontabselectedlistener() {
//   @override
//   public void ontabselected(tablayout.tab tab) {
//   }
//
//   @override
//   public void ontabunselected(tablayout.tab tab) {
//
//   }
//
//   @override
//   public void ontabreselected(tablayout.tab tab) {
//
//   }
//  });
//  那我们如果真的需要监听tab的点击或者viewpager的切换,则需要手动配置viewpager的切换,例如:
  mtablayout.setontabselectedlistener(new tablayout.ontabselectedlistener() {
   @override
   public void ontabselected(tablayout.tab tab) {
    //切换viewpager
    mviewpager.setcurrentitem(tab.getposition());
   }

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

   }

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

   }
  });
 }
}

tabfragment 代码如下:

package blog.csdn.net.mchenys.tablayoudemo;

import android.os.bundle;
import android.support.v4.app.fragment;
import android.util.typedvalue;
import android.view.gravity;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.textview;

/**
 * created by mchenys on 2016/5/28.
 */
public class tabfragment extends fragment {
 private string mtitle;

 public void settitle(string title) {
  this.mtitle = title;
 }

 @override
 public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
  textview textview = new textview(getcontext());
  textview.settextsize(typedvalue.complex_unit_sp,30);
  textview.setgravity(gravity.center);
  textview.settext(mtitle);
  return textview;
 }
}

扩展

1.tablayout除了上面效果图展示的文本以外,从源码中发现它还可以支持drawable,以及自定义view

public static final class tab {

  /**
   * an invalid position for a tab.
   *
   * @see #getposition()
   */
  public static final int invalid_position = -1;

  private object mtag;
  private drawable micon;
  private charsequence mtext;
  private charsequence mcontentdesc;
  private int mposition = invalid_position;
  private view mcustomview;

  private tablayout mparent;
  private tabview mview;

  private tab() {
   // private constructor
  }

如下效果图,就是通过添加自定义view实现的.

代码如下,只需要修改tablayout的addtab方法即可:

for (int i = 0; i < 20; i++) {
 //1.支持添加字符串文本tab 
 //tablayout.addtab(tablayout.newtab().settext("tab" + i));

 //2.支持添加图片tab 
 //tablayout.addtab(tablayout.newtab().seticon(r.mipmap.ic_launcher));

 //3.支持添加view
 view tabview = view.inflate(tablayoutonlyactivity.this, r.layout.view_tab, null);
 ((textview)tabview.findviewbyid(r.id.tv_title)).settext("tab" + i);
 tablayout.addtab(tablayout.newtab().setcustomview(tabview));
}

2.替换默认的tab选择效果

如果你即想使用tablayout,又想不用它的选中效果,例如我们不想要tab下面的那条下划线作为指示效果.我们应该怎么处理呢?

要替换默认的选中效果,只能通过添加自定义view作为tab了.这样就可以很方便的处理view的选中和未选中状态了.

同时我们还要隐藏默认的下划线,这个怎么处理呢,这里有个很好的建议.我们可以通过设置下滑线的颜色和tab的背景 颜色一致,这样就看不出来了.

例如下面我们要实现选中tab的效果是将tab放大1.3倍,没有选中则恢复原来比例.效果图:

修改代码如下:

package blog.csdn.net.mchenys.tablayoudemo;

import android.graphics.color;
import android.os.bundle;
import android.support.design.widget.tablayout;
import android.support.v7.app.appcompatactivity;
import android.view.gravity;
import android.view.view;
import android.view.viewgroup;
import android.widget.textview;
import android.widget.toast;

/**
 * created by mchenys on 2016/5/28.
 */
public class tablayoutonlyactivity extends appcompatactivity {
 int initposition; //默认位置

 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 //创建tablayout
 final tablayout tablayout = new tablayout(this);
 tablayout.setlayoutparams(new viewgroup.layoutparams(viewgroup.layoutparams.match_parent, 100));
 //tab可滚动
 tablayout.settabmode(tablayout.mode_scrollable);
 //tab居中显示
 tablayout.settabgravity(tablayout.gravity_center);
 //tab的字体选择器,默认黑色,选择时红色
 tablayout.settabtextcolors(color.black, color.red);
 //tab的下划线颜色,默认是粉红色,如果要自定义选中效果,则可以将下划线设置为和背景色一样.
 tablayout.setselectedtabindicatorcolor(color.white);
 for (int i = 0; i < 20; i++) {
  //1.支持添加字符串文本tab
  //tablayout.addtab(tablayout.newtab().settext("tab" + i));

  //2.支持添加图片tab
  //tablayout.addtab(tablayout.newtab().seticon(r.mipmap.ic_launcher));

  //3.支持添加view
  view tabview = view.inflate(tablayoutonlyactivity.this, r.layout.view_tab, null);
  ((textview) tabview.findviewbyid(r.id.tv_title)).settext("tab" + i);
  tablayout.addtab(tablayout.newtab().setcustomview(tabview));
 }

 //设置tab的点击监听器
 tablayout.setontabselectedlistener(new tablayout.ontabselectedlistener() {
  @override
  public void ontabselected(tablayout.tab tab) {
  //将默认位置选中为false
  isselected(tablayout.gettabat(initposition), false);
  //选中当前位置
  isselected(tab, true);

  }

  @override
  public void ontabunselected(tablayout.tab tab) {
  //tab未选中
  isselected(tab, false);
  }

  @override
  public void ontabreselected(tablayout.tab tab) {
  //tab重新选中
  isselected(tab,true);
  }
 });
 //进来默认选中位置第3个item
 initposition = 2;
 isselected(tablayout.gettabat(initposition), true);
 setcontentview(tablayout);
 }

 /**
 * 设置选中的tab是否带缩放效果
 * @param tab
 * @param isselected
 */
 private void isselected(tablayout.tab tab, boolean isselected) {
 view view = tab.getcustomview();
 if (null != view) {
  view.setscalex(isselected ? 1.3f : 1.0f);
  view.setscaley(isselected ? 1.3f : 1.0f);
 }
 }
}

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