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

概述首先呢，这个控件使用起来并不难，算是非常简单的了，不过这个 TabLayout 的 setupWithViewPager 方法有坑，要注意了，具体什么坑，自己踩过才有映像，我这里就不说了，就介绍一下如何使用吧。 在 FragmentOne 中的布局文件里面添加一个 ViewPager 和一个 TabLayout，代码如下： <?xml version="1.0" encoding="utf-8"?

首先呢，这个控件使用起来并不难，算是非常简单的了，不过这个 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); }}--------------------- 

总结

以上是内存溢出为你收集整理的TabLayout+ViewPager+Fragment 快速实现标题切换效果全部内容，希望文章能够帮你解决TabLayout+ViewPager+Fragment 快速实现标题切换效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。