概述
TabLayout 是 Google 官方在 14 年 Google I/O 大会上推出的具有 Material Design 效果的一个控件库，作为一个标签指示器，它可以与 ViewPager 进行联动，两者配合 Fragment 使用可以实现滑动标签页，就是类似知乎和微信那种。
实现过程
-
首先我们需要在 app 的 gradle 中添加 design 包的依赖库：
compile 'com.android.support:design:25.0.0' -
好，我们来看看主页面 activity_main.xml 的布局文件:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/linearlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/mtablayout"
android:background="@color/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabMode="fixed"
app:tabTextColor="@android:color/white"
app:tabSelectedTextColor="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/mviewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
</LinearLayout>
</RelativeLayout>`这里需要注意一下，为了实现如效果图中更改标示线的颜色，标题的颜色大小，以及整个 TabLayout 的背景颜色等等，我们需要在布局的开头添加命名空间:
`xmlns:app="http://schemas.android.com/apk/res-auto"`;这里还有一些属性： app:tabMode="fixed" 表示顶部的tab布局不可滑动 app:tabIndicatorColor="@color/colorAccent" 表示顶部Tab 下方那条线的颜色 app:tabSelectedTextColor="@color/colorAccent" 表示Tab 被选中时候字体的 颜色 app:tabTextColor="@android:color/white" 表示Tab 未被选中时候字体的颜色
3.核心代码：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 去除阴影
getSupportActionBar().setElevation(0);
initData();
initView();
}
//数据初始化
private void initData() {
mtitle = new ArrayList<>();
mtitle.add("服务管家");
mtitle.add("微信精选");
mtitle.add("美女社区");
mtitle.add("个人中心");
mfragment = new ArrayList<>();
mfragment.add(new ButerFragment());
mfragment.add(new GirlFragment());
mfragment.add(new WeChatFragmeent());
mfragment.add(new UserFragment());
}
//View 初始化
private void initView() {
mtablayout = (TabLayout) findViewById(R.id.mtablayout);
mviewpager = (ViewPager) findViewById(R.id.mviewpager);
// 预加载
mviewpager.setOffscreenPageLimit(mfragment.size());
// 设置适配器
mviewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
//
public Fragment getItem(int position) {
return mfragment.get(position);
}
@Override
public int getCount() {
return mfragment.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mtitle.get(position);
}
});
//将TabLayout 与ViewPager进行绑定
mtablayout.setupWithViewPager(mviewpager);
}以上就是 TabLayout+ViewPager+Fragment 实现 Tab 滑动的核心代码，ViewPager 设置 Adapter 填充 Fragment(需要准备好四个 Fragment 并加载到一个集合中)，然后再将 TabLayout 与 ViewPager 进行绑定就可以了。
在这个过程中，TabLayout 是一个标签指示器，ViewPager 充当容器的角色，Fragment 为 ViewPager 提供数据源。我是这样理解的，这个场景好比将一个装满了书籍和文具「Fragment来填充」的包「ViewPager」挂在墙上的挂钩「TabLayout」上，怎么样，这样应该很容易理解了吧?
-
需要注意的是，在 Fragment 和 ViewPager 配合使用的时候，ViewPager 会使用预加载机制，使得我们在没有跳转到对应页面时，可能已经加载好了，这是个非常不好的用户体验，浪费用户的流量。
这样，我们便实现了首页滑动的功能，好，我们来看下效果怎么样！
-
接下来为了实现更加高逼格一点的效果，我们再来使用一个 FloatingActionButton 控件「悬浮框」，第一页悬浮框不可见，其他三页可见并可以实现点击事件进入设置页面「新的 一个Activity」。
* 我们来看看该控件的布局文件：
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp" >
</android.support.design.widget.FloatingActionButton>这些属性很简单，相信大家都知道，效果就相当于一个 Boutton 悬浮在这页面底部。
-
核心代码：
// 初始化悬浮框
fab_setting = (FloatingActionButton) findViewById(R.id.fab_setting);
// 设置启动 Activity 时悬浮框默认隐藏
fab_setting.setVisibility(View.GONE);
// 悬浮框的点击事件
fab_setting.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View view){
startActivity(new Intent(this, SettingActivity.class));
}
});
// viewPager的滑动监听
mviewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Log.i(TAG, "position: "+position);
if (position == 0) {
fab_setting.setVisibility(View.GONE);
}else {
fab_setting.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});代码很简单，主要就是调用 addOnPageChangeListener（）方法为 viewPager 设置一个滑动监听器，需要注意的是重写的三个方法：
(1) onPageSelected( ): 表示页面被选中的那个过程
(2)onPageScrollStateChanged( ): 表示页面的滑动状态发生改变的那个过程,
(3)onPageScrolled( )：表示页面滑动的那个过程
-
效果图如何：
第一次录制 Gif 动态图，效果不是很理想，将就一下，我相信大家能看懂，以后我会慢慢改进！
PS：本文属于原创，欢迎一起交流学习，一起进步！如果疑问，可以关注我的微信公众号（半夏薄荷澜），在后台和我交流。
人生没有白走的路，每一步都算数！
