文章      动态     相关文章     最新文章     手机版动态     相关动态     |   首页|会员中心|保存桌面|手机浏览

bp0mmf

http://www78564.xrbh.cn/combp0mmf/

相关列表
文章列表
  • 暂无文章
推荐文章
使用Alibaba开源库vLayout实现淘宝首页淘宝手机客户端「使用Alibaba开源库vLayout实现淘宝首页」
发布时间:2025-02-12        浏览次数:24        返回列表

按照自己之前写简书的习惯,先上效果图:(图片素材来自于淘宝手机客户端)
在这里插入图片描述

在研究具体的使用的时候,先看看官方对于vLayout 的介绍和使用方法
vLayout的官方地址: https://github.com/alibaba/vlayout

通过定制化的LayoutManager,接管整个RecyclerView的布局逻辑;LayoutManager管理了一系列LayoutHelper,LayoutHelper负责具体布局逻辑实现的地方;每一个LayoutHelper负责页面某一个范围内的组件布局;不同的LayoutHelper可以做不同的布局逻辑,因此可以在一个RecyclerView页面里提供异构的布局结构,这就能比系统自带的LinearLayoutManager、aridLayoutManager等提供更加丰富的能力。同时支持扩展LayoutHelper来提供更多的布局能力。

主要功能
  • 默认通用布局实现,解耦所有的View和布局之间的关系: Linear, Grid, 吸顶, 浮动, 固定位置等。
    • LinearLayoutHelper: 线性布局
    • GridLayoutHelper: Grid布局, 支持横向的colspan
    • FixLayoutHelper: 固定布局,始终在屏幕固定位置显示
    • ScrollFixLayoutHelper: 固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等
    • FloatLayoutHelper: 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置
    • ColumnLayoutHelper: 栏格布局,都布局在一排,可以配置不同列之间的宽度比值
    • SingleLayoutHelper: 通栏布局,只会显示一个组件View
    • OnePlusNLayoutHelper: 一拖N布局,可以配置1-5个子元素
    • StickyLayoutHelper: stikcy布局, 可以配置吸顶或者吸底
    • StaggeredGridLayoutHelper: 瀑布流布局,可配置间隔高度/宽度
  • 上述默认实现里可以大致分为两类:一是非fix类型布局,像线性、Grid、栏格等,它们的特点是布局在整个页面流里,随页面滚动而滚动;另一类就是fix类型的布局,它们的子节点往往不随页面滚动而滚动。
  • 所有除布局外的组件复用,VirtualLayout将用来管理大的模块布局组合,扩展了RecyclerView,使得同一RecyclerView内的组件可以复用,减少View的创建和销毁过程。
如何使用

版本请参考mvn repository上的最新版本(目前最新版本是1.2.6,最新的 aar 都会发布到 jcenter 和 MavenCentral 上,确保配置了这两个仓库源,然后引入aar依赖

 

或者maven:
pom.xml

 

初始化

 

设置回收复用池大小(如果一屏内相同类型的 View 个数比较多,需要设置一个合适的大小,防止来回滚动时重新创建 View

 

注意:上述示例代码里只针对type=0的item设置了复用池的大小,如果你的页面有多种type,需要为每一种类型的分别调整复用池大小参数。

我相信看到这里,还是一脸懵逼,接下来带你一步步的实现上面的复杂效果,我们按照上面的功能顺序一步步的去介绍如何实现

1. LinearLayoutHelper 线性布局

linear.gif

可以看出和传统的RecycleView的LinearLayoutManager是没有区别的,也就是传统的线性布局管理器。
由于Adapter和正常的RecycleView的Adapter几乎相似,所以只在LinearLayoutHelper 这个的实现去贴出来,其他的代码已上传Github,查看完整代码。

核心代码实现

 

LinearAdapter的实现

 
2. GridLayoutHelper Grid布局, 支持横向的colspan

grid.gif

这里只需要看上面的网格布局中的东西,即
image.png这部分的内容。当然,这里和使用GridLayoutManager的效果是一样不做过多的解释。相信大家都看得懂。
核心代码实现

 
3. FixLayoutHelper 固定布局,始终在屏幕固定位置显示

fix

在Demo中,最上面的搜索框使用FixLayoutHelper实现的,但是如果只使用FixLayoutHelper的话,这里会将正常的item挡住一部分,所以介绍一种解决方案,即下面提到的ColumnLayoutHelper
fix.png
核心代码实现

 
4. ScrollFixLayoutHelper固定布局,但之后当页面滑动到该图片区域才显示, 可以用来做返回顶部或其他书签等

这个效果类似于FixLayoutHelper ,所以介绍一下相关属性

SHOW_ALWAYS:与FixLayoutHelper的行为一致,固定在某个位置
SHOW_ON_ENTER:默认不显示视图,当页面滚动到这个视图的位置的时候,才显示
SHOW_ON_LEAVE:默认不显示视图,当页面滚出这个视图的位置的时候显示

5. FloatLayoutHelper 浮动布局,可以固定显示在屏幕上,但用户可以拖拽其位置

悬浮按钮可以任意拖拽,但是会停留在屏幕的边上,暂时还没有找到可以任意拖动的api,后期更新,在使用的过程中如果添加了点击事件,会出现有时候拖动不了的bug,和adapters中初始化的位置和顺序有关系,建议早加入到adapters集合中,优先初始化。

float.gif

代码实现

 
6. ColumnLayoutHelper 栏格布局,都布局在一排,可以配置不同列之间的宽度比值

Column.png

代码实现

 
7. SingleLayoutHelper 通栏布局,只会显示一个组件View

single.gif

在这个演示图中,我们使用的Banner是使用的SingleLayoutHelper 去实现。

8. onePlusNLayoutHelper 一拖N布局,可以配置1-5个子元素

one3.gif

这个Helper的实现偶尔会出现图片错位的bug,个人感觉和缓存池有关系(带后期更新
代码实现

 
9. StickyLayoutHelper 可以配置吸顶或者吸底

stick.gif

women这里的悬浮的tablayout使用的是StickyLayoutHelper ,去实现的这种效果。
代码实现

 
10. StaggeredGridLayoutHelper 瀑布流布局,可配置间隔高度/宽度

stag.png
代码实现