模仿Airbnb的悬浮搜索框动画

最新推荐文章于 2024-08-13 08:29:38 发布

原创

最新推荐文章于 2024-08-13 08:29:38 发布 · 5.9k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#airbnb #search #animation

该博客详细介绍了如何模仿Airbnb的搜索框动画。通过分析动画原理和使用RecyclerView的OnScrollListener，博主探讨了如何判断何时收起或展开搜索框，并解决了在收起展开过程中遇到的视觉效果问题。最后，提供了实现该功能的源码下载链接，以便读者参考。

观察Airbnb搜索框动画的原理

先看看airbnb的效果把。

这里写图片描述

看了几遍，发现是这么一个原理：
最初搜索框是展开的
稍微向下滑动一点，搜索框收起
当搜索框已经收起后再向下滑，搜索框一直保持收起状态
在向上滑动时，只有滑动到顶部，搜索框才展开

探索实现方法

觉得这个搜索框的展开与收起跟顶部有着很大的关系，到达顶部才会展开，离开顶部就收起。

查阅Api发现，Listview OnScrollListener onScroll中有这几个参数：

/**
         * Callback method to be invoked when the list or grid has been scrolled. This will be
         * called after the scroll has completed
         * @param view The view whose scroll state is being reported
         * @param firstVisibleItem the index of the first visible cell (ignore if
         *        visibleItemCount == 0)
         * @param visibleItemCount the number of visible cells
         * @param totalItemCount the number of items in the list adaptor
         */
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,
                int totalItemCount);