Iwfu-TabLayout实现滑动标签页

继续上一篇NavigationView的那一个例子，这里我们来使用tabLayout和ViewPager配合使用实现滑动标签页.效果如图:

添加依赖:

使用:(AndroidStudio为例)

build.gradle添加dependencies依赖
    compile 'com.android.support:design:22.2.0'

    要根据自己工程的编译版本选择依赖哪个版本的design库
    例如工程compile sdk 为23，则依赖
    compile 'com.android.support:design:23.2.0'

Eclipse的同学就要自行下载Design包了

布局文件:

activity_main.xml:

    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      tools:context="com.exchange.myapplication.MainActivity">

       <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:tabIndicatorColor="#ffffff"
        app:tabSelectedTextColor="@color/gray"
        app:tabTextColor="@color/white">

        </android.support.design.widget.TabLayout>


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

        </android.support.v4.view.ViewPager>

    </LinearLayout>

其中：
app:tabIndicatorColor:设置指示器颜色
app:tabSelectedTextColor设置当前选中的标签文字颜色
app:tabTextColor 设置标签文字颜色

添加标签:

声明TabLayout并findViewById( )略~~

申明一个数组（或集合）存放标签:

private String[] tabTitleArray = {"要闻", "英雄联盟", "守望先锋", "NBA", "程序员", "电竞",
            "经济"};

然后往tabLayout里添加标签,标签可以添加文字或图片，或是自定义的布局:

tabLayout.addTab(tabLayout.newTab().setText(tabTitleArray[i]));

此处可用for循环:

for (int i = 0; i < tabTitleArray.length; i++) {
            tabLayout.addTab(tabLayout.newTab().setText(tabTitleArray[i]));
        }

添加完标签后我们看看效果:

可以看到标签好像太多了，屏幕占满了，显得很拥挤~
只需要下面一行代码~

tabLayout.setTabMode (TabLayout.MODE_SCROLLABLE);

设置标签的模式~，有Fixed固定模式和Scrollable可以滑动模式两种。固定模式就像上图，整个TabLayout有多大，里面的标签就全部平均布局显示出来；可滑动模式当标签很多的时候就一直往后添加，以滑动的效果显示出来，效果如图.

另外:
如果标签很少，只有3-4个 使用可滑动模式就会变成这样：

不太和谐，多余的留白~

这类情况我们使用固定模式:

就可以实现均分了~

所以:固定模式适用于标签比较少的情况，可滑动模式适用于标签比较多的情况。

TabLayout和ViewPager联用:

完成到上一步，我们的TabLayout只能通过点击标签实现切换，下面实现和ViewPager的联用.

首先配置好ViewPager，给ViewPager添加一个Adapter,（都是常规做法）balabala~~

在给ViewPager设置适配的时候，在你的自定义适配器里重写getPageTitle()方法:

public class ViewPagerAdapter extends FragmentStatePagerAdapter {


    private String[] tabTitleArray;
    ...

    public ViewPagerAdapter(FragmentManager fm, Context context,
            List<Fragment> fragmentList, String[] tabTitleArray) {
        super(fm);
        ...
        this.tabTitleArray = tabTitleArray;
    }
    ...

    /* 重写与TabLayout配合 */

    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitleArray[position % tabTitleArray.length];
    }
}

直接返回对应的标签~

然后设置viewPager适配器的时候添加:

ViewPagerAdapter adapter = new ViewPagerAdapter(
                getSupportFragmentManager(), this, fragmentList, tabTitleArray);
        viewPager.setAdapter(adapter);

//将tabLayout和ViewPager绑定
        tabLayout.setupWithViewPager(viewPager);

(偷懒用了之前的图~)

现在你已经实现了炫酷的滑动标签页了~~

Tips:

实现完上面的效果后，将for循环添加标签的代码注释掉，你会发现依然有效，所以~tabLayou和viewPager联用就不用再手动添加标签了。

tabLayout的其他方法:

给tablayout添加监听
tabLayout.setOnTabSelectedListener ();
设置选中标签指示器的高度
tabLayout.setSelectedTabIndicatorHeight (100);
设置选中标签指示器的颜色
tabLayout.setSelectedTabIndicatorColor ();
设置标签的位置
tabLayout.setTabGravity ();

最后，感谢你能看到这里~~❤

(任然在持续更新~)