关于如何设计 UI 框架、Android、ios、react native、小程序等等,市面上很多事物都有一套设计规则。本人的理念是源于一本书(记得好像是一本杂志)。
当你打开这本书,你就进入了这个为你贴身打造的场景(Scene),每一页(Page)都是为你定制的内容,有文字(Label)、图片(ImageView)、各种图文混排的组合......
因此,我们将整体的 UI 分为三层:Scene、Page、View 控件。
Scene 场景:Friday Engine 提供一个场景,所有的UI展示都在该场景中。 Page 页面:Scene中可以添加多个 Page。可以是全屏的,也可以自定义大小。 View 控件:在每个 Page 中可以添加多个View控件,来实现实际展示效果。目前包括:Label、Button、ImageView、MapView、Tableiew、LoadingView、TextBox 等。 |
坐标系:
有了这三层框架,下一步就是如何将View控件放到指定的位置,这就需要有标准的坐标系。整体的坐标系定位是基于父元素左上角为(0,0)的点。有了坐标系,想把控件放到位置,还需要知道这个控件的大小,因此,需要有控件的宽高:
Z轴:
有了坐标系和 view 宽高,控件就可以绘制到指定区域了,但出现的层级关系如何处理,谁在上谁在下呢?这就需要纵向层级属性:ZIndex。如图,地图在下方,其他元素在上方。