Android中TabLayout结合ViewPager实现页面切换

一、实现思路

1、在build.gradle中添加依赖，例如：

compile 'com.android.support:support-v4:23.4.0'
compile 'com.android.support:design:23.4.0'

也可以将support-v4替换为appcompat-v7，例如：

compile 'com.android.support:appcompat-v7:23.4.0'

因为appcompat-v7是依赖于support-v4的。

更多说明可参考官方文档support library部分。

2、在xml中添加tablayout和viewpager，例如：

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

  <android.support.design.widget.tablayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/tablayoutbackground"
    app:tabmode="scrollable"
    app:tabtextcolor="@color/color_white"
    app:tabselectedtextcolor="@color/tabselectedtext"
    app:tabindicatorheight="3dp"
    app:tabindicatorcolor="@color/color_white"/>

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

</linearlayout>

tablayout：

（1）tabmode有两个属性，一个是"scrollable"，用于多标签；另一个是"fixed"，用于少标签，它会让全部标签平均分布在屏幕上，所以标签不能多，而且名称也不能长，否则会显示不完整。

（2）tabindicator是指文本下的指示条。当选中一个tab时，指示条才会出现，出现在文本下面。

3、获取view对象

tablayout tablayout = (tablayout) findviewbyid(r.id.tab_layout);
viewpager viewpager = (viewpager) findviewbyid(r.id.view_pager);

4、创建fragmentstatepageradaper的子类，并实现构造方法

  public class viewpageradapter extends fragmentstatepageradapter {
    public viewpageradapter(fragmentmanager fm) {
      super(fm);
    }
　　}

 创建该类的一个实例对象

viewpageradapter viewpageradapter = new viewpageradapter(getsupportfragmentmanager()); 

在这一步中，你可以选择是实现fragmentpageradapter的子类，或者是fragmentstatepageradapter的子类。

fragmentpageradapter用于页数较少的，也就fragment的数量较少的，因为只要用户还停留在当前的activity中，其中的fragment都不会被销毁，所以内存消耗会比较大。

而fragmentstatepageradapter的工作原理类似于listview，只要用户不可见的fragment，都会被销毁，只保留它的状态。

因为我用的是v4兼容包下的fragment，所以需要用getsupportfragmentmanager()去获取fragmentmanager。

5、设置viewpager和tablayout

 viewpager.setadapter(viewpageradapter);
tablayout.setupwithviewpager(viewpager);

二、完善adapter

1、重写三个方法

  public class viewpageradapter extends fragmentstatepageradapter {

    ......

    @override
    public fragment getitem(int position) {
      return null;
    }

    @override
    public int getcount() {
      return 0;
    }

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

2、创建tab的标题数据：

 private string[] mtitles = new string[]{"语文", "英语", "数学", "物理", "生物", "化学", "地理", "政治", "历史"};

创建fragment的子类:

public class viewpagerfragment extends fragment {

  private static final string key = "extra";
  private string mmessage;

  public viewpagerfragment() {
  }

  public static viewpagerfragment newinstance(string extra) {
    bundle args = new bundle();
    args.putstring(key, extra);
    viewpagerfragment fragment = new viewpagerfragment();
    fragment.setarguments(args);
    return fragment;
  }
}

创建fragment的集合对象，并添加实例对象到集合里：

private arraylist<viewpagerfragment> mviewpagerfragments = new arraylist<>();

    ......

    for (int i = 0; i < mtitles.length; i++) {
      mviewpagerfragments.add(viewpagerfragment.newinstance(mtitles[i]));
    }

 3、修改adapter中的方法

public class viewpageradapter extends fragmentstatepageradapter {

    private string[] titles;
    private arraylist<viewpagerfragment> viewpagerfragments;

    public viewpageradapter(fragmentmanager fm) {
      super(fm);
    }

    public void settitles(string[] titles) {
      this.titles = titles;
    }

    public void setfragments(arraylist<viewpagerfragment> viewpagerfragments) {
      this.viewpagerfragments = viewpagerfragments;
    }

    @override
    public fragment getitem(int position) {
      return viewpagerfragments.get(position);
    }

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

    @override
    public charsequence getpagetitle(int position) {
      return titles[position];
    }
  }

 4、将数据传给adapter

 viewpageradapter.settitles(mtitles);
viewpageradapter.setfragments(mviewpagerfragments); 

三、完善fragment

1、fragment_view_pager_item.xml

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

  <textview
    android:id="@+id/fragment_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"/>

</linearlayout>

2、完善fragment的方法

public class viewpagerfragment extends fragment {

  ......

  @override
  public void oncreate(@nullable bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    bundle bundle = getarguments();
    if (bundle != null) {
      mmessage = bundle.getstring(key);
    }
  }

  @nullable
  @override
  public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
    view view = inflater.inflate(r.layout.fragment_view_pager_item, container, false);
    textview textview = (textview) view.findviewbyid(r.id.fragment_text);
    textview.settext(mmessage);
    return view;
  }
}

在创建fragment时，会调用oncreate方法，在其中执行一些状态信息的初始化，用于暂停或停止后的恢复所用。

在fragment首次加载视图时，会调用oncreateview方法，在其中执行视图的加载和初始化，返回的应该是该fragment布局的根视图。其中inflate方法的第三个参数代表的意思是，是否要将加载进来的布局（r.layout.fragment_view_pager_item）添加进container这个viewgroup里。根据官方文档的说明，上例那样做的话，系统已经将这个布局添加进container了，所以这里为false。

 静态效果图：

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