Android使用TabLayout+Fragment实现顶部选项卡

先看效果图:

使用tablayout,首先需要在项目中加入design包

dependencies {
  compile 'com.android.support:design:24.1.1' 
}

在activity_main.xml布局文件中

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context="zhengliang.com.tablayout.mainactivity">
  <android.support.design.widget.tablayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorprimary"
    >
  </android.support.design.widget.tablayout>
  <android.support.v4.view.viewpager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
</linearlayout>

里面一个tablayout和一个viewpager就行了

实现上面的效果需要创建几个fragment,这里为了方便就直接创建了一个基本的fragment需要的时候直接new就行了,实现代码如下:

public class blankfragment extends fragment {
  public blankfragment() {
  }
  public static blankfragment newinstance(string text){
    bundle bundle = new bundle();
    bundle.putstring("text",text);
    blankfragment blankfragment = new blankfragment();
    blankfragment.setarguments(bundle);
    return blankfragment;
  }
  @override
  public view oncreateview(layoutinflater inflater, viewgroup container,
               bundle savedinstancestate) {
    return inflater.inflate(r.layout.fragment_blank, container, false);
  }
  @override
  public void onviewcreated(view view, @nullable bundle savedinstancestate) {
    super.onviewcreated(view, savedinstancestate);
    textview textview = (textview) view.findviewbyid(r.id.pager_text);
    textview.settext(getarguments().getstring("text"));
  }
}

有了fragment还需要一个实现一个viewpageradapter

public class myadapter extends fragmentpageradapter {
  private list<string> list;
  public myadapter(fragmentmanager fm, list<string> list) {
    super(fm);
    this.list = list;
  }
  @override
  public fragment getitem(int position) {
    return blankfragment.newinstance(list.get(position));
  }
  @override
  public int getcount() {
    return list.size();
  }
  @override
  public charsequence getpagetitle(int position) {
    return list.get(position);
  }
}

adapter的写法非常简单,在自定义adapter的时候需要重写里面的getpagertitle()方法,实现这个方法是为了当tablayout与viewpager绑定的时候能够绑定tab标签的标题

一切准备就绪,直接看mainactivity.java中的代码

public class mainactivity extends appcompatactivity {
  private tablayout tab;
  private viewpager pager;
  private list<string> list;
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    /*初始化界面*/
    initviews();
    /*初始化数据*/
    initdata();
    /*设置adapter*/
    pager.setadapter(new myadapter(getsupportfragmentmanager(),list));
    /*tab与viewpager绑定*/
    tab.setupwithviewpager(pager);
  }
  /*初始化数据*/
  private void initdata() {
    list = new arraylist<>();
    for (int i = 0; i < 5 ; i++) {
      list.add(string.format(locale.china,"第%02d页",i));
    }
  }
  /*初始化界面*/
  private void initviews() {
    this.pager = (viewpager) findviewbyid(r.id.pager);
    this.tab = (tablayout) findviewbyid(r.id.tab);
  }
}

到这里基本就实现了上面图的效果,里面一句很关键的代码:tab.setupwithviewpager(pager);只有加了这句代码才能实现tab和viewpager的绑定联动...

下面介绍一些tablayout常用的属性:

设置tab标签的默认字体颜色:

app:tabtextcolor="#ddd"

设置tab标签选中的字体颜色:

app:tabselectedtextcolor="@color/coloraccent"

设置指示器的颜色:

app:tabindicatorcolor="@color/coloraccent"

设置指示器的高度: (当值为0dp的时候指示器为隐藏状态)

app:tabindicatorheight="5dp"

tablayout中一个重要的属性: app:tabmaode

该属性有两个值:### scrollable,fixed

"fixed"

固定的,表示tab标签不管为多少都是固定的,所以当标签很多的时候就会挤在一起,而且回造成标签上的文字显示不完整:

如下图:

app:tabmode="fixed"

scrollable

可滚动的,当tab的标签超出屏幕的宽度,就会自动出现课滑动的效果,当标签过多的时候还可以直接滑动标签

app:tabmode="scrollable"

如下图:

好了,上面这些就是tablayout最基本的用法...

以上所述是小编给大家介绍的android使用tablayout+fragment实现顶部选项卡，希望对大家有所帮助