ViewPager2和TabLayout协同使用

一、ViewPager2的基本用法

使用前先添加依赖:

   implementation 'androidx.appcompat:appcompat:1.4.0' // AndroidX AppCompat
    implementation 'com.google.android.material:material:1.4.0' // Material Design Components

1、制作Fragment

首先制作一个Fragment的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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="SSSSS"
        android:textSize="19sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后使用Fragment类绑定这个布局

public class HomeFragment extends Fragment {
    FragmentBinding binding;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        binding = FragmentBinding.inflate(inflater,container,false);
        return binding.getRoot();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        binding = null;
    }
}

2、制作Adapter

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

自定义自己的Adapter继承FragmentStateAdapter

制作一个fragmentList管理所有的fragment

public class MyPagerAdapter extends FragmentStateAdapter {

    List<Fragment> fragmentList;    //管理所有的fragment

    public MyPagerAdapter(@NonNull FragmentActivity fragmentActivity, List<Fragment> fragmentList) {
        super(fragmentActivity);
        this.fragmentList = fragmentList;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }


    @Override
    public int getItemCount() {
        return fragmentList != null ? fragmentList.size() : 0;
    }
}

createFragment:用于返回指定的frgment界面

getItemCount:用于加载容器大小

除此之外,FragmentStateAdapter有三个构造方法剩下两个分别是:

public FragmentStateAdapter(@NonNull Fragment fragment)

public FragmentStateAdapter(@NonNull FragmentManager fragmentManager,@NonNull Lifecycle lifecycle)

FragmentStateAdapter(Fragment fragment)

这个构造方法通常用于在 Fragment 内部创建 FragmentStateAdapter,并将其附加到该 Fragment 的生命周期。

public class MyFragment extends Fragment {
    private ViewPager2 viewPager;
    private FragmentStateAdapter adapter;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_layout, container, false);

        // 初始化 ViewPager2
        viewPager = rootView.findViewById(R.id.viewPager);

        // 创建适配器并将其附加到当前 Fragment 的生命周期
        adapter = new MyFragmentStateAdapter(this);
        viewPager.setAdapter(adapter);

        return rootView;
    }
}

FragmentStateAdapter(FragmentManager fragmentManager, Lifecycle lifecycle)

这个构造方法通常用于在活动中创建 FragmentStateAdapter,并通过提供 FragmentManagerLifecycle 对象来管理 Fragment 的生命周期。

public class MainActivity extends AppCompatActivity {
    private ViewPager2 viewPager;
    private FragmentStateAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化 ViewPager2
        viewPager = findViewById(R.id.viewPager);

        // 创建适配器并将其附加到活动的生命周期
        adapter = new MyFragmentStateAdapter(getSupportFragmentManager(), getLifecycle());
        viewPager.setAdapter(adapter);
    }
}

3、使用Adapter加载fragment页面

        List<Fragment> fragmentList = new ArrayList<>();

        fragmentList.add(new HomeFragment());
        fragmentList.add(new HomeFragment());
        fragmentList.add(new HomeFragment());
        fragmentList.add(new HomeFragment());
        fragmentList.add(new HomeFragment());
        fragmentList.add(new HomeFragment());
        fragmentList.add(new HomeFragment());
        fragmentList.add(new HomeFragment());

        MyPagerAdapter adapter = new MyPagerAdapter(this,fragmentList);

        //禁用预加载
        binding.viewPager.setOffscreenPageLimit(ViewPager2.OFFSCREEN_PAGE_LIMIT_DEFAULT);


        binding.viewPager.setAdapter(adapter);

预加载是在页面还未滑动时,提前加载页面。一般默认加载1个页面。

FragmentStateAdapter内部封装有 FragmentManagerFragmentTransaction,用于管理Fragment;

使用FragmentManager可以根据ID或TAG来查找Fragment , 动态添加、删除、替换

让Fragment 成为ViewPager的一页时,FragmentManager会一直保存管理创建好了的Fragment,即使当前不是显示的这一页,Fragment对象也不会被销毁,在后台默默等待重新显示。但如果Fragment不再可见时,它的视图层次会被销毁掉,下次显示时视图会重新创建

二、ViewPager2和TabLayout协同使用

1、制作TabLayout与ViewPager2布局文件

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabMode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#1E90FF"
            app:tabIndicatorAnimationMode="elastic"
            app:tabSelectedTextColor="#B22222"
            app:tabUnboundedRipple="true"
            app:tabGravity="center"
            app:tabMode="auto" >
        </com.google.android.material.tabs.TabLayout>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"/> 
        
    <!-- ViewPager2内部通过RecyclerView 所以需要通过orientation来设置页面切换方向-->
        
    </LinearLayout>

**tabIndicatorAnimationMode ** :设置加载动画样式,elastic表示粘粘性动画,linear表示线性动画

tabIndicatorColor :指示器颜色

tabIndicatorHeight :指示器高度

tabIndicatorFullWidth :设置为false 则指示器跟文本宽度一致

tabUnboundedRipple :设置为true点击时会有一个水波纹效果

tabGravity :可设置center或fill;center指的是居中显示,fill指的是沾满全屏。

tabMode :可设置fixed和 scrollable;fixed:指的是固定tab;scrollable指的是tab可滑动。

tabTextColor :tab文字颜色

tabSelectedTextColor :选中时的tab颜色

image-20231109193100489

关于更多的TabLayou的使用可以参考:Android控件-TabLayout使用介绍

2、绑定TabLayout到ViewPager2

2.1 动态自定义Tab

这里采取了自定义TabView的方式,同样的也可以直接操作tab修改样式。

        new TabLayoutMediator(binding.tabMode, binding.viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {

                //自定义TabView
                TextView tabView = new TextView(MainActivity.this);

                tabView.setText("Fragment " + position);

                //将tabbView绑定到tab
                tab.setCustomView(tabView);
            }
        }).attach();

注意一定要使用.attach()进行启动。

2.2 静态自定义Tab——tabTextAppearance

设置文字的大小和样式,在values下新建文件如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="tabDome">
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
    </style>
</resources>

在TabLayout中导入文件即可

image-20231109202114266

3、Viewpager2的滑动监听事件

ViewPager2.OnPageChangeCallback有三个构造方法:

        binding.viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {

            //该方法开始滑动到滑动结束前不断调用
            // 参数一:position表示当前页面的位置(当前页面在翻页适配器中的下标,索引),因为不断调用,position也可能表示目标页面的下标
            // 参数二:positionOffset表示页面偏移的百分比,翻页时不断增大(不断趋近1),最后翻页完成时突变成0
            // 这个参数在左滑时由1趋近0,右滑由0趋近1
            // 参数三:positionOffsetPixel表示页面也已的像素数,变化趋势和positionOffset一样
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            //该方法在页面切换成功后调用(滑动前与滑动后不是同一页面)
            //position表示当前页面在适配器中的下标,索引
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
            }

            //该方法在页面滑动状态改变时调用
            // ViewPager.SCROLL_STATE_IDLE表示空闲状态,当前页面处于静止状态,没有要翻页的趋势
            // ViewPager.SCROLL_STATE_DRAGGING表示拖动状态,用户正在拖动页面,准备进行翻页滚动
            // ViewPager.SCROLL_STATE_SETTLING表示滚动状态,页面正在自动滚动到目标页面
            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });

3.1 使用动态方法实现字体大小颜色变化

监听ViewPager2的页面滑动实现修改tab

        //viewPager 页面切换监听
        binding.viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            
            //用于回调ViewPager2的当前页面,当页面发送变化就会调用这个方法onPageSelected
            @Override
            public void onPageSelected(int position) {
                //获取总的TabLayout的个数
                int tabCount = binding.tabMode.getTabCount();

                //遍历选择所有的Tab,如果判断是当前的Tab则进行相关操作,不是则还原操作
                for (int i = 0; i < tabCount; i++) {
                    TabLayout.Tab tab = binding.tabMode.getTabAt(i);    //取得tab
                    
                    //通过tab获取tabView
                    TextView tabView = (TextView) tab.getCustomView();

                    if (tab.getPosition() == position) {
                        tabView.setTextSize(20);
                        tabView.setTypeface(Typeface.DEFAULT_BOLD);
                        tabView.setTextColor(Color.parseColor("#B22222"));
                    } else {
                        tabView.setTextSize(15);
                        tabView.setTypeface(Typeface.MONOSPACE);
                        tabView.setTextColor(Color.parseColor("#000000"));

                    }

                }

            }
        });

3.2 使用静态的方法实现字体大小和颜色变化

首先设置静态的style选项卡,在values下新建一个xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TabLayoutTextSelected">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">#B22222</item>
    </style>

    <style name="TabLayoutTextUnSelected">
        <item name="android:textSize">15sp</item>
        <item name="android:textColor">#000080</item>
    </style>

</resources>

然后在TabLayout的布局文件中设置初始状态的tab颜色字体

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabMode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#1E90FF"
            app:tabUnboundedRipple="true"
            app:tabGravity="center"
            app:tabMode="auto"
            app:tabTextAppearance="@style/TabLayoutTextUnSelected">	//注意在这个地方使用tabTextAppearance设置初始状态tab的文字效果
        </com.google.android.material.tabs.TabLayout>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"/>

    </LinearLayout>

监听TabLayout实现修改,TabLayout监听事件有三个Override方法,当然这里也可以继续使用ViewPager2页面的监听方法实现。

        binding.tabMode.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //选中时的变化
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                // 创建新的 TextView 实例,并设置样式和文本
                TextView selectedTextView = new TextView(MainActivity.this);
                selectedTextView.setTextAppearance(R.style.TabLayoutTextSelected);	//在这里动态使用刚刚的style文件
                selectedTextView.setText("Fragment " + tab.getPosition());	//设置文字内容,tab因为是重新加载的textView内容,所以原来的数据被覆盖掉了
                tab.setCustomView(selectedTextView);
            }

            //未选中时的变化
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                // 清除未选中标签的自定义视图
                tab.setCustomView(null);
            }

            //重复选中的变化,当用户再次点击已经选中的Tab时,这个方法就会被调用。
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                // 处理标签重新选择,如果需要
            }
        });

注意点:

1、在onTabSelected中重新设置加载的文本内容,否则原数据会被覆盖,出现这样的情况

815d22199678c9eea892ad0d5d700517

2、在onTabUnselected中一定要清除覆盖在tab的自定义视图否则视图会不停重复的加在tab上面,出现这样的情况:

f9a347c9e0b08ec6b09f4308b9b8fc44

4、TabLayout的监听事件

        binding.tabMode.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            TextView textView = new TextView(MainActivity.this);
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //选中时的变化

            }

            public void onTabUnselected(TabLayout.Tab tab) {
                //未选中的变化
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //重复选中的变化,当用户再次点击已经选中的Tab时,这个方法就会被调用。
            }
        });

5、禁止Viewpager2左右滑动翻页

        //false表示禁止,true表示允许
        binding.viewPager.setUserInputEnabled(false);

此时就只能通过点击Tab才能加载Fragment.

6、TabLayout+Viewpager2效果展示

e5da21bb-7c36-4e16-999e-b1ab7c7c173c


























本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/137709.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux socket编程(1):套接字、字节序和地址结构体

套接字(socket)是一种使用标准Unix文件描述符与其他程序进行通信的方式&#xff0c;它在实际的应用中都十分常用。所以从这一篇文章开始&#xff0c;我将详细介绍一下Linux环境下的socket的用法。本篇文章将介绍套接字、字节序和地址结构体的相关知识。 文章目录 1 什么是套接字…

使用Python分析时序数据集中的缺失数据

大家好&#xff0c;时间序列数据几乎每秒都会从多种来源收集&#xff0c;因此经常会出现一些数据质量问题&#xff0c;其中之一是缺失数据。 在序列数据的背景下&#xff0c;缺失信息可能由多种原因引起&#xff0c;包括采集系统的错误&#xff08;例如传感器故障&#xff09;…

Day28力扣打卡

打卡记录 给小朋友们分糖果 II&#xff08;容斥原理&#xff09; 链接 大佬的题解 def c2(n: int) -> int:return n * (n - 1) // 2 if n > 1 else 0class Solution:def distributeCandies(self, n: int, limit: int) -> int:return c2(n 2) - 3 * c2(n - limit …

【Opencv】cv::dnn::NMSBoxes()函数详解

本文通过原理和示例对cv::dnn::NMSBoxes&#xff08;&#xff09;进行解读&#xff0c;帮助大家理解和使用。 原理 cv::dnn::NMSBoxes是OpenCV库中的一个函数&#xff0c;用于在目标检测中处理多个预测框。在目标检测中&#xff0c;模型可能会为同一个物体生成多个预测框&…

Docker的本地镜像发布到阿里云或者私有库步骤

学习笔记来源Docker 本地镜像发布到阿里云 1、生成镜像&#xff08;使用commit命令&#xff09; 创建阿里云仓库镜像 阿里云开发者平台 https://promotion.aliyun.com/ntms/act/kubernetes.html 创建仓库镜像 选择控制台&#xff0c;进入容器镜像服务 选择个人实例 命名空…

阿里云国际站:密钥管理服务

文章目录 一、密钥管理服务的概念 二、密钥管理服务的功能 三、密钥管理服务的优势 一、密钥管理服务的概念 密钥管理服务KMS&#xff08;Key Management Service&#xff09;是您的一站式密钥管理和数据加密服务平台、一站式凭据安全管理平台&#xff0c;提供简单、可靠、…

【C++】【Opencv】minMaxLoc()函数详解和示例

minMaxLoc&#xff08;&#xff09;函数 是 OpenCV 库中的一个函数&#xff0c;用于找到一个多维数组中的最小值和最大值&#xff0c;以及它们的位置。这个函数对于处理图像和数组非常有用。本文通过参数和示例详解&#xff0c;帮助大家理解和使用该函数。 参数详解 函数原型…

【Opencv】图像融合addWeighted()函数示例和详解

本文通过原理和示例对addWeighted&#xff08;&#xff09;函数进行详解&#xff0c;&#xff0c;并通过改变融合系数展示多个结果&#xff0c;帮助大家理解和使用。 目录 函数原理示例权重&#xff08;0.5,0.5&#xff09;权重&#xff08;0.8,0.2&#xff09;权重&#xff08…

jupyter lab配置列表清单

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

Leetcode_50:Pow(x,n)

题目描述&#xff1a; 实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000示例 2&#xff1a; 输入&#xff1a;x 2.10000, n 3 输出&#xff1a;9.26100示例 3&#xff1a; 输入&…

【Linux】第十三站:进程状态

文章目录 一、进程状态1.运行状态2.阻塞状态3.挂起状态 二、具体Linux中的进程状态1.Linux中的状态2.R状态3.S状态4.D状态5.T、t状态6.X状态(dead)7.Z状态&#xff08;zombie&#xff09;8.僵尸进程总结9.孤儿进程总结 一、进程状态 在我们一般的操作系统学科中&#xff0c;它…

电子学会2023年9月青少年软件编程(图形化)等级考试试卷(四级)真题,含答案解析

青少年软件编程(图形化)等级考试试卷(四级) 一、单选题(共10题,共30分) 1. 角色为一个紫色圆圈,运行程序后,舞台上的图案是?( )

C++算法:包含三个字符串的最短字符串

涉及知识点 有序集合 字符串 题目 给你三个字符串 a &#xff0c;b 和 c &#xff0c; 你的任务是找到长度 最短 的字符串&#xff0c;且这三个字符串都是它的 子字符串 。 如果有多个这样的字符串&#xff0c;请你返回 字典序最小 的一个。 请你返回满足题目要求的字符串。…

RGMII回环:IDDR+ODDR+差分接口

目录 一、实验内容二、原理解释三、程序1、顶层文件&#xff1a;2、子模块2.1 oddr模块2.2、iddr顶层模块2.3、iddr子模块 3、仿真4、注意5、下载工程及仿真 一、实验内容 1、通过IDDR和ODDR的方式完成RGMII协议&#xff1b; 2、外部接口使用OBUFDS、IBUFDS转换成差分接口&…

2023/11/12总结

踩坑记录&#xff1a; org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: java.sql.SQLSyntaxErrorException: Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column elm.flavors.id which is …

连通块中点的数量(并查集)

给定一个包含 n 个点&#xff08;编号为 1∼n&#xff09;的无向图&#xff0c;初始时图中没有边。 现在要进行 m 个操作&#xff0c;操作共有三种&#xff1a; C a b&#xff0c;在点 a 和点 b 之间连一条边&#xff0c;a 和 b 可能相等&#xff1b;Q1 a b&#xff0c;询问点…

TensorFlow学习笔记--(3)张量的常用运算函数

损失函数及求偏导 通过 tf.GradientTape 函数来指定损失函数的变量以及表达式 最后通过 gradient(%损失函数%,%偏导对象%) 来获取求偏导的结果 独热编码 给出一组特征值 来对图像进行分类 可以用独热编码 0的概率是第0种 1的概率是第1种 0的概率是第二种 tf.one_hot(%某标签…

木疙瘩踩坑日记-容易忽略的一些BUG

在一开始玩家务必很清楚这三个概念 图形&#xff1a;舞台上元素的最小单位。软件自带的以及外部导入的图片默认都是图形&#xff01;最朴素的元素&#xff01;可以添加预制动画、关键帧动画、进度动画&#xff08;软件自带的形状&#xff09; 元件&#xff1a;一个可以内部封…

阿里云国际站:全球加速GA

文章目录 一、前言 二、阿里云全球加速的概念 三、阿里云全球加速的功能优势 四、阿里云全球加速的原理 五、阿里云全球加速的应用场景 六、写在最后 一、前言 随着互联网的快速发展&#xff0c;网站速度已经成为了用户访问体验的一个重要指标。阿里云加速作为一种新的技…

Web开发:一键复制到剪切板功能实现思路

在很多网页页面中我们都使用到过一键复制内容到剪切板的小功能&#xff0c;那么&#xff0c;具体如何实现呢&#xff1f;下面来讲述基于原生JavaScript API的两种实现思路。 同步方式&#xff1a;document.execCommand 这种方式&#xff1a; ①优点&#xff1a;是最传统的方法…