Android中高级联动控件 RecyclerView+ViewPager嵌套滑动

最新推荐文章于 2022-10-27 16:57:31 发布
最新推荐文章于 2022-10-27 16:57:31 发布
阅读量2.3k 收藏 12
点赞数 1
分类专栏： android 文章标签： android java viewpager app android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35624842/article/details/107868290
版权

先看下最终效果：
在这里插入图片描述

仿TapTap游戏商城首页多控件渐隐式滑动效果—
从视频里面可以看到首页滑动时一共有四组控件在进行联动：

  1. 顶部的NavigationBar会随着Content列表向上滑动时渐渐隐去
  2. Header的背景整体会随着下面的Content列表而逐渐上划消失
  3. Header底部的下载Group会随着滑动距离渐渐淡化
  4. 当Content列表滑动快到顶部时之前隐去的NavigationBar设置了背景且会从屏幕外逐渐展示出来并回到原来的位置

其次当页面进行左右切换时顶部的NavigationBar中的指示器也会跟随页面左右滑动的距离而进行颜色渲染

技术点：
需要自定义可变多种颜色的TextView（参考我的另一篇文章：自定义一个可变颜色的TextView）
需要自定义页面联动的Behavior

界面结构：

  • Activity整体分为上下两部分，页面切换ViewPager+Fragment，顶部的NavigationBar是一个单独的RelativeLayout

  • 在第一个Fragment中根部局使用CoordinatorLayout协调器Header背景使用AppBarLayout进行联动，内容列表使用RecyclerView，下载的Group使用RelativeLayout

  • 第二个Fragment比较简单，顶部的导航栏背景使用了一个带背景颜色的View，下面的内容列表是RecyclerView

通过上面的布局后它们单独的样子分别是这样的
Activity布局

page1
page2
通过不同页面的分层叠加最终呈现出带有导航栏效果的页面

首页滑动：
导航栏和下载Group的联动的锚点是RecyclerView并且会根据滑动距离来计算出自身所要联动的比例，而间距则是RecyclerView距离顶部的Y轴距离（也是整个Header的高度）
在布局中设置依赖关系

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:name="com.demo.myviews.fragments.RecommentFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

<!--  header  -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        app:elevation="0dp"
        android:layout_height="300dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                android:scaleType="centerCrop"
                android:src="@mipmap/game_banner"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>


        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>


<!-- 列表 -->
    <androidx.recyclerview.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/fragment_recomment"/>

<!--  navigationBar背景  -->
    <LinearLayout
        android:background="@color/colorAccent"
        app:layout_behavior="com.demo.myviews.taptap.behavior.NavigationBarBehavior"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>


<!-- 下载Group -->
    <RelativeLayout
        app:layout_behavior="com.demo.myviews.taptap.behavior.DownloadGroupBehavior"
        android:id="@+id/rlTitleBar"
        android:layout_marginTop="200dp"
        android:layout_width="match_parent"

        android:layout_height="80dp">


        <TextView
            android:textStyle="bold"
            android:layout_marginBottom="50dp"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:text="疯狂的小镇"
            android:textColor="@android:color/white"/>

        <TextView
            android:gravity="center"
            android:drawableTop="@mipmap/add"
            android:layout_marginStart="50dp"
            android:layout_alignParentBottom="true"
            android:text="关注"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:layout_width="50dp"
            android:layout_height="30dp"/>

        <TextView
            android:gravity="center"
            android:drawableTop="@mipmap/add"
            android:layout_marginEnd="50dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:text="详情"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:layout_width="50dp"
            android:layout_height="30dp"/>

        <com.demo.myviews.widget.DownloadBtn
            app:txtSize="12dp"
            app:loadingColor="@color/detail_downloadbutton_processing"
            app:normalColor="@color/colorAccent"
            app:finishColor="@color/detail_comment_user_level_titel_color"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:layout_width="100dp"
            android:layout_height="30dp"/>

    </RelativeLayout>



</androidx.coordinatorlayout.widget.CoordinatorLayout>

NavigationBar的联动器逻辑

自定义一个NavigationBarBehavior设置联动依赖为列表并获取到navigationBar对象

    @Override
    public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency) {
        if (navigationBar == null){
            ViewGroup rootView = (ViewGroup) parent.getParent().getParent();
            navigationBar = rootView.findViewById(R.id.rlNavigationBar);
            Log.d(TAG, "layoutDependsOn: " + navigationBar);
        }
        return dependency.getId() == R.id.list;
    }

因为navigationBar和RecyclerView不在同级所以需要通过parent来获取

之后在所依赖联动的View发生改变时进行距离获取和比例计算（onDependentViewChanged）
步骤是：

       @Override
    public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency) {
        //        获取原始距离
        if (translationY == 0){
            translationY = (int) dependency.getY() - child.getHeight();
            Log.d(TAG, "translationY: " + translationY);
        }
//        获取当前距离content列表的距离
        float depY = dependency.getY() - child.getHeight();
//        除以2用于区分滑动到上半部还是下半部
        int ban = translationY / 2;
        float offset = 0;
        int color = barColor;

//        处于原始距离的下半部移动  减去10是为了修复移到屏幕外后还有几像素的露白
        if (depY > (ban-10)){
//            求出移动距离占child的比重  因为除的是原始距离所以需要乘以2是才能形成视觉差
            offset = (depY / translationY * child.getHeight() - child.getHeight()) * 2;
            color = Color.TRANSPARENT;
        }else {
//            处于原始距离的上半部移动
//            当滑动到上半部时直接使用一半header的高度计算出占child的比重
            offset = depY / ban * child.getHeight();
//            由于是从屏幕外到屏幕内 所以需要从负值到0
            offset = offset > 0 ?  -offset:0;
        }
//        Log.d(TAG, "depY: " + depY + " ban: " + ban + " offset: " + offset);
        child.setBackgroundColor(color);
        child.setTranslationY(offset);
        navigationBar.setTranslationY(offset);
        return super.onDependentViewChanged(parent, child, dependency);
    }

上面代码整体的步骤是

  • 获取列表距离顶部的原始距离
  • 获取列表当前距离顶部的距离
  • 使用原始距离÷2再和当前距离相比较用于区分滑动到了原始距离的上半部还是下半部
  • 计算出NavigationBar需要上/下偏移的比例和颜色
  • 最后设置颜色和偏移量

下载Group的联动器逻辑

自定义DownloadGroupBehavior并设置联动依赖

    @Override
    public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency) {
        return dependency.getId() == R.id.list;
    }

下载Group所依赖的也是列表，之后在onDependentViewChanged列表变化时获取滑动距离和计算偏移量

    @Override
    public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency) {
//        获取原始距离
        if (contentY == 0){
            contentY = dependency.getY();
        }
//        获取移动的距离
        float moveOffset = contentY - dependency.getY() ;
//        根据距离计算出占child整个高度的比例
        float alpha = moveOffset / child.getHeight();
//        1-当前的比例等于要设置的透明度
        child.setAlpha(1-alpha);
//        设置偏移，向上移动超出了child的Y值的0点坐标，所以应该设置为负值
        child.setTranslationY(-moveOffset);

        return super.onDependentViewChanged(parent, child, dependency);
    }

下载Group的整体处理步骤是

  • 布局初始化完成后获取列表距离顶部的原始距离
  • 获取列表当前移动的距离计算出偏移量
  • 根据偏移量计算出透明度
  • 给child（下载Group）设置透明效果和偏移量

到这第一个Fragment页面的几个滑动效果就基本完成了。

再来看下ViewPager左右切换时的NavigationBar位置如何变化
从Fragment1切换到Fragment2后NavigationBar的位置是固定的就是处于顶部的位置，从Fragment2切回到Fragment1时NavigationBar的位置要回到原来离开时的位置
实现方式是监听了ViewPager的OnPageChangeListener，通过onPageSelected的回调返回的position进行判断并给NavigationBar重新设置位置，具体代码如下

  @Override
  public void onPageSelected(int position) {
      Log.d(TAG, "onPageSelected: " + position + " Y: " + rlNavigationBar.getTranslationY());
      if (position == 1){
          oldY = (int) rlNavigationBar.getTranslationY();
          rlNavigationBar.setTranslationY(0);
      }else {
          rlNavigationBar.setTranslationY(oldY);
      }
  }

代码地址：欢迎star或review

字节晃动
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android AppBarLayout+TabLayout+RecyclerView+ViewPager+Fragment
10-08
但是当标题栏移动到顶部时是要悬浮在顶部，下面无论如何上滑标题拦都不再移动，当向下滑动时知直到出现RecyclerView的第一条时标题栏才会随着向下移动AppBarLayout+TabLayout+RecyclerView+ViewPager+Fragment
Android 中ViewPager嵌套RecyclerView出现滑动冲突的解决方案
路宇的博客
03-01 8037
应用场景： ViewPager嵌套一个RecyclerView和正常的LinearLayout布局页面，实现左右滑动效果。当左滑RecyclerView页面想要实现左右切换页面的效果，出现滑动冲突的问题。 解决方案如下： 1、自定义CustomViewPager继承自ViewPager，重写其中的onInterceptTouchEvent()拦截触摸事件方法。 /** * 自定义ViewPager，防止RecyclerView与ViewPager之间的滑动冲突 */ public class Custo
RecyclerView实现ViewPager功能
daxiangzaici的博客
06-18 2693
RecylerView介绍 RecylerView是support-v7包中的新组件，是一个强大的滑动组件，与经典的ListView相比，同样拥有item回收复用的功能，这一点从它的名字recylerview即回收view也可以看出。官方对于它的介绍则是：RecyclerView 是 ListView 的升级版本，更加先进和灵活。RecyclerView通过设置LayoutManager，ItemDecoration，ItemAnimator实现你想要的效果。 ...
ViewPager + RecyclerView的显示问题
yjs1129580545的专栏
09-07 7295
Recyclerview 添加viewpager作为头部的显示bug
安卓项目实战之ViewPager+RecycleView实现首页分页的导航菜单
智玲君
10-16 7281
效果图 用过美团和饿了么的app的童鞋应该清楚这一功能。首页菜单可以分页切换，类似我们的banner广告切换效果，只不过只能手动切换。所以整个分页效果，我们可以采用Viewpager实现，里面的菜单项我们则可以采用RecyclerView实现，动态改变里面的菜单项，所以今天我们这个首页分页菜单效果，可以决定采用ViewPager+RecyclerView实现，效果如下： 转载自:https://...
RecyclerView+ViewPager实现App常用滑动标题栏
qq_41904106的博客
03-06 492
废话不多说，先看参考项目——微博： 第二个参考项是 -----王者营地： 要实现以上项目的ui界面（仅ui界面，不涉及数据、服务）思路很简单，但实现较为困难。 1.滑动标题栏就是一个recyclerview，因为listview不好实现横向滚动、性能也不佳，HorizonScrollView虽然能实现横向滑动，但有一个自带的进度栏影响美观，并且HorizonScrollview对于子项item的识别非常模糊（也不能这么说，主要是我试了后效果很不理想。） 2.滑动标题栏由一个recyclerview构成，
ScrollView+TabLayout+ViewPager+RecyclerView 嵌套实现布局
03-28
手动实现仿京东发现页面效果，使用布局嵌套完成，包括ScrollView+TabLayout+ViewPager+RecyclerView，最后有遗留问题需要处理。详情见博客https://blog.csdn.net/hq942845204/article/details/88844272
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史...实现类似的效果 ，主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
Android使用TabLayou+fragment+viewpager实现滑动切换页面效果
08-30
Android 使用 TabLayout+Fragment+ViewPager 实现滑动切换页面效果 Android 是一个流行的移动操作系统，它提供了多种方式来实现滑动切换页面效果。其中，使用 TabLayout+Fragment+ViewPager 是一种常见的实现方法...
viewpager+recyclerview联动
WhuiQi的博客
03-08 1871
MainActivity package wanghuiqi.bawie.whq_scendweek_liandong; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support...
viewpager与recyclerview
yu_duan_hun的博客
12-27 2456
经常有需求要求不同标签页加载的列表类型类似，比如标签1是国内新闻，标签2是国外新闻，标签3是娱乐新闻。。。 实际上每个列表都是相同方式加载的。为了减少控件的重新写的问题，所以用了同一个recyclerview,没有使用viewpager，后面公司又改需求了，郁闷。。。 以下，比较同类标签页（同样格式显示列表，只不过传的某个参数不同，导致获取的列表不同）1.不使用viewpager，使用同一个re
RecyclerView实现ViewPager效果以及自定义View
刘旭
05-20 1317
一.效果图与需求 需求就是图中的效果，最大的那个item是选中的item，其余的是普通的item，并且滑动过程中随收视伴随item缩放的效果，先声明下，这个不是动画效果，只是根据手势滑动的距离不断设置item缩放的比例。 二.实现思路与需求分析 1.需求分析 刚开始想这个效果是不是可以用属性动画中的缩放动画实现，但是用动画实现的话需要设置动画的执行时间，ValueAnimator只...
RecyclerView与ViewPager2
m0_61130325的博客
10-27 813
适配器里面的东西完全不用改变在MainActivity里面加上} } });fragments . add(BlankFragment . newInstance("好好好" , "1"));fragments . add(BlankFragment . newInstance("棒棒棒" , "2"));fragments . add(BlankFragment . newInstance("好好" , "1"));}至于为什么这么写呢,我只能说这是我为数不多会的了。
Android实战开发---滑动分类列表（TabLayout+ViewPager+RecyclerView）
yunyanchengyu114的博客
01-18 4444
TabLayout是一个滑动的标签组件，他是继承自HorizontalScrollView（横向滑动视图），所以它通常适合滑动组件ViewPager配合使用。
安卓 RecycleView、Viewpager、Viewpager2基础使用与详解
ojbk99267710的博客
08-05 2434
安卓RecycleView、Viewpager、Viewpager2基础使用与详解
APP首页效果实战RecyclerView+ViewPager+RecyclerView及滑动冲突解决
Plx0303sunny的博客
04-22 1191
背景 目前市面上大多数App首页加推荐效果基本实现方式为：RecyclerView + ViewPager + RecyclerView。其中面临的最主要问题就是RecyclerView同方向滑动冲突解决。 效果 前言 滑动冲突解决方案目前最流行的方式NestedScrollingParent和NestedScrollingChild，大家有不了解的可以手动google一下相关知识。 而且最主要...
Android ： ViewPager+RecyclerView的联动效果
热门推荐
qq_27263999的博客
10-13 1万+
今天有个需求，上面是一组图片，下面也是一组图片，要求上面和下面的图片都能滑动，然后2者之间能联动，通俗讲就是上面的选中了下面也要跟着滑到那个图片，然后下面的图片滑动了上面也要跟着选中那个图片，所以产生了联动效果。 类似这样的，然后我就开始想了  上面一个recyclerview 下面一个viewpager 好像可以哦，然后就开始啪啦啪啦的写了，先把能看到的先写出来（viewpager动态
viewpager + RecyclerView（探探）
u013255337的博客
03-01 1053
主要实现的效果图为：跟探探效果差不多，不过在外部加多了一个viewpager，类似探探的效果图，这里就不贴了，主要是借助recyclerview.layoutManager去处理，在网络上也可以搜索得到，git上有一个ZLayoutManager-master,有需要的可以留言我，我发送给你，运行下来也是效果挺好，前提需要引入一个 layoutmanager的module，代码编程主要是这样：pa...
ScrollView嵌套RecyclerView、ViewPager引发的滑动问题
最新发布
06-07
在ScrollView中嵌套RecyclerView或ViewPager可能会引发滑动冲突的问题。这是因为ScrollView是一个可滚动的ViewGroup，它会拦截所有的滚动事件。而RecyclerView和ViewPager也是可滚动的ViewGroup，它们也会拦截滚动事件。因此，当它们共存时，就可能会出现滑动冲突的情况。 以下是一些解决滑动冲突问题的方法： 1. 使用NestedScrollView替代ScrollView，它可以解决ScrollView嵌套RecyclerView或ViewPager引起的滑动冲突问题。 2. 在RecyclerView或ViewPager中重写onInterceptTouchEvent方法，返回false，使它们不拦截滚动事件。 3. 在ScrollView中重写onInterceptTouchEvent方法，判断如果是滑动事件，则将事件交给子View处理，例如RecyclerView或ViewPager。 4. 在RecyclerView或ViewPager中使用setNestedScrollingEnabled方法，让它们支持嵌套滑动。 5. 在RecyclerView或ViewPager中使用addOnItemTouchListener方法，给RecyclerView或ViewPager添加触摸事件监听器，监听滚动事件，并将事件交给父View处理。 以上是一些解决滑动冲突问题的常用方法，您可以根据具体情况选择合适的方法进行解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值