Tablayout + viewpager + fragment 实现你的简易导航栏

实现该效果主要分一下几步：

    1、build.gradle 中导入 compile 'com.android.support:design:26.0.0-alpha1' 依赖，具体版本视情况而定

    2、上主布局文件 activity_main.xml，代码如下：

        

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ffdemo="http://schemas.android.com/tools"
    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"
        ffdemo:tabIndicatorColor="@color/white"
        ffdemo:tabSelectedTextColor="@color/gray"
        ffdemo:tabTextColor="@color/white"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

根布局为LinearLayout,在其中填充TabLayout 和 ViewPager;

    ffdemo:tabIndicatorColor="@color/white"
        ffdemo:tabSelectedTextColor="@color/gray"
        ffdemo:tabTextColor="@color/white"

这三行代码用于显示tab标签各个状态的颜色，ffdemo对应到包名"com.example.xxx"中的xxx，在values文件夹下新建atttrs.xml文件，定义以上属性，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Myview">
        <attr name="tabIndicatorColor" format="color"/>
        <attr name="tabSelectedTextColor" format="color"/>
        <attr name="tabTextColor" format="color"/>
    </declare-styleable>
</resources>

viewpager中fragment对应的文件布局文件 content.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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="内容"
        android:id="@+id/content"
        android:gravity="center"/>
</LinearLayout>

Fragment -->  TabFragment.class 代码如下：

public class TabFragment extends Fragment {
    private TextView textView;

  //返回一个Fragment实例

    public static TabFragment newInstance(int index){
        Bundle bundle = new Bundle();
        bundle.putString("index","第" + (1 + index) + "页");
        TabFragment fragment = new TabFragment();
        fragment.setArguments(bundle);
        return fragment;
    }

  //实例化控件和UI处理
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.content,null);
        textView = view.findViewById(R.id.content);
        textView.setText(getArguments().getString("index"));
        return view;
    }
}

MainActivity.class 代码如下：

private String[] titles = new String[]{"推荐", "娱乐", "科技"};    //tab标签的内容 源
private TabLayout tabLayout;                     //TabLayout实例
private ViewPager mViewPager;                     //ViewPager实例
private FragmentPagerAdapter adapter;                 //FragmentViewPager  适配器
//ViewPage选项卡页面列表
private List<Fragment> fragmentList;                 //List 存储 Fragment 实例
private List<String> titleList;                   //List 存储上面的 tab标签 的内容

protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    tabLayout = (TabLayout) findViewById(R.id.tab_layout);

    titleList = new ArrayList<>();            //实例化 tab 的 List
    fragmentList = new ArrayList<>();          //实例化 Fragment 的 List
    for (int i = 0; i < titles.length; i++){
        titleList.add(titles[i]);            //将tab 的 String数组填充到List中
        fragmentList.add(TabFragment.newInstance(i));  //填充对应的 Fragment
    }
    adapter = new Tab_fragment_pageradpter(getSupportFragmentManager(),fragmentList,titleList);    //Tab_fragment_pageradapter的类将在下面给出
    mViewPager.setAdapter(adapter);            //ViewPager绑定adpter
    tabLayout.setupWithViewPager(mViewPager);       //tabLayout关联viewPager
}

public class  Tab_fragment_pageradpter extends FragmentPagerAdapter {
    private List<Fragment> list_fragment;   //fragment列表
    private List<String> list_title;        //tab名的列表

    public Tab_fragment_pageradpter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_title) {
        super(fm);
        this.list_fragment = list_fragment;        //tab标签内容 数据源
        this.list_title = list_title;           //fragment 数据源
    }

    @Override
    public Fragment getItem(int position) {
        return list_fragment.get(position);        //返回fagment的实例
    }

    @Override
    public int getCount() {
        return list_fragment.size();           //返回frament的数量
    }

    //此方法用来显示tab上的名字
    @Override
    public CharSequence getPageTitle(int position) {
        return list_title.get(position);        //返回tab标签的内容
    }
}

最后：注册Activity，启动应用，就可以看到效果啦！！！

PS：适配器中的 CharSequence getPageTitle() 方法一定要复写，不然会出现tab标签内容不显示的问题！！

还有就是，如果tab过多，没过tab的数据会竖直显示，目前还没解决，希望各位大佬们指点迷津！！！

纪念我的第一个Blog，诸多不足，感谢各位大牛支持！！！