Go to file
idea4good 2402655893 Update README.md 2017-12-07 12:25:57 +08:00
core upload code 2017-12-06 21:43:47 +08:00
gui upload code 2017-12-06 21:43:47 +08:00
.gitignore upload code 2017-12-06 21:43:47 +08:00
GraphicLayer.png upload code 2017-12-06 21:43:47 +08:00
LICENSE Initial commit 2017-12-06 21:35:23 +08:00
README.md Update README.md 2017-12-07 12:25:57 +08:00
demo.gif Add demo gif 2017-12-07 12:23:31 +08:00

README.md

GuiLite 揭示UI原理打造你自己的UI框架- 开发者qq群527251257

Demo 超轻量UI框架 - GuiLite是由6千行左右的C/C++代码编写而成它像MFCQT一样为开发者提供界面支持。

GuiLite可以嵌入到其他平台中与Android、Linux、Windows、Mac、MFC、QT、 VR单片机 一起玩耍相互支持。开发者可以用GuiLite开发界面的跨平台部分同时也充分使用MFCQTAndroidLinuxWindowsMac的界面特性让自己的界面集百家之长又不失个性。具体实现方法请见GuiliteSamples库。

相比其他强大的UI框架GuiLite只聚焦界面开发特别是手机风格的滑动界面只使用最基础的C++特性直达绘制底层。希望通过减少代码调用层次让UI框架的体积最小效率更高使之流畅运行在手机电脑单片机等硬件环境上。

注意:

为什么开发GuiLite如何使用

任何UI框架都不是为你我而生的只有掌握核心原理对其深度定制才能真正掌握自己的命运因此我们开发了GuiLite希望用这6千行代码揭示UI的核心原理和定制方法。

我们不推荐开发者全盘使用GuiLite鼓励开发者在吃透代码后根据自身业务特点修改出更加丰富、个性的界面或者发展出适合自己的UI框架。

为了聚焦UI核心原理GuiLite会一直保持单片机的代码体量。

代码简介

gui: 1实现了各种常规控件例如按钮标签键盘及容器例如视窗对话框滑动页面开发者可以根据自己的需要直接在相应的代码上进行修改或重绘开发出有自己风格特色的界面2实现了用户输入例如手指按下/释放的消息传递将用户的输入信息传递到整个UI体系树中并调用相应的响应回调函数开发者可以根据自己的需要添加/修改响应回调函数。

core: 实现了各个平台例如Windows, Linux的封装这些封装包括了基本的操作系统接口底层绘制图层管理和消息传递。由于开发者面对的应用场景有所不同所需的操作系统接口也有区别core中只提供了最基础的接口形式开发者可以根据自己的需要直接在api.h/api.cpp中添加新的操作系统接口或单片机接口

最后,代码的更新/发布,不会作具体通知,请开发者随时更新代码库。

GuiLite的基本原理

GuiLite只作两个工作界面元素管理和图形绘制。

界面元素管理

界面元素管理包括对所有控件buttonspinbox, lable, keyboard容器dialog, view管理具体的管理方法是为所有的界面元素建造一棵树利用这棵树实现对所有界面元素的遍历查询状态更改。

比如当你按下一个dialog的button时手指的位置信息xy会被传入树的根部root然后从root开始寻找哪个dialog被点中dialog的哪个button被点中并调用buton被点中的回调函数用于作相应处理一般会进行button的状态修改及重绘工作

界面元素如何创建

所有界面元素都继承自c_wnd类的对象对象被实例化时也就完成了界面元素的创建但此时的界面元素是孤独的与其他界面元素没有形成联系没有父母没有兄弟姐妹

界面元素如何被管理纳入tree中

新创建的界面元素纳入管理的过程就是为其添加父母兄弟姐妹的过程。使用的函数接口为connect();从此该界面元素会跟其他界面元素一样,纳入一棵树中,并随之响应用户可能的点击操作。

当需要删掉该界面元素时使用disconnect();从此该界面元素会断绝所有的父子关系,从树上摘下来,不再响应用户的触控操作;但对象本身不会被销毁。典型应用场景:软键盘的创建/退出。

图形绘制

图形绘制包括: 绘制方法和图层管理。其中点绘制是线/面/位图绘制的基础若干个点的绘制形成点面及位图图层管理则是管理多个界面元素的遮挡关系系统默认支持3层遮挡关系这3个层次可以为视图背景层对话框层keyboard/spinbox控件层。

绘制方法

请参看文件bitmap.cpp和surface.cpp中的draw_xxx()函数。

图层管理

GuiLite的所有图层如下图所示 Graphic layer

display层 该层对应了物理显存display层决定了一个显示终端的最终显示效果通常系统中至少有一个display层。

surface层 该层属于display层的一个部分它为左右滑动而存在每一张滑动页面均对应了一个surface层surface层决定了一个滑动页面的最终显示效果通常1个display层会对应多个surface层。

frame层: 该层属于surface层的一个部分它现实叠加界面元素而存在