大家好：凡是过往，皆为序章。自力更生，艰苦奋斗！衷心希望各位坚守本心，实现中华民族伟大复兴的中国梦！

一、问题背景

上一篇文章向大家介绍了如何解决Android Studio不提示控件的XML属性。本篇文章向大家介绍TabLayout联动ViewPager实现拇指滑动切换页面的效果。如果您正在为不知道如何实现View的切换效果而迷茫，那么在下衷心希望能够帮助此刻茫然的您。显示效果如下所示：

二、实现TabLayout联动ViewPager的流程

1、创建布局

在XML文件中，TabLayout应该嵌入到ViewPager内。这样的话，TabLayout就和ViewPager产生了联动关系。从而避免在java代码中使用setupWithViewPager（）来让TabLayout和ViewPager产生联动关系。具体代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_marginBottom="20dp"tools:context=".demo01.MainActivity">//设置ViewPager，并占据整个布局<androidx.viewpager.widget.ViewPagerandroid:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="match_parent">//ViewPager绑定TabLayout<com.google.android.material.tabs.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent" /></androidx.viewpager.widget.ViewPager></androidx.constraintlayout.widget.ConstraintLayout>

2、在layout文件夹中创建ViewPager的布局

在创建MainActivity的布局文件之后，现在来创建ViewPager的布局。在layout文件夹中创建了4个布局文件，它们分别对应TabLayout的“消息”、“通讯录”、“发现”和“我的”。待会儿，这4个布局文件会被inflate（）方法动态加载到View（是属于ViewPager的）当中。因为这4个布局文件的代码是类似的，所以这里只给出 layout01.xml 文件的具体代码。如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="First View"android:textSize="50sp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

在约束布局ConstraintLayout当中，仅仅在父布局中间放置了一个写有First View的TextView，来表明当前View是第一个View。其余布局文件layout03.xml、layout04.xml、layout05.xml的具体代码是类似的，在这里就不再全部给出。为方便大家理解，现给出layout文件夹的目录结构。如下图所示：

3、在MainActivity中添加Data和绑定Adapter

在MainActivity中，获取到XML文件中的TabLayout和ViewPager。然后添加Data和绑定Adapter。具体代码如下所示：

        mViewPager = findViewById(R.id.view_pager);mTabLayout = findViewById(R.id.tab_layout);//获取LayoutInflaterLayoutInflater layoutInflater = getLayoutInflater();//动态加载View的布局文件View view1 = layoutInflater.inflate(R.layout.layout01, null);View view2 = layoutInflater.inflate(R.layout.layout02, null);View view3 = layoutInflater.inflate(R.layout.layout03, null);View view4 = layoutInflater.inflate(R.layout.layout04, null);//创建存放4个View的列表List<View> listView = new ArrayList<>();//添加ViewlistView.add(view1);listView.add(view2);listView.add(view3);listView.add(view4);//创建存放TabItem标题的列表List<String> listTab= new ArrayList<>();//添加TabLayout中TabItem的标题listTab.add("消息");listTab.add("通讯录");listTab.add("发现");listTab.add("我的");//创建适配器MyPagerAdapter myPagerAdapter = new MyPagerAdapter(listView, listTab, this);//给ViewPager绑定适配器mViewPager.setAdapter(myPagerAdapter);

4、给ViewPager创建适配器

给ViewPager创建适配器，具体代码如下所示：

public class MyPagerAdapter extends PagerAdapter {private List<View> listView;private List<String> listTab;private Context context;public MyPagerAdapter(List<View> listView, List<String> listTab, Context context) {this.listView = listView;this.listTab = listTab;this.context = context;}@Nullable@Overridepublic CharSequence getPageTitle(int position) {return listTab.get(position);}@Overridepublic int getCount() {return listView.size();}@NonNull@Overridepublic Object instantiateItem(@NonNull ViewGroup container, int position) {container.addView(listView.get(position));return listView.get(position);}@Overridepublic void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {container.removeView(listView.get(position));}@Overridepublic boolean isViewFromObject(@NonNull View view, @NonNull Object object) {return view == object;}
}

TabLayout联动ViewPager相关推荐

TabLayout和ViewPager
这里就说下tablayout+viewpager的实现方式:tablayout是android5.0推出来的一个MaterialDesign风格的控件,是专门用来实现tab栏效果的:功能强大,使用方便 ...
Android之TabLayout和ViewPager组合跳转到指定页面
1 问题 TabLayout和ViewPager组合跳转到具体一个页面 2 解决办法 viewPager?.setCurrentItem(index) index为0说明是第一页,如果是1的话就是第二 ...
TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签
首先来看下实现的效果吧: 最近在项目中实现这个效果的时候.尽管自己磕磕绊绊的实现了,可是知识确实模模糊糊的,今天天气异常的冷,在加上这个知识不太熟练,实在是没有心情进行接下来的计划,干脆借着这个时间, ...
Android TabLayout和ViewPager
In this tutorial we'll be implementing a ViewPager under the TabLayout that we'd already implemented ...
RecycleView与TabLayout联动展示更多功能列表页面的实现
一.前言对于更多功能页面,使用RecycleView与TabLayout联动方式实现是比较常见的,先上效果图(请大佬们忽略gif的水印) 单独使用TabLayout和RecycleView都是比较容 ...
Android MVVM框架搭建（九）TabLayout、ViewPager、城市地图天气切换
Android MVVM框架搭建(九)TabLayout.ViewPager.城市地图切换前言正文一.父Fragment加载子Fragment ① Fragment适配器 ② TabLayout ...
TabLayout和ViewPager实现今日头条效果
一.效果图二.实现原理 TabLayout+ViewPager+Fragment 三.实现 MainActivity.java public class MainActivity extends A ...
android——CollapsingToolbarLayout、半透明、TabLayout、ViewPager、顶部状态栏透明，顶部和滑动互动
效果图: xml代码: <?xml version="1.0" encoding="utf-8"?> <androidx.coordinato ...
android viewpager2,Android-ViewPager2的使用
一.ViewPager2的变化 ViewPager2是用来替换ViewPager的,ViewPager2是final修饰的,直接继承ViewGroup,其内部是使用RecyclerView,ViewP ...

TabLayout联动ViewPager