SOUI皮肤浅谈

对于SOUI来说皮肤对象是一个很重要的对象。SOUI内置一了套常用皮肤，祥见soui-sys-resource\theme_sys_res\sys_xml_skin.xml。这里定义了几乎所有常用的皮肤。对于SOUI来说皮肤就是一个绘制对象，它可能是图片，也可能是色彩或者其它方法绘制的图形图像。皮肤和控件关系就像灵与肉，控件一方面实现功能，另一方面调用皮肤装饰自己让它看起来是某个控件。但是另一方面皮肤又是一个独立的组件，也就是说皮肤完全可以把一个button装扮成一个img。而让用户无知无觉。所以如果要控件上绘制行为和预期不符时应该检查皮肤是否和预期一致。对于常见皮肤一般为四态，分别对应 0-常规 1-鼠标移入 2鼠标按下 3 鼠标按下或控件处理选中状态 4 禁用控件。而对于一些控件比如checkbox img icon等等则要求状态数有不同要求。对于新版SOUI提供了一个重定义子图对应的功能如下： 

<imglist name="_skin.sys.btn.close" src="PNG:SYS_BTN_CLOSE" states="3">

    <states>

      <state index="0" value="normal|disable"/>

      <state index="1" value="hover"/>

      <state index="2" value="pushdown"/>

    </states>

</imglist>

这里定义了一个叫imglist的皮肤，但是它只有三个状态，所以使用states（注意这里讲的是states子节点，这里约定”states”即说“states子节点”，“states数”即上文的states="3"）功能重定义了子图和状态之间的关系，由上可知，normal和disable时，控件的外观都是显示第一个子图，那么什么是子图呢，对于SOUI实现的默认皮肤几乎都是按states数来均分皮肤图片，对于以上例子皮肤会把PNG:SYS_BTN_CLOSE这个图均分为三个子图，比如这个图是120像素宽20像素高，那么子图会把它均分为三个40像素宽*20像素高的三个图来绘制。默认情况下SOUI是水平均分的即按宽度均分，当然可以通过vertical=1 属性来让它按高度均分。当然也有部分皮肤按自己的特殊方式来切割图片，比如SSkinScrollbar .所以皮肤最后的实现绘制还是要看皮肤自己的实现。对于图片类皮肤通常有个很重要的src属性，由于SOUI的资源都是由sapp来统一管理，所以它必须加载到sapp。对于SOUI资源定义通常放在uires.idx里。这里定义了xml，图片，菜单等一系列资源。PNG:SYS_BTN_CLOSE这里的PNG即图片的父结点名 SYS_BTN_CLOSE为子节点上图片名。

SOUI目前内置皮肤有如下类型：

l

SSkinImgList（多子图皮肤，支持横向或纵向均分）

l

SSkinImgCenter（和 imglist 的区别是当控件比它大时可以使它居中绘制）

l

SSkinImgFrame（支持九宫拉伸的 imglist）

l

SSkinImgFrame2（支持.9 格式九宫拉伸）

l

SSkinButton（支持渐变化的按钮皮肤）

l

SSkinGradation（渐变色单态皮肤）

l

SSkinScrollbar(滚动条皮肤）

l

SSkinColorRect（纯色矩形皮肤）

l

SSkinShape（形状）

l

SSKinGroup（可支持四态的组合皮肤，用于组合其它皮肤）

这些皮肤的具体属性可以参考SOUI群（群号：229313785）内共享《SOUI入门文档（第一版）》