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

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

程序员文章站 2023-12-09 20:07:45
先看效果图: 使用tablayout,首先需要在项目中加入design包 dependencies { compile 'com.android.su...

先看效果图:

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标签不管为多少都是固定的,所以当标签很多的时候就会挤在一起,而且回造成标签上的文字显示不完整:

如下图:

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

app:tabmode="fixed"

scrollable

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

app:tabmode="scrollable"

如下图:

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

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

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