关于TabLayout+ViewPager组合实现多页面滑动

转载请注明出处：http://blog.csdn.net/ht_android/article/details/46647711

在android提供的design library中新增了一个控件，叫TabLayout。它继承自HorizontalScrollView，能够实现android中多页面滑动切换效果。可是一般须要和ViewPager组合使用，官方API地址：https://developer.android.com/reference/android/support/design/widget/TabLayout.html

以下来解说一下详细的使用流程：

首先，要使用该控件就须要加入design library，在android studio(还没有使用Android studio的小伙伴们要赶紧更换啦)中加入依赖

compile ‘com.android.support:design:22.2.0’

然后再布局文件里使用TabLayout

<android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" />

紧接着在以下加入ViewPager

<android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tablayout" />

布局文件完毕了，接下来去定义ViewPager中的适配器，这里我使用的是Fragment，所以继承自FragmentPagerAdapter ，代码例如以下：

public class MyPageAdapter extends FragmentPagerAdapter {
    ArrayList<Fragment> datas;
    ArrayList<String> titles;

    public CommunityPageAdapter(FragmentManager fm) {
        super(fm);
    }

    public void setData(ArrayList<Fragment> datas) {
        this.datas = datas;
    }

    public void setTitles(ArrayList<String> titles) {
        this.titles = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return datas == null ? null : datas.get(position);
    }

    @Override
    public int getCount() {
        return datas == null ? 0 : datas.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles == null ?

null : titles.get(position);
    }
}

适配器中须要两个数据集合，分配填充Fragment和显示的标题。

然后在须要使用的页面加入例如以下代码：

        MyPageAdapter myPageAdapter = new MyPageAdapter(getFragmentManager());

        ArrayList<Fragment> datas = new ArrayList<Fragment>();
        datas.add(new AFragment());
        datas.add(new BFragment());
        datas.add(new CFragment());
        myPageAdapter.setData(datas);

        ArrayList<String> titles = new ArrayList<String>();
        titles.add("A");
        titles.add("B");
        titles.add("C");
        myPageAdapter.setTitles(titles);

如今适配器和数据已经准备好了。那么接下来就是要把数据放入ViewPager中，并使ViewPager和TabLayout相关联：

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
    // 将适配器设置进ViewPager
    viewPager.setAdapter(myPageAdapter);
    // 将ViewPager与TabLayout相关联
    tabLayout.setupWithViewPager(viewPager);

关联之后执行发现，事实上ViewPager因为预载入机制，导致每次都会提前载入下一个页面。假设页面的数据量大。那么这将会占用大量的内存。有什么办法能够仅仅载入当前显示的页面呢？

通过查找相关资料发现。有一个方法setOffscreenPageLimit(int)，该方法的作用是设置提前载入页面的数量，尝试使用viewPager.setOffscreenPageLimit(0);后发现无效。

继续查阅资料后发现，原来这是因为ViewPager的机制导致的，最少须要预载入一个页面。Requested offscreen page limit 0 too small; defaulting to 1，相关问题链接：http://stackoverflow.com/questions/10073214/viewpager-setoffscreenpagelimit0-doesnt-work-as-expected

发现了能够完美解决该问题的方法：

在Fragment中有一个方法，setUserVisibleHint，该方法能够获取当前页面的展示情况

@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
    super.setUserVisibleHint(isVisibleToUser);

    if (isVisibleToUser) {
        // 页面正在展示,在这里载入你的数据
    }else{
       // 页面没有展示
    }
}

基本到这一步功能已经实现了。可是，另一些细节须要注意，究竟ViewPager滑动的时候为什么会造成TabLayout的标题也随之更换呢？原来setupWithViewPager被调用的时候，执行了以下的代码

viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(this));

this.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));

到最后。另一个问题。那么就是假设我们的标题有多条，导致超出了TabLayout的显示范围，这该怎样解决呢？非常easy。查阅官方API发现，TabLayout有一个方法是setTabMode，它是用来设置TabLayout的展示模式。而这种方法接受两个常量，MODE_SCROLLABLE 以及 MODE_FIXED。显而易见，当我们设置为MODE_SCROLLABLE 它就能自己主动依据标题的数量。滑动展示啦，功能到这里就完美实现了！