Android TabLayout 与ViewPager滑动页面的实现

一、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的布局文件

  引用 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 ListmyTitle;
private ListmyFragment;

//懸浮窗
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);
}
 }

三、小结及注意事项

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

  
    tab1第一个
    tab2第二个
    tab3第三个
    tab4第四个

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

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