解决CoordinatorLayout的动画抖动以及回弹问题

本文探讨在使用CoordinatorLayout实现吸顶效果时遇到的动画抖动和回弹问题。通过分析CoordinatorLayout、AppBarLayout和RecyclerView的Behavior,揭示问题原因并提供解决方案。在动画抖动问题上,主要由AppBarLayout的fling操作和RecyclerView联动引起,可通过自定义Behavior解决。回弹问题可能由于RecyclerView和CoordinatorLayout滑动冲突导致,Google在support-28中已修复此问题。
摘要由CSDN通过智能技术生成

在使用CoordinatorLayout来实现Android中的一种吸顶的时候,遇到了两个CoordinatorLayout的滑动问题,这里做下记录。

这里使用CoordinatorLayout实现的是一个tab吸顶的效果,类似淘宝,京东首页的一个效果。
头部区域展示各种类型banner卡片,中间是类似TabLayout的可点击tab,下面是feed卡片,可以一直下拉加载,并且feed卡片区域使用ViewPager可以支持左右横滑切换tab,另外,就是tab滚动到顶部之后会有个吸顶的效果。

我们在项目中也要实现的效果,一开始我的想法是使用嵌套RecycleView的形式来实现,因为我去调研了下京东和淘宝的首页布局都是这么实现的,京东和淘宝首页实现方式和下面的图类似,外部的整个RecycleView嵌套ViewPager,ViewPager中再有多个RecycleView,这个实现起来稍微有点麻烦,难点是要处理好外部的RecycleView和ViewPager中内部RecycleView的滑动事件传递,这里我们只是简单介绍下,后面我会专门来介绍类似这样的嵌套RecycleView如何实现。

image

接下来是如何采用其他方便的方式来实现类似需求?我想到了CoordinatorLayout,CoordinatorLayout在处理吸顶是有一套已经成熟的方案的。

网上关于CoordinatorLayout的使用有很多不错的文章,这里就不介绍如何使用,关于CoordinatorLayout和Behavior我推荐看看这篇文章针对 CoordinatorLayout 及 Behavior 的一次细节较真

而我们这篇文章主要是讲使用CoordinatorLayout中遇到的问题,问题如何解决以及CoordinatorLayout为什么会有这样的问题。

image

实现这个大概是像上面这样类似的布局结构,来看下布局文件。

<?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-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        app:layout_scrollFlags="scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            app:layout_scrollFlags="scroll"
            app:scrimVisibleHeightTrigger="45dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:background="@drawable/header"
                app:layout_scrollFlags="scroll"
                android:layout_width="match_parent"
                android:layout_height="450dp" />

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:layout_collapseMode="pin"
            app:tabMode="scrollable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>

这样的布局,接着填充数据基本上就能实现tab吸顶效果,feed卡片区采用RecycleView实现,可以一直下拉,并且能够支持左右横滑,基本实现了类似京东,淘宝首页的一个效果。

但是在使用这种方式来实现发现两个很明显的问题。

第一,抖动问题

该问题场景描述:我们触摸AppBarLayout使AppBarLayout整体向上滑动,,即手指上滑,当AppBarLayout fling的同时,我们触摸下部ViewPager中的RecycleView区域,使RecycleView区域整体向下滑动,即手指下滑,

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值