千千静听皮肤制作详细说明.docx

千千静听皮肤制作详细说明.docx

《千千静听皮肤制作详细说明.docx》由会员分享，可在线阅读，更多相关《千千静听皮肤制作详细说明.docx（8页珍藏版）》请在冰豆网上搜索。

千千静听皮肤制作详细说明

[原创]千千静听皮肤制作详细说明

　　这几天写了一个皮肤制作的说明，希望能给想自己制作千千静听皮肤的各位朋友一些帮助，也希望大家能够做出更漂亮的皮肤出来，更好地支持千千静听！

概述

　　千千静听的皮肤是以.skn为扩展名的文件，这些文件存放于安装目录下的skin文件夹下。

实际上这些文件都是ZIP格式的压缩文件，把他们的扩展名改为.zip后可以用WinZip或WinRAR等软件解压，解压后所得到的就是皮肤的真实内容。

4.0版以后直接用.zip的后缀名就可以了，不必再改成.skn了。

　　每个皮肤都是很多.bmp格式的图片和一个名为Skin.xml的文件组成，运行千千静听时我们所能看到的皮肤都是由这些图片拼成的，而Skin.xml定义了不同的图片的位置，比如说播放按钮在哪里，暂停按钮在哪里等等。

　　皮肤中的图片可以通过Photoshop等图像处理软件制作，就这一部分这里不想过多介绍，这里主要介绍的是Skin.xml的写法。

　　Skin.xml是一个XML格式的文件，可以用Windows自带的记事本打开。

打开后可以看到每一行的格式都差不多，实际上这些行一共有三种类型：

1、

2、

3、

　　在本文中，XXX、YYY这样的项称作元素，AAA、BBB、CCC、DDD这样的项称作属性。

每一行都由“<”开头，之后是元素名，之后跟着若干个属性，最后以“>”结尾。

上面的AAA，BBB都是XXX的属性，是用于修饰XXX的。

比如说，播放按钮有一个属性叫position，用于说明播放按钮在窗口上的位置。

属性的顺序是不分先后的，属性的值都用双引号引上。

　　上面所列的第一种和第二种写法是在一起使用的，一般中间都隔了若干行，这样写的意思是这些行都从属于XXX，比如播放按钮从属于主窗口，环绕按钮从属于均衡器等等，而Skin.xml第一行和最后一行分别为和，就是说所有skin元素的所有部分都属于千千静听的Skin。

　　第三种实际上是一种缩写形式，即的缩写。

含义是说明XXX里不包含任何内容。

比如各个按钮，拖动条等，它们已经是最基本的单位，不能再细分了。

（关于XML文件的格式，可以参照相关的文档）

千千静听的四个子窗口

　　仔细分析Skin.xml可以发现其结构如下：

   …

   …

   …

   …

　　现在一行一行分析：

　　这一行说明了“skin”是最外层的元素，version，name等属性说明了整个皮肤的一些特征。

其中version指明了皮肤版本号，现在的版本号为2，等以后千千静听扩充功能后其界面可能会有所改变（比如增加某个按钮等），到那时皮肤的版本号也会一起增加；后面的name、author、utl、email属性说明了皮肤的名称、本皮肤作者的名字、作者的主页、作者的电子信箱，在切换皮肤时可以看到这些信息；transparent_color是一个很重要的属性，即透明色。

定义了透明色之后，皮肤上的这个颜色的部分都会被显示为透明。

BMP格式的图片都是矩形的，但有些皮肤上的按钮可以设计成圆形的，就是利用了透明色。

把圆形之外的部分的颜色都设成透明色，这样显示出的按钮就是圆型了，同样窗口的图片也可以设计成各种不规则的图案。

背景色用颜色的RGB编码表示，比如纯紫色的RGB码为#ff00ff，RGB编码可以在Photoshop里查看。

　　再向下说明了千千静听的四个子窗口：

主窗口（即player_window元素）、均衡器窗口（即equalizer_window元素）、歌词列表窗口（即playlist_window元素）、歌词秀窗口（即lyric_window元素）。

其image属性是各个窗口所用的背景图片；position属性是各个子窗口相对于主窗口的位置，position属性的格式是“x1,y1,x2,y2”，其中（x1,y1）为各个子窗口左上角相对于主窗口左上角的坐标，x2-x1,y2-y1为各个子窗口的长度和高度（参见注意3）。

当切换到本皮肤时各个窗口就会按照这个位置重新排列窗口，当右击托盘图标-查看窗口-重新排列时各个窗口也会按照这位置排列。

playlist_window元素和lyric_window元素都有一个resize_rect属性，属性的格式为“x1,x2,y1,y2”它们所代表的播放列表窗口和歌词秀窗口均可以改变窗口大小，当改变窗口大小时，在水平方向仅仅x1到x2的部分被拉长，垂直方向仅仅y1到y2的部分被拉长，在这些区域以外的部分保持不变（参见注意4）。

eq_interval属性定义了均衡器10个分段滑块之间的间隔。

playlist_window元素和lyric_window元素还有一个属性是resize_tile，这个属性是4.1版新增加的属性，这个属性可以取值为0或1，如果取值为0，就表示在改变窗口大小时采用拉伸的方式，如果为1表示在改变窗口大小时采用平铺的方式，这个属性也可以不写，如果不写，在拉伸窗口时就用拉伸（即这个属性的默认值为0），这样做是为了更好地兼容4.0以前版的皮肤。

（拉伸与平铺的概念可以参考一下windows的桌面墙纸）

窗口内容

　　上面例子中的省略号里略去的是各个窗口的内容，限于篇幅在这里不一一列出，大家可以解压一个皮肤后自己看一看。

各个窗口里的每一个元素的格式都是类似于“”这样的写法，每个元素所对应的窗口内容见下面几张图片。

这里介绍一下各个元素的属性。

　　position：

存在于播放列表窗口的scrollbar外的所有元素内（播放列表窗口的scrollbar的位置是固定的，位于playlist的最右边，所以不必使用position属性），说明了本元素的位置，与子窗口的position类似。

唯一的区别就是子窗口的坐标是相对于主窗口左上角的，而这里的坐标是相对于各个子窗口左上角的。

个别元素的position属性需要特别说明：

1、主窗口的progress、volume元素和均衡器窗口的balance、surround、preamp元素的position属性表示的是滑块能够移动的范围的坐标；2、均衡器的eqfactor元素的position属性表示的是10个滑块中第一个滑块的位置，而其它属性对于所有10个滑块都有效；3、播放列表的playlist元素、歌词秀的lyric元素的position属性表示显示播放列表和歌词的范围（当播放列表窗口和歌词秀窗口改变大小时，这两个元素会自动跟着改变大小，但它们的四个边和窗口的四个边的距离就是通过这个position来体现的）。

　　image：

指明了本元素所使用的图片。

如果元素是一个按钮，那么元素所对应的图片应该是四张同样大小的图片排在一起的，这四张小图片分别代表：

鼠标不在按钮上时的图片；鼠标在按钮上时的图片；鼠标按下时的图片；当按钮无效时（比如如果没有选择播放的文件时，播放按钮就是无效的）的图片（对于圆型等非矩形的按钮，也可以使用皮肤指定的透明色，效果和主窗口一样，把不要显示的部分用透明色填空就可以了）。

主窗口内led元素使用的图片必须是12张同样大小的图片排在一起，分别代表0-9十个数字、冒号和减号（同样可以使用透明色）。

　　color，bkgnd，font，font_size：

存在于主窗口的info、stereo、status元素内，用于设定文字的颜色、背景色、字体和字号。

（如果想显示透明的文字，就不需要指定背景色（bkgnd）了）

　　align：

align的含义有两种，一种是在主窗口的led、info、stereo、status元素内，此时可以取值为left、center、right，代表这些文字的缩进方式；另一种是在歌词秀窗口title、close、ontop元素，播放列表的title、close、toolbar元素内，此时可以取值为left、center、right、top、bottom这些自窗口均可以调整大小，align属性的含义是当调整大小时元素位置相对于那个边框移动，比如如果设置为“bottom+center”，那么当窗口改变大小时该元素始终与下边框保持同样的距离移动并且在水平方向始终在中间。

　　thumb_image属性：

存在于主窗口的progress、volume元素和均衡器窗口的balance、surround、preamp、eqfactor元素内，定义各自的滑块的图片。

（这种图片和按钮的一样，可以用使用透明色）

　　fill_image属性：

存在于主窗口的progress、volume元素和均衡器窗口的preamp、eqfactor元素内，定义了移动滑块时填充的图片。

　　bar_image属性：

存在于主窗口的progress、volume元素、均衡器窗口的balance、surround、preamp、eqfactor元素和播放列表窗口的scrollbar元素内，代表这些部分的背景图片。

当然，这些背景也可以直接画在窗口里，但是使用bar_image的好处是当改动这些元素的位置时背景可以自动改变位置，而不用在窗口里重画背景。

另外，由于播放列表的滚动条在歌曲较少时会自动隐藏，而且该窗口可以改变大小，所以对于播放列表的scrollbar元素，最好不要把背景直接画在窗口里。

　　vertical属性：

存在于主窗口的progress、volume元素内，可以取值为true或false，当取值为true时，滑块按水平方向移动，当取值为false时，滑块按垂直方向移动。

　　scrollbar的buttons_image、thumb_image和bar_image：

当播放列表的歌曲超过窗口高度时，列表右边会出现滚动条，buttons_image、thumb_image和bar_image元素分别定义了滚动条的上下滚动按钮、滑块、滚动条背景的图片。

需要注意的是：

buttons_image是由6个相同大小的图片组成的，其中3个图片表示向上滚动的按钮，另三个表示向下滚动的按钮。

　　thumb_resize_center属性：

存在于播放列表窗口里的scrollbar元素内，是指scrollbar的thumb滑块中可以进行缩入的中间那个部分的大小，而且缩放是采用平铺的方式，也就是把中间这么大的图片平铺成比原始图片更长的滚动条的滑块。

　　thumb_resize_tile属性：

这两个属性是4.1版新增加的属性，存在于播放列表窗口里的scrollbar元素内，作用与播放列表窗口和歌词秀窗口的resize_tile相同。

迷你模式

　　迷你模式的窗口实际上就是主窗口的另外一个皮肤，只不过一般情况下需要把这个皮肤做得小一些。

迷你窗口的所有参数都和主窗口的一样，主窗口里有的所有内容（比如说播放按钮，暂停按钮等）均可以加入到迷你窗口里。

但既然这个窗口叫做“迷你窗口”，那么各个内容的图片就应该尽量做得小一些，而且这个窗口也要做得小一些，以免占用过多的屏幕空间。

　　迷你窗口的窗口元素是：

 …

　　把这个元素加入到上面列出的Skin.xml后就可以显示迷你模式了。

　　中间省略的部分为迷你窗口里的内容。

　　具有迷你窗口的皮肤在主窗口上最好另加一个按钮，用于切换到迷你模式。

这个按钮元素的格式为：

　　其各个属性与其它按钮都一样。

　　另外，在迷你窗口也可以加上这个按钮元素，在迷你模式按下这个按钮时会切换到普通模式。

（但可以指定一个与主窗口上的不一样的图片，以区分是从普通转到迷你模式还是从迷你转到普通模式）

压缩文件

　　建立好Skin.xml和各个图片后，把所有的文件压缩成一个ZIP文件，然后拷贝到千千静听的Skin目录内，并把扩展名改为.skn（不改扩展名也可以），就可以转换到新皮肤了。

注意：

　　1、BMP图片可以保存为8位位图或24位位图，8位位图做成的皮肤虽然所能表示的颜色较少，但是调用这样的位图时程序所占的内存也较少，所以当皮肤的颜色比较简单时，应尽量把图片保存为8位的位图。

（可以使用PhotoShop的模式转换功能，先在RGB模式下准备好图片，再由RGB转成索引模式。

如果有透明色时要注意两点：

1.在填充透明色时，一定不要选“容差”，2.转换时一定要选中“保留原始颜色”，以防止填充的透明色被改掉。

）

　　2、一个皮肤只能定义一个透明色，并且定义透明色时应尽量选择与皮肤色调相差较大的颜色，否则很容易使皮肤上的颜色与透明色重复，导致把必要的部分透明了。

　　3、关于position属性：

该属性的格式为“x1,y1,x2,y2”，其中的y1和y2并不是元素右下角的坐标。

因为x2-x1,y2-y1表示元素的长度和高度，所以（x2,y2）应该是元素右下角在右下方的那个点的坐标。

就是说元素右下角的坐标应该为（x2-1,y2-1）。

　　4、播放列表和歌词秀窗口的position属性定义了这两个窗口初始化时的大小，这个大小可以不是图片的大小。

如果这样的话，这两个窗口在初始化时就会按照resize_rect的规则拉伸窗口。

另外，这两个窗口最大可以拉伸到与屏幕同样大小，但最小只能缩小到与原始图片同样的大小，所以原始图片应该尽量画得小一些，这样用户在改变窗口大小时能够更加灵活，并且由于图片更小同时也就减少了内存的使用。

　　5、当用鼠标在千千静听的播放时间（即主窗口的led元素）上点一下时，这个播放时间就会变成一个负数，代表剩余时间，由于会有少部分歌曲长度大于10分钟，加到一起在主窗口上应该给led至少留出6位的空间，用于表示如-12:

32这样的值，否则一旦出现这样的值，那么数字将盖到面板上的其它部分，影响美观。

　　6、如果不想在子窗口上显示某些元素，那么可以删去相应的元素。

同样，元素的部分属性也可以省略不写。

　　7、最后压缩时应该压缩所有文件，而不是压缩这些文件所在的文件夹，否则皮肤无效。