ExDirectUI Theme

关于EXT

EXT是ExDirectUI主题文件(ExDirectUI Theme)的后缀名, 主题文件是ExDirectUI中最核心的组成部分之一, 它是用于存储窗口、控件外观和用户体验的核心文件 ExDUI主题包文件内含两个子文件, 分别是一张PNG格式的主题贴图文件和一个INI格式的主题描述文件, 这两个文件互相配合完成对UI中所有界面的外观进行管理的功能

文件结构

主题包文件的结构分为两部分:

  • 主题贴图文件 该文件格式为PNG, 可以通过PS、FW进行设计, 要求贴图之间不得重叠
  • 贴图描述文件 该文件格式为INI, 可以通过ExDUIThemeMaker生成, 也可通过记事本进行配置

一个主题包可以包含所有控件, 也可包含部分控件

贴图文件

完整的主题包贴图应包含以下部分：

  • 主窗口阴影图
  • 子窗口阴影图
  • 信息框背景图
  • 信息框 信息、错误、警告、询问、确认 五个图标
  • 菜单背景图
  • 菜单选中项背景图
  • 勾选、单选菜单项图标
  • 子菜单箭头图标
  • 系统菜单项 关闭、最小化、还原、最大化 四个图标
  • 关闭、最大化、还原、最小化、菜单、皮* 肤、设置、帮助 八个系统按钮的三态贴图
  • 按钮背景贴图
  • 单选框 未选中、选中 三态贴图
  • 选择框 未选中、半选中、选中 三态贴图
  • 下拉按钮背景三态贴图
  • 编辑框 正常、点燃、焦点 背景贴图
  • 水平、垂直 滚动条 滑条背景贴图
  • 水平、垂直 滚动条 两侧按钮、滑块 三态贴图

描述文件

描述文件用于配置关于各个控件贴图位置、大小、颜色等相关属性

完整的主题包描述文件语法如下：

  1. ; 开头的表示注释, 注意区分大小写, 本段代码中, 相关注释一般标注于下方
  2. ; 该主题包文件配置内参数是有错误的, 不要尝试直接使用哦
  3. [Info] 
  4. ;主题包信息
  5. theme="Ex_DirectUI"
  6. ;主题名称
  7. author="YHan"
  8. ;主题作者
  9. url="Http://t.qq.com/Micro5oft"
  10. ;与作者相关的链接
  11. version="4.0"
  12. ;主题版本,尽量与引擎版本一致
  14. [Color] 
  15. ;默认配色信息,对应值详见 Ex_ThemeGetColor 函数的相关参数
  16. ;支持的颜色表达式: 整数,#RRGGBBAA,rgb(r,g,b),rgba(r,g,b,a)
  17. 4=0
  18. ;菜单背景颜色
  19. 5=0
  20. ;窗口背景颜色
  21. 6=-872415232
  22. ;窗口边框颜色
  23. 7=-872415232
  24. ;菜单文本颜色
  25. 8=-872415232
  26. ;组件文本颜色
  27. 9=-872415232
  28. ;窗口标题颜色
  29. 13=0
  30. ;选中项目背景颜色
  31. 14=-1
  32. ;选中项目文本颜色
  33. 18=-872415232
  34. ;按钮文本颜色
  36. [Host] 
  37. ;主窗口外观信息
  38. rect=60,95,30,18
  39. ;正常阴影矩形位置
  40. rect.inactive=90,95,30,18
  41. ;失去焦点时阴影矩形位置
  42. ;注意:九宫矩形是不变的,一般复制正常的阴影调低透明度即可.
  43. gird=9,8,12,2
  44. ;阴影贴图九宫矩形
  45. margin=4,3,-4,-5
  46. ;边距偏移像素,即:客户区偏移像素,该参数矩形值分别为 左边、顶边、右边、底边
  47. rectround=4
  48. ;默认客户区圆角度
  49. cycaption=26
  50. ;标题栏区域的高度
  52. [Child] 
  53. ;子窗口外观信息, 参数同主窗口同名参数一致, 这里省略
  54. rect=75,95,30,18
  55. rect.inactive=90,95,30,18
  56. gird=9,8,12,2
  57. margin=4,3,-4,-5
  58. rectround=4
  59. cycaption=26
  61. [MessageBox]
  62. rect=400,0,2,170
  63. ;信息框背景贴图矩形, 信息框阴影同主窗口一致.
  64. gird=0,0,0,42
  65. ;设置不被拉伸的尺寸.如果设置0,则被拉伸.
  66. size=0,0,48,48
  67. ;信息框图标尺寸
  68. 16=309,115,48,48
  69. ;错误图标
  70. 32=199,115,48,48
  71. ;询问图标
  72. 48=144,115,48,48
  73. ;警告图标
  74. 64=89,115,48,48
  75. ;信息图标
  76. 128=254,115,48,48
  77. ;确认图标
  79. [Menu] 菜单信息
  80. rect=190,0,30,25
  81. ;菜单背景的矩形区域
  82. gird=12,13,1,1
  83. ;菜单背景九宫矩形
  84. margin=5,4,-9,-9
  85. ;边距偏移像素,即:客户区偏移像素,该参数矩形值分别为 左边、顶边、右边、底边
  86. margin.line=2,0,-2,0
  87. ;分割线偏移像素,该参数矩形值分别为 左边、顶边、右边、底边
  88. margin.icon=0,0,0,0
  89. ;菜单图标偏移像素
  90. margin.text=28,0,0,0
  91. ;菜单文本偏移像素
  92. rect.check=85,64,12,9
  93. ;菜单项选中图标矩形
  94. rect.radio=65,154,11,11
  95. ;菜单项单选图标矩形
  96. item=16,104,15,26
  97. ;选中菜单项背景贴图,不增加则使用纯色绘制
  98. item.gird=6,6,3,14
  99. ;选中菜单项背景贴图九宫矩形
  100. rect.sub=80,154,8,11
  101. ;子菜单箭头图标矩形
  102. offset=5,0,0,0
  103. ;子菜单的窗口偏移量(此值不可以设置过大)
  105. sys.close=6,12,12,12
  106. ;系统菜单 关闭图标矩形
  107. sys.max=7,38,14,12
  108. ;系统菜单 最大化图标矩形
  109. sys.restore=96,88,14,14
  110. ;系统菜单 还原图标矩形
  111. sys.min=6,62,12,11
  112. ;系统菜单 最小化图标矩形
  115. [SysButton] 
  116. ;系统控制按钮
  117. margin=0,0,0,0
  118. ;控制按钮偏移像素,相对于客户区: 左边,顶边,右边,备用
  120. close.size=0,0,33,26
  121. ;关闭按钮尺寸
  122. close.normal=0,0,33,26
  123. ;关闭按钮正常状态贴图
  124. close.hover=34,0,33,26
  125. ;关闭按钮点燃状态贴图
  126. close.down=68,0,33,26
  127. ;关闭按钮按下状态贴图
  129. ;下面的配置类似
  131. ;以下为最大化按钮
  132. max.size=0,0,28,26
  133. max.normal=0,26,31,26
  134. max.hover=32,26,31,26
  135. max.down=64,26,31,26
  137. ;以下为还原按钮
  138. restore.size=0,0,28,26
  139. restore.normal=89,78,28,26
  140. restore.hover=121,78,28,26
  141. restore.down=153,78,28,26
  143. ;以下为最小化按钮
  144. min.size=0,0,28,26
  145. min.normal=0,52,25,26
  146. min.hover=26,52,25,26
  147. min.down=52,52,25,26
  149. ;以下为菜单按钮
  150. menu.size=0,0,28,26
  151. menu.normal=0,78,28,26
  152. menu.hover=29,78,28,26
  153. menu.down=58,78,28,26
  155. ;以下为皮肤按钮
  156. skn.size=0,0,28,26
  157. skn.normal=185,78,13,26
  158. skn.hover=199,78,13,26
  159. skn.down=213,78,13,26
  161. ;以下为帮助按钮
  162. help.size=0,0,28,26
  163. help.normal=289,78,17,26
  164. help.hover=310,78,17,26
  165. help.down=331,78,17,26
  167. ;以下为设置按钮
  168. set.size=0,0,28,26
  169. set.normal=230,78,16,26
  170. set.hover=250,78,16,26
  171. set.down=270,78,16,26
  173. [Button] 
  174. ;按钮控件配置
  175. normal=0,104,15,26
  176. ;默认状态背景贴图
  177. hover=16,104,15,26
  178. ;点燃状态背景贴图
  179. down=32,104,15,26
  180. ;按下状态背景贴图
  181. focus=0,104,15,26
  182. ;焦点状态背景贴图
  183. gird=6,6,3,14
  184. ;背景贴图九宫矩形(四个按钮状态均使用该九宫)
  185. margin=3,3,-3,-3
  186. ;文本偏移矩形,该参数矩形值分别为 左边、顶边、右边、底边
  188. [SplitButton] 
  189. ;下拉按钮配置
  190. size=0,0,20,0
  191. ;宽度强制为20像素,高度根据填充方式(居中)绘制.
  192. normal=40,89,10,6
  193. ;默认状态背景贴图
  194. hover=40,96,10,6
  195. ;点燃状态背景贴图
  196. down=40,96,10,6
  197. ;按下状态背景贴图
  198. filltype=3
  199. ;填充状态,详见 Ex_ThemeDrawEx 相关参数
  201. [CheckButton] 
  202. ;复选按钮配置
  203. normal=2,132,17,17
  204. ;未选中状态下默认状态贴图
  205. hover=22,132,17,17
  206. ;未选中状态下点燃状态贴图
  207. down=22,132,17,17
  208. ;未选中状态下按下状态贴图
  210. check.normal=42,132,17,17
  211. ;选中状态下默认状态贴图
  212. check.hover=42,132,17,17
  213. ;选中状态下点燃状态贴图
  214. check.down=42,132,17,17
  215. ;选中状态下按下状态贴图
  217. half.normal=62,132,17,17
  218. ;半选中状态下默认状态贴图
  219. half.hover=62,132,17,17
  220. ;半选中状态下点燃状态贴图
  221. half.down=62,132,17,17
  222. ;半选中状态下按下状态贴图
  224. margin=2,0,2,0
  225. ;设置图标左右间距像素,该参数矩形值分别为 左边、备用、右边、备用
  227. [RadioButton] 
  228. ;单选按钮配置,同复选按钮同名参数一致, 这里省略
  229. normal=2,151,17,17
  230. hover=22,151,17,17
  231. down=22,151,17,17
  233. check.normal=42,151,17,17
  234. check.hover=42,151,17,17
  235. check.down=42,151,17,17
  236. margin=2,0,2,0
  239. [ScrollBar]
  240. ;滚动条配置
  241. size=0,0,10,10
  242. ;定义滚动条尺寸,水平滚动条高度为10,垂直滚动条宽度为10.
  244. ;以下为垂直滚动条
  245. Vert.bkg=324,43,10,60
  246. ;滚动条背景贴图
  247. Vert.bkg.gird=4,4,2,54
  248. ;滚动条背景贴图九宫矩形
  249. Vert.Thumb.normal=334,63,10,40
  250. ;滚动条滑块正常状态贴图
  251. Vert.Thumb.hover=344,63,10,40
  252. ;滚动条滑块点燃状态贴图
  253. Vert.Thumb.down=354,63,10,40
  254. ;滚动条滑块按下状态贴图
  255. Vert.Thumb.gird=4,4,2,34
  256. ;滚动条滑块贴图九宫矩形
  257. Vert.Top.normal=339,40,10,9
  258. ;滚动条顶部按钮正常状态贴图
  259. Vert.Top.hover=351,40,10,9
  260. ;滚动条顶部按钮点燃状态贴图
  261. Vert.Top.down=363,40,10,9
  262. ;滚动条顶部按钮按下状态贴图
  263. Vert.Bottom.normal=339,50,10,9
  264. ;滚动条底部按钮正常状态贴图
  265. Vert.Bottom.hover=351,50,10,9
  266. ;滚动条底部按钮点燃状态贴图
  267. Vert.Bottom.down=363,50,10,9
  268. ;滚动条底部按钮按下状态贴图
  270. ;以下为水平滚动条,与垂直滚动条类似,这里省略
  271. Horz.bkg=285,42,32,10
  272. Horz.bkg.gird=4,4,26,2
  273. Horz.Thumb.normal=285,52,32,10
  274. Horz.Thumb.hover=285,62,32,10
  275. Horz.Thumb.down=285,72,32,10
  276. Horz.Thumb.gird=4,4,26,2
  277. Horz.Left.normal=286,86,9,10
  278. ;滚动条左侧按钮正常状态贴图
  279. Horz.Left.hover=295,86,9,10
  280. ;滚动条左侧按钮点燃状态贴图
  281. Horz.Left.down=305,86,9,10
  282. ;滚动条左侧按钮按下状态贴图
  283. Horz.Right.normal=285,100,9,10
  284. ;滚动条右侧按钮正常状态贴图
  285. Horz.Right.hover=295,100,9,10
  286. ;滚动条右侧按钮点燃状态贴图
  287. Horz.Right.down=305,100,9,10
  288. ;滚动条右侧按钮按下状态贴图
  290. [Edit]
  291. ;编辑框配置
  292. normal=220,70,20,26
  293. ;正常状态背景
  294. hover=240,70,20,26
  295. ;点燃状态背景
  296. focus=240,70,20,26
  297. ;焦点状态背景
  298. gird=3,4,13,19
  299. ;编辑框背景九宫矩形
  300. margin=3,3,-3,-3
  301. ;编辑框内容偏移量,该参数矩形值分别为 左边、顶边、右边、底边
  302. filltype=3
  303. ;背景填充方式

制作主题

ExDirectUI 4.1 的主题包可以通过官方的界面设计器ExDirectUIBuilder中附带的工具 ExDUIThemeMaker 制作

制作主题需要提供相关控件的PNG贴图文件, 通过ExDUIThemeMaker的配置, 即可生成EXT主题包文件

ExDUIThemeMaker 的使用方法如下:

工具都没开始写, 哪来的使用方法, 自己脑补吧→_→