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);
}
}
---------------------

原文地址:https://www.cnblogs.com/liyanyan665/p/11295992.html

时间: 2024-10-07 11:23:21

TabLayout+ViewPager+Fragment 快速实现标题切换效果的相关文章

Android开发之漫漫长途 Fragment番外篇——TabLayout+ViewPager+Fragment

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解Android 卷Ⅰ,Ⅱ,Ⅲ>中的相关知识,另外也借鉴了其他的优质博客,在此向各位大神表示感谢,膜拜!!! 前言 上一篇文章中我们使用底部导航+Fragment的方式实现了Android主流App中大都存在的设计.并命名其为"Fragment最佳实践",作为想到单独使用Fragment的用

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

关于tablayout+viewpager+fragment配合使用的一点记录

最近在写项目的时候遇到要求使用tablayout和fragment,遇到了这里记录一下大致思路. tablayout是头部可以左右切换的头部控制栏控件,配合viewpager使用,fragment是碎片,可以放在viewpager里面,实现类似网易云音乐首页切换的效果.效果图如下: 首先添在build.gradle里面添加依赖: 1 implementation 'com.android.support:support-v4:28.0.0' 2 implementation 'com.andro

Android滑动导航菜单TabLayout+ViewPager+Fragment

1.主要的Activity--MemberDetailActivity 2.Activity视图的xml文件--R.layout.activity_member_detail 3.自定义的Fragment子类--CustomTrainingFragment 4.Fragment视图的xml文件-- 5.自定义Fragment子类的适配器 //1.MemberDetailActivitypackage com.vimems.coach; import android.os.Bundle; impo

用Fragment实现Tab页面切换效果初步总结

前言: 最近在Android项目中需要在活动中实现多页面切换的功能,第一次是实现的过程中,是让Activity同时去加载三个界面的,通过点击tab按钮对页面设置隐藏和显示,实现页面切换效果,但是后面发现这种实现方式其实存在很多问题: 首先,同时去加载三个页面,切换Activity的速度会变慢,尤其是布局中如果有很多ImageView,ImageButton等使用到图片资源的控件时,切换效果非常不好: 其次,由于使用了很多图片资源,在退出Activity的时候,像Drawable,Bitmap等一

基于ViewPager的一些酷炫切换效果

1.ViewPager可以用于实现类似banner的功能,我曾经在“时间超市”项目中使用过.但如何在此基础上实现一些切换的酷炫效果呢?今天细细品读了鸿洋大神的相关博文,终于学会了如何自定义切换效果. 详见博文:巧用ViewPager 打造不一样的广告轮播切换效果 2.对于ViewPager切换有个很出名的库叫JazzViewPager(点击访问gitHub),有时间去研究一下. 3.在看<Android超高仿QQ附近的人搜索展示>一文时,发觉了SparseArray这个安卓类,并阅读了<

Android :ViewPager+Fragment 实现顶部导航滑动效果

我还不会gif 所以连图表动态 可以滑动的 仔细看底下有滑动条的这是寒假做的一个APP的基本框架 将真啊 虽然效果都做出来了可是学长给了源码啊 所以最近做第二遍!!希望每一个控件都可以实现啊 下面是viewpager+fragment的效果 同样我们先写布局文件 思路就是一个Viewpager适配了五个fragment 底下的选择框是RadioGroup 里面有五个radiobutton activity_main里面就是由这些部分组成的的 代码如下 activity_main: <Linear

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout 一.继承结构 public class TabLayout extends HorizontalScrollView java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.HorizontalScrollView ? android.support.design.widget.TabLayout 二.TabLayou

TabLayout+ViewPager+Fragment制作页卡

本人很懒,直接上代码了. 布局文件: <?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-