Android如何使用ViewPager2实现页面滑动切换效果

目录
  • 1.引言
  • 2.实现页面滑动切换
    • 2.1 引入ViewPager2库
    • 2.2 使用ViewPager2
    • 2.3 构建Fragment
    • 2.4 继承FragmentStateAdapter
    • 2.5 将ViewPager2与适配器绑定
    • 2.6 垂直方向滑动切换
    • 2.7 Fragment更新
  • 3.总结

1.引言

在很多应用中,我们经常会看到多个页面之间滑动切换的场景,ViewPager2是ViewPager的升级版,本文将简要介绍如何使用ViewPager2、FragmentStateAdapter和Fragment来实现页面之间的滑动切换。

2.实现页面滑动切换

2.1 引入ViewPager2库

要使用ViewPager2,需要引入ViewPager2库,引入方法如下:

implementation "androidx.viewpager2:viewpager2:1.0.0"

2.2 使用ViewPager2

在布局中使用ViewPager2,示例如下:

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

2.3 构建Fragment

本Fragment只为简单演示使用,其布局如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@color/black"/>

</LinearLayout>

ContentFragment类的实现如下:

public class ContentFragment extends Fragment {
    private String content;

    public ContentFragment(String content) {
        this.content = content;
    }

    private TextView tv_content;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_content, container, false);
        tv_content = view.findViewById(R.id.tv_content);
        tv_content.setText(content);
        return view;
    }

    public void setContent(String content) {
        this.content = content;
        tv_content.setText(content);
    }
}

2.4 继承FragmentStateAdapter

创建自定义的类ContentPagerAdapter,让它继承FragmentStateAdapter,并实现createFragment(int position)和getItemCount()方法,示例如下:

public class ContentPagerAdapter extends FragmentStateAdapter {
    private List<ContentFragment> datas;

    public ContentPagerAdapter(@NonNull FragmentActivity fragmentActivity,List<ContentFragment> datas) {
        super(fragmentActivity);
        this.datas = datas;
    }

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

    @Override
    public int getItemCount() {
        return datas.size();
    }
}

2.5 将ViewPager2与适配器绑定

将ViewPager2与适配器绑定后,便可实现页面滑动切换,示例如下:

datas = new ArrayList<>();
datas.add(new ContentFragment("页面1"));
datas.add(new ContentFragment("页面2"));
datas.add(new ContentFragment("页面3"));
datas.add(new ContentFragment("页面4"));
datas.add(new ContentFragment("页面5"));
contentPagerAdapter = new ContentPagerAdapter(this, datas);
viewPager2.setAdapter(contentPagerAdapter);

2.6 垂直方向滑动切换

ViewPager2不仅支持水平方向的滑动,还支持垂直方向的滑动,实现垂直滑动也是相当简单,在布局文件中添加android:orientation="vertical"属性即可,如下所示:

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

或者在代码中调用ViewPager2的setOrientation(ViewPager2.ORIENTATION_VERTICAL)方法也可以让ViewPager2实现垂直方向的滑动。

2.7 Fragment更新

当Fragment集合发生变化需要更新时,使用FragmentStateAdapter进行更新也很便捷,由于ViewPager2是基于RecyclerView实现的,所以更新数据的时候可以调用notifyItemChanged(int position)、notifyItemInserted(int position)等方法进行更新。

3.总结

使用ViewPager2、FragmentStateAdapter和Fragment可以便捷地实现页面之间的滑动切换,它不仅支持水平方向的滑动,还能通过简单的设置就能实现垂直方向的滑动,灵活地运用ViewPager2能实现实际的需求。

到此这篇关于Android如何使用ViewPager2实现页面滑动切换效果的文章就介绍到这了,更多相关Android ViewPager2页面滑动切换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android用viewPager2实现UI界面翻页滚动的效果

    1.先在build.gradle(Module)下添加引用viewPager2的库 implementation 'androidx.viewpager2:viewpager2:1.0.0' 2.在MainActivity下新建一个viewPager2 ViewPager2 viewPager = findViewById(R.id.viewPager); ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(); viewPager.

  • Android编程实现ViewPager多页面滑动切换及动画效果的方法

    本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法.分享给大家供大家参考,具体如下: 一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了,接下来我们就来实现它. 二.在开始前,我们先要认识一个控件,ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 这个附加包是and

  • Android仿今日头条滑动页面导航效果

    最近项目中用到了滑动页面,也就是和目前市场上很火的"今日头条"页面滑动类似,在网上找了一下,大部分都是用ViewPager来实现的,刚开始我用的是ViewPager+ViewGroup,上面的标题按钮用的是HorizontalScrollView,写完之后感觉效果比较生硬,果断换掉,发现了一个效果比较好的第三方,也就是今天的主题:PagerSlidingTabStrip.好了,下面来具体介绍一下PagerSlidingTabStrip,进行一下源码解析. 一.看一下demo的样子吧 二

  • 详解Android ViewPager2中的缓存和复用机制

    目录 1. 前言 2. 回顾RecyclerView缓存机制 3. offscreenPageLimit原理 4. FragmentStateAdapter原理以及缓存机制 4.1 简单使用 4.2 原理 5. 案例讲解回收机制 5.1 默认情况 5.2 offscreenPageLimit=1 总结 1. 前言 众所周知ViewPager2是ViewPager的替代版本.它解决了ViewPager的一些痛点,包括支持right-to-left布局,支持垂直方向滑动,支持可修改的Fragment

  • Android如何使用ViewPager2实现页面滑动切换效果

    目录 1.引言 2.实现页面滑动切换 2.1 引入ViewPager2库 2.2 使用ViewPager2 2.3 构建Fragment 2.4 继承FragmentStateAdapter 2.5 将ViewPager2与适配器绑定 2.6 垂直方向滑动切换 2.7 Fragment更新 3.总结 1.引言 在很多应用中,我们经常会看到多个页面之间滑动切换的场景,ViewPager2是ViewPager的升级版,本文将简要介绍如何使用ViewPager2.FragmentStateAdapte

  • Android应用中利用ViewPager实现多页面滑动切换效果示例

    1.添加android support包 因为上面的几个类都是在android support包中才提供,我们先添加包. 在Eclipse->Window->Android SDK Manager,选择列表中Extras->Android Support Library进行安装.下载完后在android-sdk\extras\android\support目录下,这里我们选择v4版本,进入v4目录,拷贝其中的android-support-v4.jar文件到工程的libs目录(若没有新建

  • Android实现页面滑动切换动画

    本文实例为大家分享了Android实现页面滑动切换动画的具体代码,供大家参考,具体内容如下 实现两个页面滑动切换,一些相册的效果也是如此 一个Activity的界面配置文件 activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

    TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView XML中的布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.design.widget.TabLayout a

  • Android开发之使用ViewPager实现图片左右滑动切换效果

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android编程实现的首页左右滑动切换功能示例

    本文实例讲述了Android编程实现的首页左右滑动切换功能.分享给大家供大家参考,具体如下: 很多软件会选择左右滑动的主界面,实现方式也很多,这里的仅供参考,勿喷. 不多说什么了,相信大家看看代码就明白,自己也不善言辞,望大家谅解. 自定义接口,监听滑动翻页事件: /** 滑动后翻页事件 */ public interface OnViewChangedListener { public void OnViewChanged(int viewId); } 滑动翻页view(滑动翻页不是很灵敏):

  • Android Flutter实现图片滑动切换效果

    目录 前言 SlideTransition 介绍 示例效果实现 总结 前言 我们开始来介绍转换类的动画组件,实际上这类转换动画组件也可以自己通过 AnimatedBuilder 或 AnimatedWidget 完成, Flutter 为了简化开发,提供了不少转换动画组件,这类组件通常命名为 xxTransition.本篇要介绍的就是 SlideTransition,顾名思义,就知道是滑动转换动画.我们本篇来实现两张小姐姐图片的滑动切换,效果如下图所示. SlideTransition 介绍 S

  • jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)

    今天我们继续内容滑动切换效果的第二部分讲解.如今我们的web开发都要适应移动设备,就是说我们的web页面要在移动设备如手机端也能正常访问,所以我将第一部分的基本切换效果做了加强,增加了响应式和触控滑动效果. 效果展示    源码下载 本文是hwSlider-内容滑动切换效果的第二部分,演示DEMO都是基于第一部分内容的基础上的,所以,如果您还没阅读过第一部分的话,请先移步参阅:基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一) 响应式 什么是响应式设计,这里我就不描述了.

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

随机推荐