Fragment 番外篇——TabLayout+ViewPager+Fragment

 关注 code小生 ，每日一篇技术推送！

作者：忘了12138
地址：http://www.cnblogs.com/wangle12138/p/8419496.html
声明：本文是 忘了12138 原创投稿，转发等请联系原作者授权。

该文章是一个系列文章，是本人在Android开发的漫漫长途上的一点感想和记录，我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索》以及《深入理解Android 卷Ⅰ，Ⅱ，Ⅲ》中的相关知识，另外也借鉴了其他的优质博客，在此向各位大神表示感谢，膜拜！！！

前言

上一篇文章中我们使用底部导航+Fragment的方式实现了Android主流App中大都存在的设计。并命名其为“Fragment最佳实践”，作为想到单独使用Fragment的用户来说，这个说法并不夸大，它解决了许多用户在使用Fragment时产生的这样那样可见或不可见的问题。不过Fragment还有其他的使用方式，就是我们本章要介绍的。（本来是介绍ListView的，等着ListView的读者不好意思了，我会很快更新的。）

注：为什么临时插入这一章，因为有读者在上一篇文章中评论了，我觉得大有道理，感谢

这里我就不打码了，，哈哈哈哈

TabLayout

TabLayout的静态使用

TabLayout是Android 5.0之后Google提供的一系列Material Design设计规范中的一个控件。我们在布局文件中可以这样使用。

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@color/colorPrimary"
        >

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 1"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 2"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 3"/>
    </android.support.design.widget.TabLayout>

TabLayout间接继承于ViewGroup，其内可包含0到n个TabItem，这个TabItem就是我们经常使用的标签，其是个自定义View，这样我们就定义了一个包含3个标签页的TabLayout。其运行结果如下图：

TabLayout的动态使用

在布局文件中我们可以很方便定义顶部/底部 导航的布局。我们来看一下在代码中的使用

    public class TabActivity extends AppCompatActivity {
    
        @BindView(R.id.tab_layout)
        TabLayout mTabLayout;
        @BindView(R.id.view_pager)
        ViewPager mViewPager;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
    
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_tab);
            ButterKnife.bind(this);

            mTabLayout.addTab(mTabLayout.newTab().setText("Tab 1"));
            mTabLayout.addTab(mTabLayout.newTab().setText("Tab 2"));
            mTabLayout.addTab(mTabLayout.newTab().setText("Tab 3"));

            //为TabLayout添加Tab选择事件监听
            mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
    //当标签被选择时回调

                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
    //当标签从选择变为非选择时回调

                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    //当标签被重新选择时回调

                }
            });

        }
    }

关于运行结果我就不上图了，跟上面的运行结果是一样的。

TabLayout的更多属性

关于TabLayout的更多属性以及使用的说明请查看其官方文档。在这里我们只关心TabLayout+ViewPager的化学反应,这个组合也是我们平常在开发中使用最多的。在此之前我们先介绍ViewPager

ViewPager
先看看官方对ViewPager的说明

/*
Layout manager that allows the user to flip left and right
through pages of data.  You supply an implementation of a
{
     @link PagerAdapter} to generate the pages that the view shows.
ViewPager is most often used in conjunction with {
     @link android.app.Fragment}
There are standard adapters implemented for using fragments with the ViewPager,
 which cover the most common use cases.  These are
 {
     @link android.support.v4.app.FragmentPagerAdapter} and
 {
     @link android.support.v4.app.FragmentStatePagerAdapter};*/
public class ViewPager extends ViewGroup {
    
}

上面英文的大致意思是ViewPager是一个布局管理类，这个类呢允许用户左右翻转页面。你必须实现一个PagerAdapter来生成这些显示的页面。ViewPager经常和Fragment一起使用。而且呢Google非常贴心的提供了两个类FragmentPagerAdapter和FragmentStatePagerAdapter来应付那些一般场景。

其实从ViewPager的说明中，我们基本上就能知道ViewPager是什么以及如何使用了。