皮肤说明
说明
框架自带的皮肤都是_skin.sys.XXXX开始,自带的皮肤存放位置trunk\soui-sys-resource\theme_sys_res,图片和名称映射关系可以打开trunk\soui-sys-resource\theme_sys_res.rc2 文件查看。
如何替换通过向导生成的关闭/最小化/最大化按钮图片?
找到在系统图片文件夹(trunk\soui-sys-resource\theme_sys_res)直接把文件替换掉,此方案最简单;
以下步骤是替换完整替换步骤:
uires.idx
<IMGX>
<file name="ID_PNG_WND_CLOSE" path="image\shut.png" /> <!-- name随意 -->
</IMGX>
引入新图片 一般关闭按钮这类图都是三态/四态图片,因此放到IMGX(规范)
init.xml 构建skin
<skin>
<imglist name="_skin.btn.wnd.close" src="IMGX:ID_PNG_WND_CLOSE" states="3"/>
<!-- 说明: src=标签名:name 此处是标签和name 即步骤I state=图片中状态数 此处是图片包含状态 一般是3(默认,高亮,按下)如果存在4状态那么就是禁用-->
</skin>
修改对应窗口xml文件 此处为dlg_main.xml文件
<root class="cls_dlg_frame" cache="1">
<caption pos="0,0,-0,30" show="1" font="adding:8">
....
<imgbtn id="1" skin="_skin.sys.btn.close" pos="-45,0" tip="close" animate="1"/>
<!-- 下面自定义关闭按钮 也就是把 skin名称改成第II中name即可 -->
<imgbtn id="1" skin="_skin.btn.wnd.close" pos="-45,0" tip="close" animate="1"/>
....
</caption>
....
</root>
以上就是完成步骤,至于替换背景图片也是相同道理
skin
<button name="win10btn" colorBorder="#ADADAD" colorUp="#E1E1E1" colorDown="#E1E1E1" colorBorderHover="#0078D7" colorUpHover="#E5F1FB" colorDownHover="#E5F1FB" colorBorderPush="#005499" colorUpPush="#CCE4F7" colorDownPush="#CCE4F7" cornerPercent="0.5" />
几种绘图类型
1、imglist
imglist 是一个图片序列对象,可以包含一组小图片,常见的如按钮需要使用的 4 种状态
图。
imglist 包含 4 个属性:
SOUI_ATTRS_BEGIN()
ATTR_CUSTOM(L"src", OnAttrImage)
//skinObj 引用的图片文件定义在 uires.idx 中的 name 属性。
ATTR_INT(L"tile", m_bTile, TRUE)
//绘制是否平铺,0--位伸(默认),其它--平铺
ATTR_INT(L"vertical", m_bVertical, TRUE)
//子图是否垂直排列,0--水平排列(默认), 其它--垂直排列
ATTR_INT(L"states",m_nStates,TRUE)
//子图数量,默认为 1
SOUI_ATTRS_END()
假定上图的图片在 uires.idx 中的定义为:
<imgx>
<file name='btn_next' file='image\btn.next.png'/>
</imgx>
要在 soui 中引用这个图片,需要在 init.xml 的 skins 结节中做如下声明:
<skins>
<imglist name=“skin_btn_next" src="imgx:btn_next" states="4" tile="0"
vertical="0"/>
</skins>
在上面的 skin 定义中,
name 属性告诉系统如何引用定义的 imglist
src 属性定义该 skin 需要使用哪一个图片资源,资源引用格式为 type:name,如上面使用
的 imgx:btn_next,对于图片资源,通常情况下也可以不指定 type,系统会自动在常用的
图片类型下查找,但不建议这样使用。
states 定义图中包含多少个子图。
title 定义图片在放大显示时时平铺还是拉伸,默认为拉伸。
vertical 属性定义图中的子图的排列方式。
在本例子中 tile 和 vertical 属性都可以不指定。
2、imgframe
imgframe 是一个提供九宫格显示的绘图对象,SSkinImgFrame 派生自 SSkinImgList,
因此 imgframe 也拥有 imglist 的全部属性。
此外,imgframe 提供了几个新的属性:
SOUI_ATTRS_BEGIN()
ATTR_INT(L"left", m_rcMargin.left, TRUE)
//九宫格左边距
ATTR_INT(L"top", m_rcMargin.top, TRUE)
//九宫格上边距
ATTR_INT(L"right", m_rcMargin.right, TRUE)
//九宫格右边距
ATTR_INT(L"bottom", m_rcMargin.bottom, TRUE)
//九宫格下边距
ATTR_INT(L"margin-x", m_rcMargin.left=m_rcMargin.right, TRUE)
//九宫格左右边距
ATTR_INT(L"margin-y", m_rcMargin.top=m_rcMargin.bottom, TRUE)
//九宫格上下边距
SOUI_ATTRS_END()
imgframe 的格式如上图,在 imgframe 中通过 left, top, right, bottom 来定义九宫格。
3、button
button 绘图对象是绘制按钮时使用的,它使用渐变实现绘制按钮的 4 种状态。
包含以下属性:
SOUI_ATTRS_BEGIN()
ATTR_COLOR(L"colorBorder", m_crBorder, TRUE) //边框颜色
ATTR_COLOR(L"colorUp", m_crUp[ST_NORMAL], TRUE) //正常状态渐变
起始颜色
ATTR_COLOR(L"colorDown", m_crDown[ST_NORMAL], TRUE) //正常状态渐
变终止颜色
ATTR_COLOR(L"colorUpHover", m_crUp[ST_HOVER], TRUE) //浮动状态渐
变起始颜色
ATTR_COLOR(L"colorDownHover", m_crDown[ST_HOVER], TRUE) //浮动状态渐
变终止颜色
ATTR_COLOR(L"colorUpPush", m_crUp[ST_PUSHDOWN], TRUE) //下压状态渐
变起始颜色
ATTR_COLOR(L"colorDownPush", m_crDown[ST_PUSHDOWN], TRUE) //下压状态渐
变终止颜色
ATTR_COLOR(L"colorUpDisable", m_crUp[ST_DISABLE], TRUE) //禁用状态渐
变起始颜色
ATTR_COLOR(L"colorDownDisable", m_crDown[ST_DISABLE], TRUE) //禁用状态
渐变终止颜色
SOUI_ATTRS_END()
4、gradation
渐变绘图对象,提供 3 个属性:
SOUI_ATTRS_BEGIN()
ATTR_COLOR(L"colorFrom", m_crFrom, TRUE) //渐变起始颜色
ATTR_COLOR(L"colorTo", m_crTo, TRUE) //渐变终止颜色
ATTR_INT(L"vertical", m_bVert, TRUE) //渐变方向,0--水平(默认), 1--
垂直
SOUI_ATTRS_END()
- scrollbar
滚动条皮肤,虽然它派生自 imglist,实际上 imglist 中实现的属性在 scrollbar 中没有意
义,只是为了省点代码。
SOUI_ATTRS_BEGIN()
ATTR_INT(L"margin",m_nMargin,FALSE)
//边缘不拉伸大小
ATTR_INT(L"hasGripper",m_bHasGripper,FALSE)
//滑块上是否有帮手(gripper)
ATTR_INT(L"hasInactive",m_bHasInactive,FALSE)
//是否有禁用态
SOUI_ATTRS_END()
一般的 scrollbar 皮肤资源如下:
如果没有帮手也没有禁用状态,图片应该是 8*3 的正方形网格。
有帮手则 X 增加一个网格,有禁用状态则 Y 增加一个网格。
6、border
给 menu 用的,以后再介绍。
style
在 style 节点中,定义 UI 布局中 SOUI 窗口对象的属性集合,它们是 SWindow 对象的属
性,所有 SWindow 对象都可以通过 class 属性来引用 style 节点中定义的属性集合。
objattr
控件的默认属性。
SOUI 可以为每一类 UI 控件通过 objattr 来提供一种默认属性集合,以减少在 XML 布局
中的重复定义。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)