TabLayout+ViewPager+Fragment 快速实现标题切换效果

首先呢，这个控件使用起来并不难，算是非常简单的了，不过这个 TabLayout 的 setupWithViewPager 方法有坑，要注意了，具体什么坑，自己踩过才有映像，我这里就不说了，就介绍一下如何使用吧。

在 FragmentOne 中的布局文件里面添加一个 ViewPager 和一个 TabLayout，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
app:tabSelectedTextColor="#9966cc"
app:tabTextColor="#a2c699"
android:layout_width="match_parent"
android:layout_height="56dp" />

<android.support.v4.view.ViewPager
android:id="@+id/one_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tab_layout">

</android.support.v4.view.ViewPager>
</RelativeLayout>
这里的 ViewPager 内部存放的不是 Fragment 了，而是我们的布局文件，里面只要一个 textview 显示区别，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="威威喵 1" />
</RelativeLayout>
由于三个布局文件都基本一样，也没什么好说的。然后，就是 ViewPager 的一个适配器了，这里要把 View 和 TabLayout 的标题传进去，代码如下：

package nd.no.xww.bottomnavigationlayout;

import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

/**
* 功能： ViewPageAdapt
*
* @author : xww
* @created at : 19-3-8
* @time : 下午11:16
*/
public final class ViewPageAdapter extends PagerAdapter {

private List<View> mViews;
private List<String> mTitles;

public ViewPageAdapter(List<View> views) {
this(views, null);
}

public ViewPageAdapter(List<View> views, List<String> titles) {
this.mViews = views;
this.mTitles = titles;
if (mTitles == null) {
mTitles = new ArrayList<>();
}
}

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
container.addView(mViews.get(position));
return mViews.get(position);
}

@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(mViews.get(position));
}

@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mTitles.size() > 0 ? mTitles.get(position) : "";
}

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

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object obj) {
return view == obj;
}
}
getPageTitle 就是去获取标题的方法。然后在 Fragment 中的代码：

package nd.no.xww.bottomnavigationlayout;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

/**
* @author xww
* @desciption : 威威喵
* @date 2019/7/22
* @time 23:40
*/
public class OneFragment extends Fragment {

ViewPager viewPager;
TabLayout tabLayout;
List<View> views;
List<String> titles;

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one, container, false);
return view;
}

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
viewPager = view.findViewById(R.id.one_view_pager);
tabLayout = view.findViewById(R.id.tab_layout);

View viewOne = LayoutInflater.from(view.getContext()).inflate(R.layout.fragment_one_view_1, null);
View viewTwo = LayoutInflater.from(view.getContext(http://www.amjmh.com/v/BIBRGZ_558768/)).inflate(R.layout.fragment_one_view_2, null);
View viewThree = LayoutInflater.from(view.getContext()).inflate(R.layout.fragment_one_view_3, null);

views = new ArrayList<>();
views.add(viewOne);
views.add(viewTwo);
views.add(viewThree);
titles = new ArrayList<>();
titles.add("线性布局");
titles.add("网格布局");
titles.add("瀑布流");

ViewPageAdapter adapter = new ViewPageAdapter(views, titles);

for (String title : titles) {
tabLayout.addTab(tabLayout.newTab().setText(title));
}

tabLayout.setupWithViewPager(viewPager);
viewPager.setAdapter(adapter);
}
}
---------------------