XBMC皮肤开发入门篇

XBMC皮肤开发入门篇

XBMC皮肤开发入门篇

XBMC具有非常灵活和强大的图形用户界面系统，使得制作主题皮肤和个人定制都十分便利。用户可以创建自己的个性化皮肤（或修改现有的皮肤）并与他人共享。 目前官方的默认皮肤是“Confluence”。

1，简介

XBMC包括一个全新编写的图形用户界面支持库。这个库使你可以随意定制XBMC的显示界面，如图片、控件的大小和位置，颜色、字体和文本，可以改变界面导航特性，甚至添加新的功能。这个皮肤系统相当复杂，在此，我们对它的工作机制做一个深入浅出的介绍，希望对有意制作XBMC皮肤的朋友有所帮助。

目前XBMC的默认皮肤是“Confluence”，它可以在XBMC SVN找到，这个皮肤最初是Jezz_X制作的，现在由XBMC团队不断更新。如果你想让XBMC可以自动读取并且可以在Settings->Appearance下加载你自己制作或下载的其他皮肤，你必须把它放在 Skin 子目录下。可以到 Installing Skins（http://wiki.xbmc.org/index.php?title=Installing_Skins）获取更多相关知识。目前，XBMC只支持皮肤版本高于2.1.0，低于2.1版本的皮肤不能使用。

通过看一遍 “XBMC Skinning Manual”（http://wiki.xbmc.org/index.php?title=XBMC_Skinning_Manual）和 “XBMC Skinning Tutorials”（http://wiki.xbmc.org/index.php?title=XBMC_Skinning_Tutorials）这两篇文章，你就可以开始尝试修改制作皮肤啦。你可以尝试修改一两个窗口，在里面加一个button，或者改变窗口的结构和布局。

请注意！自从10.5版本（至少是 nightlies）开始，皮肤系统已经做了轻微的改动。例如在微软系统中（MS），窗口文件（windows files）被放置在了

"Program Files\XBMC\addons\skin.confluence\720p" ，而不是在“skin”目录下。同时值得注意的是，你要在“720p”目录中找 home.xml 文件。

2，剖析皮肤

系统默认的 “Confluence” 皮肤是你学习皮肤制作的很好的范例，它包含了新版XBMC提供的很多新功能。如果你想制作自己的皮肤，可以先把“Confluence” 皮肤目录中的所有内容拷贝到一个新的目录中，比如XBMC/addons/MySkin目录。然后你可以根据自己的要求编辑修改皮肤中的每个文件，这样你就能很快地熟悉XBMC的皮肤系统。

每个皮肤目录中都必须包含一上addon.xml文件，下面是皮肤的基本目录结构：
MySkin/addon.xml
XBMC从这个文件中获取如何找到皮肤中用到的其他文件的信息。这个文件还包含开发人员信息和版本信息。
MySkin/fonts
这个子目录包含皮肤中用到的所有字体文件，在这里，你可以增加或者替换字体。
MySkin/media
这个子目录包含所有的媒体文件（.png/.gif/.jpg...） 
MySkin/sounds
这个子目录包含所有的声音文件（sounds.xml/.wav...）
MySkin/colors
这个子目录包含定义皮肤中使用的颜色的xml文件，可以在这里定义不同的颜色主题。
MySkin/PAL
与显示分辨率相关的目录。

大部分皮肤还包含下面这些子目录：
MySkin/PAL16x9
与显示分辨率相关的目录。
MySkin/NTSC
与显示分辨率相关的目录。
MySkin/NTSC16x9
与显示分辨率相关的目录。
MySkin/720p
与显示分辨率相关的目录。
MySkin/1080i
与显示分辨率相关的目录。

XBMC可以运行于不同的显示分辨率，可能在不同分辨率下用到不同的文件（这是因为对于720x480的NTSC分辨率和1920x1080的1080i分辨率来说，在显示上有很大不同的）。 我们另文 “How Window XML Files Are Found”（http://wiki.xbmc.org/index.php?title=Skin.xml#How_window_xml_files_are_found）介绍XBMC是按什么优先顺序来读取不同分辨率皮肤文件的。

有的高级的皮肤还使用一些特殊的子目录来保存要用到的附加组件，例如：
MySkin/extras
通常用来保存皮肤中使用的特殊组件或功能文件（如脚本程序等）
MySkin/docs
通常用来保存文档资料（如readme、changelog等）

总之，目的是使你的皮肤目录结构清晰易读，易于维护和查找错误。如果你是一个XBMC皮肤开发小组的成员，你就会发现这是非常重要的。

3，皮肤主题

一个皮肤中用到的所有基本的媒体文件都应该压缩到Textures.xbt文件中，并存放到media/目录。你可以用TexturePacker工具来完成这个工作。默认皮肤主题使用的所有图片文件都应该在Textures.xbt文件中。

此外，media/目录中允许有其他 .xbt 文件，每个文件对应不同的皮肤主题。例如，你可以把皮肤的主要纹理贴图文件色调做成红色的，然后创建一个新的主题媒体文件压缩包Red.xbt ——这使得对于一个皮肤，用户能选择更多的显示效果。要记住变更皮肤主题只是使用了不同的纹理贴图文件——皮肤的显示布局不变。用户选定一个皮肤主题后，当某个控件需要用到纹理贴图时，XBMC会先到 <主题名称>.xbt 文件中去找。如果<主题名称>.xpr中没有这个图片文件，它会自动退回到Textures.xbt 文件中读取。也就是说皮肤主题的.xbt文件中只需要包含修改过的纹理贴图文件－所有其他纹理贴图可以使用Textures.xbt。

当用户选定一个皮肤主题时，XBMC同时会自动选择这个皮肤主题的默认颜色集，也就是colors/目录中的<主题名称>.xml文件定义的颜色。详见后文。

建议用下面的方法建立皮肤主题：
1. 在保存默认纹理贴图文件的目录运行TexturePacker.exe生成Textures.xbt 。
2. 确定制作新皮肤主题时要修改的纹理贴图并把它们拷到一个单独目录中。
3. 在正常的皮肤工作区之外为每个皮肤主题建立单独的目录，然后把针对这些主题修改过的纹理贴图存到里面。
4. 在步骤3建立的每个皮肤主题目录上运行TexturePacker.exe来生成皮肤主题的 .xbt 文件（注意：你可以使用-output参数指定适当的文件名）。
5. 把Textures.xbt和每个皮肤主题的.xbt文件都存放到你的皮肤的media/目录中，XBMC就能自动找到它们了。

4，颜色主题

不同的皮肤颜色主题由colors/ 目录中的xml文件定义。从这里获取更多内容（http://wiki.xbmc.org/index.php?title=Colour_Themes）。（以下是此网页上的内容）

位于colors/ 目录中的xml文件包括了不同的皮肤颜色主题。这使皮肤开发人员可以在编写皮肤代码时使用事先定义好的颜色英文名称（好过使用16进制颜色码），同时也可以支持不同的颜色主题。
每个颜色主题有一个单独的 .xml 文件，默认颜色主题由default.xml定义——其它颜色主题中没有定义的颜色XBMC也会到这个文件中查找。
颜色主题.xml文件结构如下（注意，十六进制数是ARGB格式颜色码）：

<colors>

   <color name="white">ffffffff</color>

   <color name="grey">7fffffff</color>

   <color name="green">ff00ff7f</color>

</colors>

现在你可以在皮肤文件中以<textcolor>white</textcolor>这样的形式来指定所使用的颜色了。这也使你只要在colors/目录中编写一个新的 .xml 文件就能改变整个皮肤的颜色了。

5，字体

XBMC中可以自定义用户界面中显示的字体。更多内容在 Fonts 部分（http://wiki.xbmc.org/index.php?title=Fonts）。

6，包含文件

另一个特殊的（甚至可说是最重要的）皮肤文件是includes.xml。这个文件正如其名，是定义皮肤中控件的默认外观、大小、位置的地方，它使你在窗口xml文件中不用反复复制不同控件中用到的相同属性设置。例如，你可以设置一个按钮控件的大小和使用的纹理贴图，这样你在其他皮肤文件中就不用重复设置这些详细信息了，除非你在某个特定的窗口中有特殊要求而需要更改默认的外观或大小等属性。

这是非常有用的，因为它大大减少了皮肤开发的工作量。此外，使用包含文件意味着只要在不同显示分辨率的包含文件中调整参数就能很方便地支持不同分辨率了。

其实在2.1版的皮肤引擎支持下，你可以有一个以上的包含文件——您可以指定文件属性来使用不同的包含文件，这使你可以让一个包含文件专注于一组特定的属性。

包含文件的文件结构如下所示：

<includes>

     <include name="whitetext">

       <textcolor>ffffffff</textcolor>

     </include>

     <include file="listdefaults.xml" />

     <default type="button">

       <include>whitetext</include>

     </default>

     <constant name="leftedge">50</constant>

</includes>

从上面的中可以看到，有4个不同类型的包含。第一个 <include> 标签定义的内容会在这个包含名称被引用时插入到引用位置。例如，如果在一个窗口的 .xml 文件中这样写：  <control type="togglebutton">

    <include>whitetext</include>

... other tags go here

</control>

包含标签中定义的<textcolor>标签就会被插入到引用位置。你可以使用多个包含的引用，同时一个包含定义中可以有很多标签内容——甚至可以是一个完整的控件定义或控件组定义。

例子中第二个<include>标签演示如何引用不同文件中的内容。由于没有指定包含名称，这将把整个文件内容插入到引用位置。

<default>标签类似于包含，不同的是它的内容会被同类型的所有控件所引用——如果你没有明确说明空间不使用这个包含的话。在上面的例子中每一个buuton控件都会引用whitetext包含。当然，你可以通过在按钮控件中定义<textcolor>来覆盖这个默认定义。

最后，使用<constant>标签可以定义数值常量（浮点数），这样就可以使用常量名称而不是直接使用数值（<posx>, height="" 等）。这利于使用统一的位置值，也方便调整这些数值，不用每个地方去改了。

7，窗口XML文件

其他xml文件每一个定义皮肤中的一个窗口。它们都有相同的基础结构，让你能在窗口上放置不同的控件，并定义导航操作的方式。

你可以在XBMC知识库中Window ID's页面（http://wiki.xbmc.org/index.php?title=Window_IDs）找到所有窗口.xml文件的列表以及它们对应的界面窗口。

每个窗口都有一个唯一的标识码（id），这个标识码是很重要的。XBMC在源码中用标识码（id）来识别窗口。此外，每个窗口中的许多控件同样应该有一个唯一的标识码，除非他们只是用于固定内容的图片或标签，XBMC不需要对它做什么操作因而不需要识别它。Window id’s 都在window list（http://wiki.xbmc.org/index.php?title=Window_IDs）中列出。

窗口 .xml 文件的结构参见XBMC知识库中Window Structure页面（http://wiki.xbmc.org/index.php?title=Window_Structure）。

8，控件

控件是皮肤开发的主要内容，它定义几乎所有东西，从按钮到文本标签，到可视化布局等。XBMC知识库中Controls页面详细介绍每一个控件（http://wiki.xbmc.org/index.php?title=Controls）。

9，可见条件

XBMC皮肤引擎的强大之处就在于，皮肤开发者可以使用多种多样的条件语句来显示和隐藏皮肤的某一部分，由此能设计出非常用户友好的界面。关于可用的变量以及使用方法的进一步介绍参见XBMC知识库中Conditional Visibility页面（http://wiki.xbmc.org/index.php?title=Conditional_Visibility）。

10，皮肤动态效果

XBMC皮肤引擎支持所有控件的动态效果，如旋转、滑动、淡入淡出或任意组合。用条件语句组合动态效果会令你的皮肤有出众的效果。更进一步的资料请参阅XBMC知识库中Animating Your Skin页面（http://wiki.xbmc.org/index.php?title=Animating_Your_Skin）。

11，皮肤开发教程

Skinning Tutorials页面（http://wiki.xbmc.org/index.php?title=Skinning_Tutorials）既可以帮助XBMC皮肤开发新手了解整个系统是怎么工作的，也可以为老手提供一些有帮助的东西。

12，帮助命令

当开发者开发皮肤时，开发者需要XBMC重新加载当前皮肤。为了避免乏味的操作：加载其他皮肤，重新加载你的皮肤，甚至为了看到修改效果还需要关闭，重新打开XBMC，你可以定义一个快捷键来刷新皮肤。

一个快捷键的例子Keymap.xml:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 

<keymap> 

    <global> 

        <keyboard> 

            <F5>XBMC.ReloadSkin()</F5> 

            <F4>Skin.ToggleSetting(DebugGrid)</F4> 

            <F6>Notification(Testing 123,Hello world)</F6> 

        </keyboard> 

    </global> 

</keymap>

在这个例子中，F5用来重新加载皮肤，F4来加载皮肤DebugGrid（就像是Aeon），F6来显示一个发射消息（DialogKaiToast.xml）。

13，相关页面

1，Category:Skins http://wiki.xbmc.org/index.php?title=Category:Skins

2，Add-onshttp://wiki.xbmc.org/index.php?title=Add-ons

3，3rd party add-on repositorieshttp://wiki.xbmc.org/index.php?title=3rd_party_add-on_repositories

开发页面

1，Add-on developmenthttp://wiki.xbmc.org/index.php?title=Add-on_development

2，Python developmenthttp://wiki.xbmc.org/index.php?title=Python_development

3，Add-on repositorieshttp://wiki.xbmc.org/index.php?title=Add-on_repositories

4，Official add-on repositoryhttp://wiki.xbmc.org/index.php?title=Official_add-on_repository