基本概念

Tangram命名的起源

Tangram,是七巧板的意思,寓意着我们的界面能够像七巧板一样在手中变出无限的可能。

Tangram能做什么

Tangram提供了流式布局、滚动布局,瀑布流布局,固定布局等数种布局样式,布局提供样式参数供调整,布局内部也可填充任意的视图(View),使Native开发的页面具备一定的动态性,并提供极致的性能。

核心原则

  • 性能。提供UI组件复用能力,抽象布局层,保障运行时内存和滑动效率。
  • 可配置化。布局和组件提供基本样式配置,并提供UI布局的抽象结构,使得布局能够通过后端接口下发/自解析等方式来操作,提供灵活性。组件提供反射/KVC的方式快速映射业务属性。
  • 组件化。强制组件封装,使得View层面能够复用。
  • 可扩展。开放的接口和分层,可以灵活和其他技术整合。

名词解释

不论是要想使用 Tangram 加速业务开发,还是想熟知 Tangram sdk 内部的设计思路,首先要了解 Tangram 里涉及的几个概念。通过这些概念可以更好地明确它所解决的问题域。

在 Tangram 的领域里,我们将一个普通的列表页面结构化成树状结构:分别是页面 - 布局 - 组件。一个页面下面挂载多个布局或在组件,一个布局下面挂载多个组件,整体是一个树状结构描述。每一层次都有各自的职责。

页面
	|
	- 布局1
	|	|
	|	- 组件11
	|	|
	|	- 组件12
	|	|
	|	- 组件13
	|
	- 布局2
	|	|
	|	- 组件21
	|	|
	|	- 组件22
	|
	- 布局3
	|	|
	|	- 组件31
	|	|
	|	- 组件32
	|
	- 组件4
	...
	|
	|
	|
	- 布局n
		|
		- 组件n1

页面

在模型上,如上图所示,一个页面包含一个卡片列表,每个卡片持有一个组件列表,整个页面是一个页面 - 布局 - 组件的树状结构。它要求整体可滚动,并且能按照组件的类型去回收复用。

在实现上,在 Tangram-iOS 里,它是基于 LazyScrollView 的页面容器,在 Tangram-Android 里,它是基于 vlayout 构建的 RecyclerView。运行 LazyScrollView 或者 RecyclerView 的页面实体(Controller, Activity)还得负责初始化 Tangram,绑定数据,响应业务事件等职责。

布局

布局的主要职责是负责对组件进行布局,它有四个组成:header、footer、body、style。最重要的是 body 部分,它包含了内嵌的组件,如果布局没有 body,即没有组件,也就不在视觉上做渲染。卡片的布局也就是对 body 里包含的组件来进行布局。Tangram 内置了一系列布局能力对组件进行布局,包括流式布局、瀑布流布局、吸顶布局、悬浮布局、轮播布局等等,基本上常见的布局方式都可以覆盖到。header、footer 是卡片的标题和尾部,目前只有轮播卡片、通用流式卡片支持 header、footer。style 是对布局样式的描述,所有布局会有一些通用的样式属性比如边距、间距,也有一些特有的比如宽高比,通过样式的描述,可以让布局能力更加丰富。

布局描述就是一种布局类型的声明,因为框架已经内置了布局能力,只需要声明采用哪一种布局方式,因此不需要布局模板。如果框架的内置布局能力满足不了需求,还可以自定义扩展新的布局类型注册到 Tangram 里。

以下是一个布局的 json 描述示例(type, style, header, footer, items都是关键字):

{
"type": "container-oneColumn", ---> 描述布局类型
"style": { ---> 描述样式
  ...
},
"header": { ---> 描述header
},
"items": [ ---> 描述组件列表
  ...
],
"footer": { ---> 描述footer
}
}

组件

组件:更具体地说是业务组件,组件的职责就是负责基本的 UI 展示和交互,它是按照业务划分的最小单元,不像通用的 UI 框架那样会设计文本、按钮、线条那样的基础元素。如果没有加特别的前缀说明,上文或者下文里组件都是指业务组件。

在 Tangram 里,组件长什么样,框架是不知道的,框架内也不内置组件,都是由业务方接入的时候自行按需注册。同布局一样,组件的数据描述也需要提供与 UI 相关的模板,包含3部分:类型、数据、样式。类型是必须的,业务方在 Tangram 里注册过这种类型,那么就能被框架解析处理。数据也是必须的,它包含了业务信息;样式是可选的,组件可以按照自己的需求定义样式,在实现的时候解读样式数据。

以下是一个组件的 json 描述示例(type, style都是关键字):

{
"type": "demo", ---> 描述组件类型
"style": { ---> 描述组件样式
  "margin": [
    10,
    10,
    10,
    10
  ],
  "height": 100,
  "width": 100
}
"imgUrl": "[URL]", ---> 业务数据
"title": "Sample"
}

原生组件

根据组件的开发方式,定义一种称之为原生组件的组件:在Android或者iOS平台上,正常的组件开发是通过写JAVA代码或者objective-c代码开发的,它们在客户端发布之后一般无法在线上修改,只能重新发布版本,这种方式开发的组件叫做原生组件;

动态组件

根据组件的开发方式,定义一种称之为动态组件的组件:相对于原生组件,通过其他方式开发的,在客户端发布之后还能进行修改的组件,比如采用H5、Weex,或者动态化方案开发的组件,称之为动态组件;

控件

上文的组件或业务组件,粒度是业务级别的单元,它们是由更小的基础元素构成的,将 UI 系统里定义的基础元素称之为控件,比如文本、图片、线条、线性布局容器、帧布局容器等;它是更小粒度的单元,容器本身也有容器控件和原子控件之分,容器控件可嵌套其他控件;有时候也把这个称为基础组件;

原生控件

根据开发方式,使用原生代码系统建议创建方式创建的 View 对象称为原生控件;

虚拟控件

根据开发方式,一般平台都提供一种利用 canvas 绘制界面的能力,它依托一个原生容器控件作为宿主容器,在容器的 canvas 上进行绘制,通过这种方式创建的控件称为虚拟化组件;

在 Tangram 内置的基础框架里,内置了可供开发动态化组件的控件:

  • 虚拟文本控件
  • 原生文本控件
  • 虚拟图片控件
  • 原生图片控件
  • 虚拟线条控件
  • 原生线条控件
  • 虚拟进度条控件
  • 虚拟图形控件
  • 原生翻页布局容器控件
  • 原生滚动布局容器控件
  • 虚拟帧布局容器控件
  • 虚拟比例布局容器控件
  • 虚拟网格布局容器控件
  • 原生网格布局容器控件
  • 虚拟线性布局容器控件
  • 原生线性布局容器控件

样式

在布局和组件的模型里,都提及了样式,样式包含除业务数据之外的、与 UI 相关的数据,让卡片或者组件更加具备可配置性,当然前提是布局和组件实现了这些属性。比如 margin 和 padding,组件的文字颜色、字号大小。Tangram 内置布局的样式属性,请参考后续详细描述。

最新的: