soui-学习笔记1介绍

发表于 2018-01-13 更新于 2020-02-15 分类于 windows ， UI 阅读次数：本文字数： 3.3k 阅读时长 ≈ 3 分钟

SOUI是国人写的一个开源库，估计离收费也不远了。比较好用。只是文档匮乏，学习起来要花些时间。
DerictUI模式的界面库，通过XML配置文件完成界面布局，资源引入等操作。

[gitee](git clone https://gitee.com/setoutsoft/soui)

使用 git 摘取代码后,进入代码根目录,双击运行”build.bat”
1.选择编译版本[1=x86;2=x64;3=x86+x64]:选择需要编译的cpu架构(eg:1则表示生成win32的可执行文件)
2.选择开发环境[1=2008;2=2010;3=2012;4=2013;5=2015;6=2017;7=2005]:选择对应的 Visual Studio 版本(eg:1表示选择使用 Visual Studio 2008)注意SOUI至少需要Visual Studio 2008 SP1及以上的 Visual Studio 版本
3.选择SOUI编译模式[1=全模块DLL;2=全模块LIB;3=内核LIB,组件DLL(不能使用LUA脚本模块)]:选择生成内核的文件方式(eg:1表示所生成的内核文件及组件均为dll)
4.选择字符集[1=UNICODE;2=MBCS]:(推荐选1)
5.将WCHAR作为内建类型[1=是;2=否]:(推荐选1)
6.选择CRT链接模式[1=静态链接(MT);2=动态链接(MD)]:(根据自大项目需求选择)
7.是否为release版本生成调试信息[1=生成;2=不生成]:(根据自大项目需求选择)
open[o], compile[c] “soui.sln” or quit(q) [o,c or q]?输入英文字母o表示打开工程项目,c表示直接编译debug与release,q表示直接退出当前窗口

项目大致的结构

soui模块是整个项目的核心，除utilities模块外，其它模块都为soui模块服务。

utilities模块提供一些工具类，主要包含pugixml，及一个String类。

soui-sys-resource模块是一个纯资源DLL，提供一些内置控件必须的资源。

demo模块是SOUI界面库的功能演示程序。

translator实现一个从XML文件加载多语言翻译资料的类似QT的语言翻译模块。

render-gdi和render-skia分别实现两个基于GDI及SKIA的渲染模块，它们可以相互替换。GDI的优点是体积小，但是对于apha通道支持能力有限；而skia的优点是速度快，全面支持alpha通道，但是程序体积会有所增加, DLL编译后有1M，压缩后有600K。

resprovider-zip实现了一个从ZIP文件加载程序资源的模块。加上soui中内置的两个资源加载模块，SOUI可以选择从文件中，从EXE资源中及从ZIP文件包中加载程序资源。

script-lua是一个脚本支持模块，目前只实现了几个基本类的导出，要使用更多SOUI类型，还需要增加导出代码。

新建一个项目

soui目录中的wizard目录下面有个安装向导，安装完毕就可以在vs2015的新建里面看到soui的模板。
使用模板建立完项目，就可以运行起来了。

首先要了解一下resource相关的设置。

uires.idx文件

uires.idx文件是SOUI资源的入口，定义了程序中使用的各种资源，以”resource”为根节点。
该XML有一个resource的根节点，下面可以是任意定义的类型(ICON, BITMAP，CURSOR除外，它们是预定义的类型，不能修改类型名）
每个类型下面定义有file元素，元素中有两个属性：name 及 path
name即资源的名称，path即资源的路径。所有资源建议采用相对路径，即相对于uires.idx文件的路径。
在程序中通过type及name来引用资源。

UIDEF资源

其中uidef中定义的init.xml用来定义SOUI中使用的全局UI定义。

图片的引用

<skins>
    <imglist name=“skin_btn_next" src="imgx:btn_next" states="4" tile="0" vertical="0"/>
    <img pos="23,37,101,115" skin="img_avatars" name="img_avatar"/>
</skins>

name属性告诉系统如何引用定义的imglist
src属性定义该skin需要使用哪一个图片资源，资源引用格式为type:name，如上面使用的imgx:btn_next，对于图片资源，通常情况下也可以不指定type,系统会自动在常用的图片类型下查找，但不建议这样使用。
states定义图中包含多少个子图。
title定义图片在放大显示时时平铺还是拉伸，默认为拉伸。
vertical属性定义图中的子图的排列方式。
在本例子中tile和vertical属性都可以不指定。

锚点布局

SOUI布局全部采用相对坐标，由pos,offset(pos2type), size, width,height 这几个个窗口属性配合指定。
size, width, height比较简单，是用来指定窗口的大小的，只有在pos属性指定的值个数不为4时生效。
size=”width,height”
width, height可以有3种值：full,-1,非负整数。
为full时，代表高度或者宽度和父窗口的客户区大小相等。
-1代表根据窗口内容自动计算窗口大小。
非负整数直接指定窗口大小。
在图片控件中，控件是指定的皮肤默认大小。在文本控件中，还可以指定一个maxWidth属性，控件是文本内容的大小，但宽度不超过maxWidth。

pos属性

pos属性可以指定4个值，也可以指定2个值。指定4个值时，分别代表控件的left,top,right,bottom,
指定两个值时代表控件的x,y，具体位置还依赖于另外3个参数。

指定4个值时，pos目前支持7种标志：|,%,[,],{,},@

“|”代表参考父窗口的中心；如|-10代表在父窗口的中心向左/上偏移10象素。
“%”代表在父窗口的百分比，可以是小数，负数。如：%40代表在父窗口的40%位置，%-40则等价于(1-40%)。
“[”相对于前一兄弟窗口。用于X时，参考前一兄弟窗口的right，用于Y时参考前一兄弟窗口的bottom
“]”相对于后一兄弟窗口。用于X时，参考后一兄弟的left,用于Y时参考后一兄弟的top
“{”相对于前一兄弟窗口。用于X时，参考前一兄弟窗口的left，用于Y时参考前一兄弟窗口的top
“}”相对于后一兄弟窗口。用于X时，参考后一兄弟的right,用于Y时参考后一兄弟的bottom
“@”标志用来指定窗口的大小，只能出现在pos属性的第3，4个值中，用来标识窗口的宽度。当后面的值为负时，代表自动计算窗口的宽度或者高度（2015.3.3新增加解释）。

注：“|“, “[“ ,”]”, “{“, “}”中指定的值都可以为正或者负，正时向右或者下偏移，负则向左或者上偏移。

当没有上述标志时，负号代表参考父窗口的右边或者下边缩进绝对值位置。如：pos=”0,0,-0,-0”代表占满父窗口。而pos=”10,10,-10,-10”则代表在父窗口的基础上向内全部缩进10点。

@:指定窗口的size。只能用于x2,y2，用于x2时，指定窗口的width，用于y2时指定窗口的height。注：只能为正值，负号会自动忽略。

当pos只指定了x1,y1时，
通常需要和offset(或者pos2type),size(或者width,height)配合使用。

offset及pos2type属性 offset属性包含两个值，用来代表窗口在通过其它布局属性完成后的偏移量：如offset=”-1,-1”，该offset表明窗口向左方及上方各平衡一个窗口大小的单位。