PC客户端软件的皮肤配置方式有很多种，简单说来就是如何把图片在屏幕上贴起来，从需求上看，可能要应对多套皮肤、多种配色、异型皮肤等等。有的软件选择将所有小图片放在一张大图上，有的软件喜欢用各种小图放在一个目录下，还有的采用了混搭的方式，这里讲的是第一种。

先放出一张结构图来，方便理解（点击查看大图）：
请输入图片描述

theme处于最顶层，同一个皮肤下可以有多个style，一个style下可以有多个layout和color_schemes（实际上限制每个style只有一个layout跟color_schemes更好理解）。

layout的子节点就很清楚了，通常软件会有很多个窗体，其中有一个是主窗体，其他是附加窗体；每一个窗体里会有不同的组件，比如一个播放器窗体里可能会有滚动条组件、列表组件、按钮组件；每个组件为了美观，可以被划分为若干个碎片，比如滚动条的控制柄或是滚动条的顶部花纹等等，当一个组件为按钮的时候，碎片就要表现按钮的多种状态，如鼠标按下、弹起、悬停、按钮不可用，

图片的定位采用了选择起始坐标+长宽的方式，也就是image_x,image_y设定某个按钮贴图的左上角坐标，通过计算长宽来确定整个贴图的区域。

简单写一个配置文件如下：

<?xml version="1.0" encoding="utf-8"?>
<theme name="default">
  <style name="red" transcolor="#ff00ff">
    <!-- layout-->
    <layout>
      <windows name="main_windows" image="backgroud.bmp" backgroudcolor="#fffff" width="200" height="200" image_x="200" image_y="200" tips="主窗体">
        <module name="scrollbar" image="scrollbar.bmp" image_x="15" image_y="20" width="200" height="200"  type="scrollbar" tips="滚动条">
          <fragment name="scrollbar_top" tips="滚动条顶部">
            <area state="1" name="normal" image_x="0" image_y="0" width="9" height="12" />
            <area state="2" name="hot" image_x="9" image_y="0" width="9" height="12" />
            <area state="3" name="pressed" image_x="18" image_y="0" width="9" height="12" />
            <area state="4" name="disable" image_x="27" image_y="0" width="9" height="12" />
          </fragment>
        </module>
      </windows>
    </layout>
    <color_schemes>
      <class name="media_list_view">
        <color name="focus_text_color" value="#FFFFFF" />
        <color name="focus_text_backgroud_color" value="#FFFFFF" />
        <color name="normal_text_color" value="#FFFFFF" />
        <color name="hilight_text_color" value="#FFFFFF" />
      </class>
      <class name="lrc_view"></class>
    </color_schemes>
  </style>
</theme>

标签：无

评论已关闭