界面拼接设计

拼接界面

这个需求产生的最初原因,是部分不懂软件开发的人,在自认为懂软件开发的情况下,认为的理所当然的功能.

就是一个模块化/组件化的产品,就应该是像乐高积木一样,可以动态随意组合成应用.

功能是可以以某种形式存在的,但这里的灵活组合只能源于独立的设计,而非已有的功能.

而动态组合,也一定存在局限.

这些是需要先明确的.

设计

思路

需要拼接,自然就能想到将界面中的每一元素,独立成类似属性的视图,使他们能统一进行大小+位置+顺序的操作.

这样就是组合界面了.

而呈现这些视图的程序,则为每一个模块.

也就是说,如果导入一个模块A,它将同时提供一个入口视图(例如一个A按钮),可以配置 大小/位置/顺序.

配置文件也将包含这些属性:

模块排序,视图大小,原点位置.

也就是说,如果配置文件写得足够通用的话,可以做到跨平台使用.

例如统一使用XML格式编写配置. 亦或是直接完成一套Android平台的库.

应用

类似一些语言的桌面应用开发的“布局”方式,这里最终的实现也是有点类似的感觉.

但它更加平台化.

这里我将它应用为一个移动平台专门的界面构建方式.

先按照仅有由上往下的一种布局方式来设计实现.

然后对于手机平台,通常情况下,是横向占满屏幕的,或是以某个数字来均分宽度:

例如:

A 0 0 0 0 0
0 0 0 0 0 0
B 0 0 0 0 0
C 0 0 D 0 0
E 0 0 0 0 0
0 0 0 0 0 0

矩阵一排为44pi的话,第一个组件A即高88pi,B、C、D都高44pi, E高88pi.

而宽度A、B、E都占满(假设是最多可以等分为6块),C和D则各占3块.

当然,在项目中,宽度最小粒度应该也属于可配置的.

在列表的数据中,组件是以数组的形式存在,本身就具有顺序.

语言内部

  1. 组件 -> 模型类

  2. 配置文件 -> 模型类

  3. 配置文件内,应该包含有一个序列的组件.

  4. 配置文件模型可以直接在界面构建中方便的使用,以确定界面如何布局.

  5. 配置文件模型可以导入数据(import),从plist文件或者XML文件.

  6. 配置文件模型可以导出数据(export)到plist文件或者XML文件.

  7. 视图生成器 -> 工具类

其他工作

作为library打包整个功能库,即可方便被应用.

Author 作者

骆昱(Luo Yu

2017-02-17