vlayout打造淘宝首页多布局展示

前言

VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用的问题。在讲解vlayout之前我们看一下淘宝首页是如何布局的,这里我们用的是Android SDK tools下的工具uiautomatorviewer.bat查看布局。那么接下来我先说一下uiautomatorviewer.bat工具的简单用法。

 

一.uiautomatorviewer.bat工具使用

 

打开Android SDK---->Tools----->bin---->uiautomatorviewer.bat双击打开。如果成功的话,会提示这样的界面,如下图所示:

 

1.

vlayout打造淘宝首页多布局展示_第1张图片

2.

vlayout打造淘宝首页多布局展示_第2张图片

 

这时如果你用的模拟器是手机的话,如果以上步骤操作都成功的话,就会看到类似淘宝首页这样的界面,同时右侧也显示相应的界面布局,如下图:

 

vlayout打造淘宝首页多布局展示_第3张图片

 

如果你想更换查看界面时,你需要点击左上角第二个按钮,也就是手机图形那个按钮,操作图如下所示:

 

vlayout打造淘宝首页多布局展示_第4张图片

 

二.如何搭建淘宝首页这样的界面

 

在这里我们就直接用alibaba的开源框架https://github.com/alibaba/vlayout去搭建这样类似的界面。

 

设计思路

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

 

使用

虽然 vlayout 布局灵活,然而 API 相对原始,手工维护数据及 LayoutHelper 比较麻烦,强烈建议大家使用 Tangram-Android 来间接使用 vlayout,Tangram 具备 vlayout 里所有的功能,且隐藏了细节,通过数据配置即可搭建页面,能避免绝大多数 Issue 里提到的问题,而且重大更新维护主要基于 Tangram,包括局部刷新、响应式接口等。

版本请参考 release 说明里的最新版本,最新的 aar 都会发布到 jcenter 和 MavenCentral 上,确保配置了这两个仓库源,然后引入aar依赖:

compile ('com.alibaba.android:vlayout:1.2.8@aar') {
	transitive = true
}

 

Tangram 相关开源库

Android

  • Tangram-Android
  • Virtualview-Android
  • vlayout
  • UltraViewPager

 

 

你可能感兴趣的:(UI)