利用TabLayout+ViewPager+Fragment实现可滚动的Tab页面

如图：

利用TabLayout+ViewPager+Fragment实现可滚动的Tab页面
1.配置gradle

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

2.布局文件：

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorPrimary"/>


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

</LinearLayout>

3.构建 NewsPagerAdapter，代码如下：

package com.zccfocusing.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;


/**
 * Created by android-dev on 2017/2/27.
 */

public class NewsPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragments;
    private List<String> mNewsTypes;
    public NewsPagerAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        mFragments = fragments;
        mNewsTypes = titles;
    }

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

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


//    为Tabayout设置主题名称
    @Override
    public CharSequence getPageTitle(int position) {
        return mNewsTypes == null ? "" + position : mNewsTypes.get(position);
    }


}

4.初始化ViewPager，为其设置适配器，且与TabLayout进行绑定：

private void initViewPager() {
        if (mAdapter == null && mNewsTypeList != null) {
            mFragments = new ArrayList<>();
            for (int i = 0; i < mNewsTypeList.size(); i++) {
                NewsListFragment fragment = null;
                fragment = new NewsListFragment();
                mFragments.add(fragment);
            }
            mAdapter = new NewsPagerAdapter(getActivity().getSupportFragmentManager(), mFragments, mNewsTypeList);
            mViewPager.setAdapter(mAdapter);
            mTabLayout.setupWithViewPager(mViewPager);
        }
    }

整个类代码如下：

package com.zccfocusing.fragment;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.zccfocusing.R;
import com.zccfocusing.adapter.NewsPagerAdapter;

import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.ViewInject;
import org.xutils.x;

import java.util.ArrayList;
import java.util.List;

/**
 * 
 */
@ContentView(R.layout.fragment_news)
public class NewsFragment extends Fragment {

    private View mView;

    @ViewInject(R.id.tabLayout)
    private TabLayout mTabLayout;
    @ViewInject(R.id.viewPager)
    private ViewPager mViewPager;
    private List<Fragment> mFragments;

    private NewsPagerAdapter mAdapter;

    private List<String> mNewsTypeList;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        mView = x.view().inject(this, inflater, container);
        initData();

        initViewPager();

        return mView;
    }


    //测试数据
    private void initData() {
        mNewsTypeList = new ArrayList<>();
        mNewsTypeList.add("今日头条");
        mNewsTypeList.add("知乎日报");
        mNewsTypeList.add("微信精选");
        mNewsTypeList.add("开发者头条");
        mNewsTypeList.add("网易新闻");
        mNewsTypeList.add("一点资讯");
        mNewsTypeList.add("百度新闻");
    }

    private void initViewPager() {
        if (mAdapter == null && mNewsTypeList != null) {
            mFragments = new ArrayList<>();
            for (int i = 0; i < mNewsTypeList.size(); i++) {
                NewsListFragment fragment = null;
                fragment = new NewsListFragment();
                mFragments.add(fragment);
            }
            mAdapter = new NewsPagerAdapter(getActivity().getSupportFragmentManager(), mFragments, mNewsTypeList);
            mViewPager.setAdapter(mAdapter);
            mTabLayout.setupWithViewPager(mViewPager);
        }
    }

}

加载fragment时，避免重复加载数据，可重写fragment的方法：

 @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        if (isVisibleToUser && isInit && first ) {
            //fragment可见时加载数据
        } else {
            //不可见时不执行操作
        }
        super.setUserVisibleHint(isVisibleToUser);
    }

这个实际使用中，可能会报控件没有初始化的错误，解决办法：首先设置viewpage预加载页面个数为所有的，mViewPager.setOffscreenPageLimit(mFragments.size());然后上边的方法可以加个布尔类型的变量控制一下（例如 isVisibleToUser && isinit），第一次加载的时候不用上边的可见方法加载，加载完一次之后再用上边的可见方法加载可完美解决！

代码中用了xutils：详情请到传送门

附上github上一个炫酷指示器

传送门见 Magic indicator