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

本文主要是介绍TabLayout+ViewPager+Fragment 快速实现标题切换效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

博主声明：

转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。

本文首发于此博主：威威喵 | 博客主页：https://blog.csdn.net/smile_running

感受 Material Design UI 魅力，你不能错过的 Material Design 全系列文章：

Material Design 之一 BottomNavigationView + ViewPager + Fragment 仿微信底部导航效果

Material Design 之二 Toolbar + DrawerLayout + NavigationView 实现QQ侧拉抽屉效果

Material Design 之三 TabLayout + ViewPager + Fragment 今日头条标题切换效果

Material Design 之四 SwipeRefreshLayout + CardView + RecyclerView 精美瀑布流效果

Material Design 之五 CoordinatorLayout + AppBarLayout 提供最佳浏览体验

Material Design 之六 CollapsingToolbarLayout + FloatingActionButton 打造精美详情界面

Material Design 之七 TextInputLayout+TextInputEditText 打造精美的登录界面

继续我们的 Material Design 大杂烩篇，这次要加入的是 TabLayout 这个控件的使用，这个 TabLayout 到底是什么样的效果呢，比如今日头条 app 上面的标题切换效果，配合 ViewPager 简单粗暴的实现一个美观联动的效果。代码沿用我们上篇留下的：最佳 UI 之 Toolbar+DrawerLayout+NavigationView 实现抽屉效果

基于上次的代码，我们在 FragmentOne 中加入了一个 ViewPager，在此 ViewPager 中使用 TabLayout 以达到这样的效果，效果如下：

首先呢，这个控件使用起来并不难，算是非常简单的了，不过这个 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.TabLayoutandroid:id="@+id/tab_layout"app:tabSelectedTextColor="#9966cc"app:tabTextColor="#a2c699"android:layout_width="match_parent"android:layout_height="56dp" /><android.support.v4.view.ViewPagerandroid: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"><TextViewandroid: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@Overridepublic Object instantiateItem(@NonNull ViewGroup container, int position) {container.addView(mViews.get(position));return mViews.get(position);}@Overridepublic void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {container.removeView(mViews.get(position));}@Nullable@Overridepublic CharSequence getPageTitle(int position) {return mTitles.size() > 0 ? mTitles.get(position) : "";}@Overridepublic int getCount() {return mViews.size();}@Overridepublic 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@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_one, container, false);return view;}@Overridepublic 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()).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);}
}

好了，运行一下你就会看到上面的效果了。

最后，我们看看 TabLayout 中为我们提供了哪些方法：