一、TabLayout简述

  TabLayout是谷歌效果控件库Android Design Support Library 中的控件之一，网易、知乎、喜马拉雅等app的标题栏都可以用TabLayout实现其滑动切换标题栏目效果，滑动效果如下图所示：

1515485548324mz滑动页面.gif

二、TabLayout+ViewPage+rFramgment实现步骤

) 图1.png

二、TabLayout+ViewPage+rFramgment实现具体代码

  1、在build.gradle(Module.app)中导入Android Design Support Library 依赖。

             implementation 'com.android.support:design:25.3.1'

  2、Tablayout的布局文件

  <?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"
  android:orientation="vertical">
   <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/myTab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/white"
        >
    </android.support.design.widget.TabLayout>

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

  引用 android.support.design.widget.TabLayout 组件，使用app:tabIndicatorColor="@color/colorAccent" 等属性的时候记得要写上 xmlns:app="http://schemas.android.com/apk/res-auto"声明一下，否则会报错。

  3、 MainActivity的实现的具体代码如下，注意代码中的注释。

public class MainActivity extends AppCompatActivity  {
private TabLayout myTabLayout;
private ViewPager myViewPager;
private List<String>myTitle;
private List<Fragment>myFragment;

//懸浮窗
private FloatingActionButton floatingActionButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //去掉阴影
    getSupportActionBar().setElevation(0);
    initData();
    initView();

private void initData(){
    myTitle = new ArrayList<>();
    String[] string = getResources().getStringArray(R.array.test1);
     for (int i = 0;i < string.length;i++){
         myTitle.add(string[i]);
     }

    myFragment = new ArrayList<>();
    myFragment.add(new ButlerFragment());
    myFragment.add(new WechatFragment());
    myFragment.add(new GirlFrament());
    myFragment.add(new UserFragment()); 
 
}
private void initView(){
    myTabLayout  = (TabLayout)findViewById(R.id.myTab);
    myViewPager = (ViewPager)findViewById(R.id.myView); 
   //预加载
    myViewPager.setOffscreenPageLimit(myFragment.size());
           //适配器（容器都需要适配器）
    myViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
        //选中的item
        @Override
        public Fragment getItem(int position) {
            return myFragment.get(position);
        }

        @Override
        public int getCount() {
            return myFragment.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return myTitle.get(position);
        }
    });
    //将TabLayout与Viewager绑定
    myTabLayout.setupWithViewPager(myViewPager);
}
 }

三、小结及注意事项

  添加<string ></>数组的时候可以用使用这种方式，

  <string-array name="test1">
    <item>tab1第一个</item>
    <item>tab2第二个</item>
    <item>tab3第三个</item>
    <item>tab4第四个</item>
</string-array>

  然后再代码中写一个遍历函数添加即可。

  小菜鸟很认真地将滑动页面思路整理了一下，欢迎交流学习，谢谢支持！