基础知识漫谈(2):从设计UI框架开始

简介: 说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas、svg等等。 基于这些UI工具包\框架,又产生了大量通用的或者业务性的UI框架,比如Draw2d、GEF、easyUI乃至国内的EChart、白鹭等等。

说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas、svg等等。

基于这些UI工具包\框架,又产生了大量通用的或者业务性的UI框架,比如Draw2d、GEF、easyUI乃至国内的EChart、白鹭等等。

这些框架的业务范围各异,一个程序员的时间和精力有限,你不可能全部都掌握,又不能预言出是哪一个将来会独步天下,甚至,连当前哪一个最流行,都够打一阵嘴炮。

那,我们应该学什么?

本章节谈谈,如果,我们只有一个GC(graphic creator\capability)的时候,如何设计一套UI框架出来,了解了这些,在学习新的UI框架的时候,会更加容易。同时,这里提到的分析思路也可以应用到其他类型框架中,辅助学习。

切记,1、复杂由简单构成;2、构成具备规律

可想而知,再复杂的框架,划拉到底层的时候,也都是你早就应当掌握的基础知识。不同的框架需要的基础知识可能不一样,但是规律(思想)大多是接近的。

 

我们先来定义一下,什么是GC?

每一个使用过上面提及的UI toolkit的程序员,应该都注意到了,它们很多都有提供“绘制”功能。在SWT中,提供该能力的是org.eclipse.swt.graphics.GC,在H5 canvas中,则是CanvasRender(也就是canvas element#getContext(‘2d’)得到的对象)。

它们有什么共同点?

可以设置ARGB信息,可以调用来绘制图片、线段、形状,等等。

为了方便起见,这里统一称为GC,它是UI框架的基础。

来思考一个问题,一个下图所示的界面,如果用GC自行绘制的话,你要怎么做?

 

不用想太多,完整实现是不科学的,写到颓,颓到秃。来看下最常见的解决方案吧:

把该界面上的各个部件拆开来,相同特性的归为一类,每一类都提供一个绘制的方法,比如一个按钮,就需要GC绘制四条边、阴影线以及其中的文本。

然后,让遍历所有的部件,让文本的归文本,按钮的归按钮。

有没有突然感觉简单了?这就是所谓的UI框架干的事儿。

 

如何构建这个UI框架呢?本文采取的思路是:面向对象建模。

具备面向对象知识的你,应当能分析出以下结论:控件,控件的布局,以及各种事件的处理,这三个元素组成了一个基本的UI框架。

 

1、控件

按钮、文本框等可操作对象以及包裹它们的容器,这里称之为控件。

所以,我们需要创建出以下对象,继承关系以树形结构表示:

 

 

其中父子级只表达继承关系,Control和Composite它们的实体关系图,则可能是如下所示:

 

 

其中,Control提供两个方法:

paint(GC)负责调用GC,来绘制自身。

getBounds()负责提供当前控件的位置、大小信息,一般包括x,y,width,height。

Composite作为复合控件,它既具备Control的两个方法,用于正确的绘制自身,又具备一个children列表,里面全都装的是Control,当它的paint方法调用的时候,应当迭代自己的所有children,调用它们的paint。

具备此种结构之后,任何UI界面是不是都成为了某种单根结构?

根节点是一个Root Composite,叶子节点则是具体的某个Control。再联想之前的打印窗口,它的实体结构大概会是这样:

 

来活动活动思维吧,这是什么数据结构?各个控件的paint()方法调用顺序是怎样的?

 

2、布局

明明是有bounds的,为什么还需要“布局”呢?

其实啊,bounds(x,y,width,height)也可以视为一种布局,我称之为自由布局,这种布局其实并不好,结论太粗暴难以接受么?大概讲解一下:

你需要非常精确的控制x,y,width,height四个变量,设想你要制作一张两行四列的表格,每个单元格你都得控制它们的位置,bounds信息如下所示:

[0,0,100,20],[100,0,100,20],[200,0,100,20],[300,0,100,20],

[0,20,100,20],[100,40,100,20],[200,60,100,20],[300,80,100,20]

如此你可以推论出一个公式,设i为行号,j为列号,单个cell的bounds信息公式为[i*width,j*height,width,height],注意到问题没有,你需要自己维护一个嵌套循环,来为每一个单元格赋值。

控制相对位置需要花费大力气。明确一个事实,在该“自由布局”里,child的范围是有可能超出parent的边框的(因为bounds的x,y目前指代的是GC使用到的x,y,也就是整个画布的基准点),除非,你把每一个child的计算公式都改为[i*width+offsetX,j*height+offsetY,width,height],这里的offset代表parent的绝对位置。

很难控制缩放。比如你要对上述的表格进行缩放,则你需要修改bounds信息,确定缩放的策略,比如整体缩小一个zoom值,列出的公式大概会变成这个样子[i*width*zoom,j*height*zoom,width*zoom,height*zoom]

 

仅仅说明一个方式不好,并不能证明其他的方式好,很多人已经想到了,我们可以把上面的这些“公式”抽离出来,整理出可复用的代码。如果有其他的布局方案,也可以整理出对应的复用代码,在paint之前应用上去,不就好了么?

对,其实,这个可复用的方案\策略,也就是“布局”。

以伪码说明实现方式:

define Composite{
LayoutManager layoutManager;
/**
*绘制
*/
void paint(){
  layout();
  //dopaint
}
/**
*执行布局
*/
void layout(){
  layoutManager.layout(this);
}
}

define LayoutManager{
void layout(Composite parent){
  int index=0;
  //遍历所有的children,获取它们的layoutData,修改它们的位置
  foreach(Control child:parent.getChildren()){
  //根据child的index以及布局配置计算出偏移量
  offset=computeOffset(index);
  //获取child的布局数据
  LayoutData data=child.getLayoutData();
  //使用布局数据修改child的bounds信息
  data.computeBounds(child,index,offset);
  index++;
}
}
}

 

 

从上面伪码我们可以看出,控件具备layoutData这个成员函数,容器(复合控件)具备layout这个成员函数.

layout用于规定该容器内部的布局类型(比如网格类型GridLayout),整体的布局规划(体现在上述代码中的offset对象,为下一个需要布局的child提供偏移量)。

layoutData负责具体的某一个child在整体中的排布。

由于封装在layout和layoutData中的都是算法(体现在computeXXX方法中),所以,我们可以灵活的规定、服用不同的组合方式,比如把一个控件布置在容器的整体居中位置。

完成了这些,你的UI框架就能用于展示各种视图了。

 

 

 

3、事件分发

仅仅用于展示自然是不够的,不然UI框架完全可以称之为视图框架,这个UI框架应当可以接收各种类型的键盘、鼠标输入。

以H5的canvas为例,我们知道canvas是可以添加鼠标\键盘监听的,你完成了控件和布局,点击按钮控件,响应事件的是按钮还是canvas?

自然是canvas,浏览器哪里知道你写了个“按钮”出来。

对于不熟悉MVC模式的同学可能会有些疑惑,一个“绘制”上去的假按钮,要如何响应事件呢?

我们再来看下这棵树:

 

推论如下:

1、根容器的bounds等同于canvas的位置大小。

2、如果canvas接收到了鼠标事件,鼠标一定位于某个根容器下某个控件位置上。

3、树遍历控件,即可快速找到事件发生的时候,鼠标处于哪个控件之上。

 

鉴于JS在某些浏览器上的执行效率(我不是说微信),我们还可以做更多的优化。这里抛砖引玉:

1、引入(layer)的概念,对树结构再做一个横向划分,优先查找层数高的控件,也可以让某些层的控件不参与查找。

2、对控件本身设置可点击属性,毕竟if判断的速度要比计算(x,y)是否位于bounds范围内要快。

 

 

下一篇我来讲讲,如何制作游戏\动画框架,再以后应该不会谈UI相关的东西了,毕竟我也不是做这个的。

目录
相关文章
|
4月前
|
存储 JavaScript 开发者
探索鸿蒙新世界:ArkUI框架实战指南,解锁HarmonyOS应用UI设计的无限可能!
【10月更文挑战第19天】ArkUI框架是华为鸿蒙系统中用于开发用户界面的核心工具,支持ArkTS和eTS两种开发语言。本文介绍了ArkUI的基本概念、组件使用、布局管理和状态管理,通过示例代码帮助开发者轻松构建美观、高效的跨设备UI。
318 3
|
3月前
|
Rust JavaScript 前端开发
ES6 awaitRust UI 框架
ES6 awaitRust UI 框架
38 0
|
3月前
|
前端开发 JavaScript
electron ui框架
Electron是一个使用JavaScript, HTML和CSS等前端技术构建跨平台桌面应用程序的框架。
202 0
|
2月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
381 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
3月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
175 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
5月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
367 60
|
4月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
223 2
|
5月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
4月前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
107 1
|
4月前
|
前端开发 开发者 UED
UI 框架:nav-ui&uni-ui&vant
本文档介绍了`nav-ui`、`uni-ui`和`vant`三个UI库的基本使用方法,包括图标、表格和树的使用示例,以及如何在项目中安装和配置这些UI组件。对于`nav-ui`,详细说明了图标组件的安装与使用,包括本地图标和第三方图标库的集成方式。`uni-ui`部分则重点讲解了CSS的使用方法。最后,`vant`部分提供了从项目创建到组件安装的具体步骤,以及如何将下载的组件正确地集成到项目中。
187 4

热门文章

最新文章