Global全局样式Global 全局样式提供了通用的样式列表避免在多个不同的 XML 中出现相同的描述而产生冗余的代码和消耗开发人员在界面设置上的时间。在调用 GlobalManager::Startup 方法后会根据设定的皮肤资源路径下查找 global.xml 作为全局的样式资源。在现有的 samples 示例代码中包含了一些预设的全局样式如字体、颜色和一些通用样式。1. 默认字体名称DefaultFontFamilyNames!--默认字体名称列表形式依次匹配直到发现第一个有效字体作为默认字体名称多个字体名称用逗号分隔--DefaultFontFamilyNamesvalue微软雅黑,宋体/DefaultFontFamilyNames只有一个value属性用于设置默认字体列表不同的字体用逗号半角字符分隔。上述设置代表按照微软雅黑、宋体的顺序确定默认字体名称如果存在微软雅黑字体则用微软雅黑字体作为默认字体否则用宋体作为默认字体。2. 字体Font如果你想添加一个字体则在 global.xml 中添加如下代码程序启动后会加载所有字体列表到缓存中以 ID 作为区分。!-- name 代表字体名称size 代表字体大小bold 代表是否粗体underline 代表是否包含下划线 --Fontidsystem_12namesystemsize12boldtrueunderlinetrue/Font标签的id属性定义了一个字体ID该字体ID表示定义了一个字体属性字体名称、字体大小、粗体、斜体、删除线、下划线。当需要使用时指定字体ID即可。比如你希望一个 Button 按钮使用 ID 为system_12的字体可以这样写ButtontextHello Buttonfontsystem_12/在界面显示时duilib界面库会以字体ID为system_12标识的字体属性字体名称系统默认字体字体大小12粗体是斜体是来绘制这个按钮的文字。Font 所有可用属性属性名称默认值参数类型用途idstring字体IDnamestring字体在系统中的名称“system”表示系统默认字体“Microsoft YaHei”表示微软雅黑“SimSun”表示宋体size12int字体大小比如12对应小五号字14对应五号字16对应小四号字19对应四号字20对应小三号字21对应三号字boldfalsebool是否粗体underlinefalsebool是否下划线strikeoutfalsebool是否删除线italicfalsebool是否斜体defaultfalsebool是否是默认字体如果未给控件指定字体则使用该字体字体属性解析相关代码参见WindowBuilder::ParseFontXmlNode函数3. 字体文件FontFile程序可用自带字体文件在程序启动时加载不需要安装为系统字体即可使用。一般定义一个完整的字体需要4个字体文件常规字体文件、粗体文件、斜体文件、粗斜体文件。举例如果想添加一个字体名称为Roboto Mono的字体文件可在 global.xml 中添加如下代码!-- 字体文件放在资源根目录的fonts目录中程序启动时加载加载后可以按照使用系统字体相同的方式使用 --FontFilefileRobotoMono-Regular.ttfdesc字体名称Roboto Mono常规字体/FontFilefileRobotoMono-Bold.ttfdesc字体名称Roboto Mono粗体/FontFilefileRobotoMono-Italic.ttfdesc字体名称Roboto Mono斜体/FontFilefileRobotoMono-BoldItalic.ttfdesc字体名称Roboto Mono粗斜体/将RobotoMono-Regular.ttf、RobotoMono-Bold.ttf、RobotoMono-Italic.ttf、RobotoMono-BoldItalic.ttf这四个字体文件放在资源根目录的fonts目录bin\resources\fonts中程序启动后就会加载这些字体文件。字体文件加载完成后就可以使用Roboto Mono这个字体了使用方法与微软雅黑、宋体这种字体的方法是相同的参见文档中的2. 字体Font的描述的用法。FontFile 所有可用属性属性名称默认值参数类型用途filestring字体文件的文件名字体文件需放在资源根目录的fonts目录中descstring字体文件的描述信息无其他用途字体文件设置以后使用方法与系统字体完全相同即可以通过Font标签指定使用该字体。FontFile 的用法示例前序文档部分使用FontFile标签定义了一个字体名称为Roboto Mono的字体使用时首先定义一个字体ID!-- name 代表字体名称size 代表字体大小bold 代表是否粗体italic 代表是否斜体 --Fontidroboto_mono_12nameRoboto Monosize12boldtrueitalictrue/然后使用该字体IDroboto_mono_12定义控件中文字的字体属性了。假设想要用该字体ID定义一个按钮XML配置可以这样写ButtontextRoboto Mono Buttonfontroboto_mono_12/注意事项该RobotoMono字体只能用于显示英文字母不支持中文所以不要用这个字体来显示中文。4. 颜色TextColor你可以添加常用的颜色到global.xml中如下所示!-- name 是颜色的名称value 是颜色的具体数值 --TextColornamedefault_font_colorvalue#ff333333/这样当你需要使用这个颜色给一个 Label 设置文字颜色时可以这样写LabeltextHello Labelnormal_text_colordefault_font_color/TextColor的所有可用属性属性名称默认值参数类型用途namestring颜色名称valuestring颜色取值一个合法的颜色取值定义如下格式如“#FFFFFFFF形式以”#开头8个16进制字符构成ARGB格式的颜色值从左到右第1、2个字符代表A透明度第3、4个字符代表R红第5、6个字符代表G绿第7、8个字符代表B红格式如“#FFFFFF形式以”#开头6个16进制字符构成RGB格式的颜色值从左到右第1、2个字符代表R红第3、4个字符代表G绿第5、6个字符代表B红。这种格式的颜色不含透明通道按照不透明处理直接指定预定义的颜色别名比如Blue表示蓝色Aqua表示浅绿色等这个颜色别名在duilib/Core/UiColors.cpp文件中定义颜色值在duilib/Core/UiColors.h文件中定义。这些颜色别名可用直接使用不需要在global.xml中定义颜色。举例以下XML配置都是正确的LabeltextHello Labelnormal_text_colorAqua/LabeltextHello Labelnormal_text_color0xFF00FFFF/LabeltextHello Labelnormal_text_color0x00FFFF/5. 图片包括动画图片图片的所有可用属性属性名称默认值参数类型用途filestring图片资源文件名含路径根据此设置去加载图片资源比如1filerender/svg_test.png使用相对路径指定图片资源render目录应该在程序的资源目录resources/themes/default中2filesvg_test.png不指定路径该文件在与XML文件相同的目录中时不需要指定路径3filepublic/button/window-minimize.svg相对目录的方式public目录是公共资源目录该目录中有很多子目录分类保存公共图片资源此目录在程序的资源目录resources/themes/default中4fileD:/image/apng_test.png使用绝对路径指定图片资源namestring图片资源名称控件内唯一字符串用于标识图片资源设置以后可以通过Image* Control::FindImageByName(const DString imageName) const函数获取到该图片资源的接口widthstring图片宽度可以放大或缩小图像数值可以是像素或者百分比比如:width“300”设置图片宽度为300像素width“75%”设置图片宽度为图片原宽度的75%如果只设置了宽度未设置高度则图片的高度按宽度等比例缩放heightstring图片高度可以放大或缩小图像数值可以是像素或者百分比比如:height“300”设置图片高度为300像素height“75%”设置图片高度为图片原高度的75%如果只设置了高度未设置宽度则图片的宽度按高度等比例缩放srcrect图片源区域设置格式为src“left,top,right,bottom”可以用于仅包含源图片的部分图片内容比如通过此机制可以将按钮的各个状态图片整合到一张大图片上然后通过src指定各个状态的图片资源src指定的区域其基准是源图片的矩形范围(0,0,图片宽度,图片高度)如果使用width和height指定了图片的宽度和高度属性则src的基准是指定尺寸的矩形范围(0,0,width,height)比如源图片宽100高100指定src10,5,60,40代表取图片以10,5为原点宽度60高度40的图片内容作为图片资源cornerrect图片的九宫格绘图属性使用示例: corner“left,top,right,bottom”图片示意图采用九宫格绘制方式绘制图片时图片共计分为九个区域四个角区域1、3、7、8的图片绘制时不拉伸四个边区域2、4、6、9的图片绘制时上下拉伸中间区域5的图片区域默认拉伸绘制也可以设置xtiled“true”、ytiledtrue属性来选择平铺绘制corner属性指定的参数就是设置区域4、2、6、9的宽度或者高度corner指定的区域其基准是源图片的矩形范围(0,0,图片宽度,图片高度)如果使用width和height指定了图片的宽度和高度属性则corner的基准是指定尺寸的矩形范围(0,0,width,height)比如corner“4,2,6,9”代表区域4的宽度为4像素区域2的高度为2像素区域6的宽度为6像素区域9的高度为9像素destrect设置图片绘制目标区域该区域是指相对于所属控(Control::GetRect())左上角的矩形区域比如假定控件的矩形宽度和高度均是1001dest“10,20,60,70”: 是指在控件的矩形范围内图片的显示区域为相对控件左上角坐标(10,20)的位置图片宽度和高度均是50像素2dest“10,20”: 是指在控件的矩形范围内图片的显示区域为相对控件左上角坐标(10,20)的位置图片宽度和高度为图片资源的宽度和高度允许只设置顶点坐标此时绘制目标矩形区域大小与图片资源大小一致dest_scaletruebool仅当设置了dest属性时有效控制对dest属性是否按照DPI缩放比如假定当前屏幕的DPI缩放比为200%1dest“10,20,60,70” dest_scale“true”dest区域在绘制时按DPI缩放后的实际区域为dest“20,40,120,140”2dest“10,20,60,70” dest_scale“false”dest区域在绘制时禁止DPI缩放实际区域仍然为dest“10,20,60,70”如果不设置dest_scale的默认值为true该选项的值一般不需要特殊指定保持默认即可适配各种DPI的屏幕设置dpi_scaletruebool该图片是否支持屏幕DPI自适应:1dpi_scale“true”: 支持DPI自适应图片的显示尺寸按屏幕DPI缩放比等比例放大2dpi_scale“false”: 不支持DPI自适应图片的显示尺寸保持原图尺寸不根据DPI调整如果设置了dpi_scale“false”当屏幕的DPI变化时图片的显示尺寸不会随着DPI变化此时程序在不同DPI下显示的布局效果会不同该选项除了会影响图片加载后的显示区域大小同时也会影响图片的width、height、src、corner几个属性值的DPI自适应功能如果不设置dpi_scale选项默认值为true该选项一般不需要调整保持默认值即可做到界面布局能够适应各种屏幕DPIadaptive_dest_rectfalsebool图片大小自动适应目标区域等比例缩放图片可使用halign/valign设置图片在目标区域中的对齐方式用法adaptive_dest_rect“true” 或者 adaptive_dest_rect“false”marginrect在目标区域中设置图片的外边距halignstring横向对齐方式可取值“left”、“center”、“right”valignstring纵向对齐方式可取值“top”、“center”、“bottom”fade255int图片的透明度取值范围0 - 255xtiledfalsebool横向平铺绘制用法xtiled“true” 或者 xtiled“false”full_xtiledfalsebool横向平铺绘制时保证整张图片绘制, 仅当xtiled为true时有效ytiledfalsebool纵向平铺绘制用法ytiled“true” 或者 ytiled“false”full_ytiledfalsebool纵向平铺绘制时保证整张图片绘制, 仅当ytiled为true时有效tiled_margin0int平铺绘制时各平铺图片之间的间隔同时设置tiled_margin_x和tiled_margin_y为相同的值tiled_margin_x0int平铺绘制时各平铺图片之间的间隔此值为横向平铺的间隔仅当xtiled为true时有效tiled_margin_y0int平铺绘制时各平铺图片之间的间隔此值为纵向平铺的间隔仅当ytiled为true时有效tiled_paddingUiPadding平铺绘制时在目标区域内的内边距此内边距结合TiledMargin可用形成网格 仅当xtiled为true 或yxtiled为true时有效window_shadow_modefalsebool九宫格绘制时不绘制中间部分比如窗口阴影只需要绘制边框不需要绘制中间部分以避免不必要的绘制动作icon_size32int如果是ICO文件指定加载ICO文件的图片大小icon_as_animationfalsebool如果是ICO文件指定是否按多帧图片加载按动画图片显示icon_frame_delay1000int如果是ICO文件当按多帧图片显示时每帧播放的时间间隔毫秒auto_playtruebool如果是动画图片是否自动播放用法auto_play“true” 或者 auto_play“false”async_loadtruebool该图片是否支持异步加载即放在子线程中加载图片数据避免主界面卡顿用法async_load“true” 或者 async_load“false”可通过GlobalManager::Instance().Image().SetImageAsyncLoad函数修改此默认值play_count-1int如果是动画图片用于设置播放次数取值代表的含义:-1: 表示一直播放0 : 表示无有效的播放次数使用图片的默认值(如果动画图片无此功能则会一直播放)0: 具体的播放次数达到播放次数后停止播放pag_max_frame_rate30int如果是PAG文件用于指定动画的帧率asserttruebool图片加载失败时是否允许断言编译为debug模式时用法assert“true” 或者 assert“false”图片的使用示例!-- 使用文件名图片文件与XML文件在相同目录不需要指定文件所在目录 --Controlbkimagelogo_18x18.png/!-- 使用相对目录文件名图片文件与XML文件不在相同目录 需要指定文件所在目录的相对目录相对与XML文件所在目录 --Controlbkimagepublic/animation/loading1.json/!-- 使用图片文件的属性normal_image属性指定了一个图片并且设置了图片属性 图片属性中的值可用使用单引号括起来比如width24--Classnamebtn_wnd_min_11normal_imagefilepublic/button/window-minimize.svg width24 height24 valigncenter haligncenterhot_colorAliceBluepushed_colorLavender/!-- 以下代码演示如何使用动画图片 --HBoxwidthautoheightautoControlwidthautoheightautobkimagefilegif_test.gif width150 playcount-1valigncentermargin8/Controlwidthautoheightautobkimagefileapng_test.png width150 playcount-1valigncentermargin8/Controlwidthautoheightautobkimagefilewebp_test.webp width150 playcount-1valigncentermargin8//HBox!-- 以下代码演示如何使用Event控制动画图片(render示例程序) --Controlwidth80height80bkimagefilefan.gif width80 height80 playcount0 valigncenter haligncenterhot_colorAliceBluepushed_colorLavenderEventtypemouseenterreceiverapply_attributestart_image_animation{}/Eventtypemouseleavereceiverapply_attributestop_image_animation{}//Control6. 通用样式Class通用样式可以让我们预设一些经常使用到的样式集合比如一个高度为 34宽度自动拉伸、使用 caption.png 作为背景的标题栏。又或者一个宽度为 80高度为 30 的通用样式按钮等等。我们都可以通过通用样式来解决。以下示例演示了一个通用样式按钮!-- name 是通用样式的名称其他的是该通用样式中的属性 --Classnamebtn_global_blue_80x30fontsystem_bold_14normal_text_colorwhitenormal_imagefilepublic/button/btn_global_blue_80x30_normal.pnghot_imagefilepublic/button/btn_global_blue_80x30_hovered.pngpushed_imagefilepublic/button/btn_global_blue_80x30_pushed.pngdisabled_imagefilepublic/button/btn_global_blue_80x30_normal.png fade80/以上代码定义了一个按钮通用样式命名为btn_global_blue_80x30使用字体ID为system_bold_14普通样式下字体颜色为white并分别设置了普通状态、焦点状态和按下状态不同的背景图片最后还启用了动画效果。当我们需要给一个按钮应用这个通用样式时可以这样写Buttonclassbtn_global_blue_80x30textbluetooltip_textui::Buttons/要注意的是class属性必须在所有属性最前面当你需要覆盖一个通用样式中指定过的属性时只需要在class属性之后再重新定义这个属性就可以了。比如我希望我的按钮不使用通用样式的字体样色可以这样写Buttonclassbtn_global_blue_80x30fontsystem_bold_12textui::Buttons/在定义通用样式的时候如果属性值被包含在双引号中的时候里面就不能再用双引号了如果非要用可以用双引号的XML转移字符这种情况下可以使用单引号或者花括号来提高可读性。例如以下是定义了一个下拉框的通用样式其中使用了单引号padding‘1,1,1,1’和花括号padding{1,0,0,0}。!--下拉框--Classnamecombobkcolorwhitepadding1,1,1,1border_size1border_colorlight_grayhot_border_colorbluecombo_tree_view_classpadding0,0,0,0 border_size0,0,0,0 bkcolorwhite border_colorgray indent20 classtree_viewcombo_tree_node_classtree_nodecombo_icon_classbkimagepublic/caption/logo_18x18.png widthauto heightauto valigncenter margin2,0,2,0combo_edit_classbkcolorwhite text_alignvcenter text_padding2,0,2,0 single_linetrue word_wrapfalse auto_hscrolltruecombo_button_classheight{stretch} width{auto} margin{1,0,0,0} padding{1,0,0,0} border_size{1,0,0,0} hot_border_color{blue} pushed_border_color{blue} valign{center} hot_color{#FFE5F3FF} pushed_color{#FFCCE8FF} normal_image{file../public/combo/arrow_normal.svg valigncenter} hot_image{file../public/combo/arrow_hot.svg valigncenter}/Class 所有可用属性属性名称默认值参数类型用途namestring通用样式名称任何自定义名称string通用样式的值必须经过XML转义或者使用单引号(‘’)、花括号({})代替双引号7. 全局资源管理相关的接口类名称关联头文件用途GlobalManagerduilib/Core/GlobalManager.h全局属性管理工具类用于管理一些全局属性的工具类包含全局样式global.xml和语言设置等IRenderFactoryduilib/Render/IRender.h渲染接口的管理类渲染接口管理用于创建Font、Pen、Brush、Path、Matrix、Bitmap、Render等渲染实现对象FontManagerduilib/Core/FontManager.h字体的管理类ColorManagerduilib/Core/ColorManager.h颜色的管理类IconManagerduilib/Core/IconManager.hHICON句柄管理器ZipManagerduilib/Core/ZipManager.hZIP压缩包管理器DpiManagerduilib/Core/DpiManager.hDPI管理器用于支持DPI自适应等功能TimerManagerduilib/Core/TimerManager.h定时器管理器LangManagerduilib/Core/LangManager.h多语言支持管理器ImageManagerduilib/Core/ImageManager.h图片的管理类ImageDecoderFactoryduilib/Image/ImageDecoderFactory.h图片解码器的管理类支持扩展图片格式ThreadManagerduilib/Core/ThreadManager.h线程管理器用以支持线程间通信CursorManagerduilib/Core/CursorManager.h光标管理类WindowManagerduilib/Core/WindowManager.h窗口管理类资源链接Skia的编译文档库点击访问skia compilenim duilib的代码库点击访问nim duilib