XBMC开发教程

翻译自：http://wiki.xbmc.org/index.php?title=XBMC_Skinning_Tutorials

XBMC皮肤开发教程

欢迎来到XBMC皮肤开发教程的页面。这里既可以帮助XBMC皮肤开发新手了解整个系统是怎么工作的，也可以为老手提供一些有帮助的东西。现在立刻开始一个任务来看一下皮肤开发是怎么做的。

注意：更多关于XBMC皮肤开发的信息请关注页面 “Skinning XBMC”（http://wiki.xbmc.org/?title=Skinning_XBMC）和页面 “XBMC Skinning Manual”（http://wiki.xbmc.org/index.php?title=XBMC_Skinning_Manual）。

1，如何通过皮肤开发编译主菜单（家屏幕，Home Screen）

来自：http://wiki.xbmc.org/index.php?title=HOW-TO_edit_the_Main_Menu_(Home_Screen)_via_skinning 。

这一部分展示了如何重新布局主菜单，如何切换home按钮，如何使用两个不同的按钮加载相同部分，用不同的默认文件夹（例如有单独的 我的游戏 和 我的程序 部分）。

本教程将会展示在工程 Mayhem 3 skin 中如何修改Home屏幕上的主菜单。关于Confluence皮肤的请关注这个链接http://forum.xbmc.org/showthread.php?pid=713384%23pid713384 。本教程是的实现是修改PAL/Home.xml（http://cvs.sourceforge.net/viewcvs.py/xbmc/XBMC/skin/Project%20Mayhem%20III/PAL/Home.xml?view=markup）完成的。这个xml实现的Home窗口时针对4×3分辨率的，如果你想开发针对16×9分辨率的，你需要修改PAL16*9/Home.xml（http://cvs.sourceforge.net/viewcvs.py/xbmc/XBMC/skin/Project%20Mayhem%20III/PAL16x9/Home.xml?view=markup）。

1.1 如何重新布局主菜单

举个例子，你可以在相关的home.xml文件中，放置 “My Pictures normal push button”。在这里，你可依据自己的喜好调整posX，posY（也可以只调整posY）。当然如果你改变了一个按钮，你就必须调整其他的按钮来适应它。

注意，你必须为每个按钮编辑ondown 和 onup标签。ondown 和 onup标签标示着当前控件的按钮被你按下、松开时，哪一个按钮应该来替换它。你看到的数字。例如<onup>6</onup>中的6，是按钮的id。每一个按钮都一个唯一的id（<id>标签），应该把它和  onup、ondown区分开来。

只要写下所有按钮的posY 和 id，然后只要通过修改他们之间的posY标签就可以重新放置这些按钮（当然也要改变响应的 onup 和 ondown 标签）。

1.2 如何更改一个选项的功能

在XBMC的主页面（Home Screen）上以单独的按钮显示着主要的选项部分（我的应用-My Programs，我的图片-My Pictures，我的视频-My Videos，我的音乐-My Music）。本教程教你如何改变这些按钮中的一个使得它可以加载其他某个按钮的不同的默认加载目录。这时的你可以设置同一个按钮有两个不同的连接，有不同的默认路径。

特别的，本教程设置 “My Programs” 按钮使得 My Programs的默认路径是 F:\apps。然后，我们改变 “My Pictures”按钮使得这个按钮也加载 “My Programs”的内容，不过这一次我们设置默认路径为 F:\games。

我们在第一次编辑 Sources.xml时完成这些，来实现工程的源代码。然后，编辑皮肤中的 Home.xml 来改变 Pictures 按钮的软件功能。

1.2.1 配置源（Source Configuration）

你可以仅仅通过GUI增加源（当位于 My Programs的根列表时按 White）。

另外也可以通过配置Sources.xml来实现。下面我的 My Programs 的配置：

<xml>

 <myprograms>

    <default>Programs</default>

    <source>

      <name>Games</name>

      <path>F:\Games\</path>

      <depth>1</depth>

    </source>

    <source>

      <name>Programs</name>

      <path>F:\Apps\</path>

      <depth>1</depth>

    </source>

 </myprograms>

 </xml>

注意，我们已经设置了2个源——Games 和 Programs。并且我们已经设置好了 Programs的默认源。当点击 My Programs，会自动加载 My Programs的内容，并且显示F:\Apps（应用目录）中的所有应用。为了得到 Games源，我们不得不进入导航建立一个目录（pressing B），然后进入Games。我们希望Games作为单独的选项放置在主页面上，所以我们必须改变现有按钮中的一个（或者加一个新的）来完成此功能。

1.2.2 修改 My Pictures按钮成 My Games

加载你要使用的Home.xml文件。它或者在 PAL目录下，或者在PAL16×9目录下，这取决于你要应用于4×3，还是16×9的分辨率。

找到用于My Pictures按钮的<control>控件：

<xml>

<control>

       <description>My Pictures normal push button</description>

       <type>button</type>

       <id>4</id>

       <posX>91</posX>

       <posY>271</posY>

       <width>14</width>

       <height>13</height>

       <label>1</label>

       <onclick>ActivateWindow(MyPictures)</onclick>

       <font>special13</font>

       <onleft>98</onleft>

       <onright>99</onright>

       <onup>2</onup>

       <ondown>5</ondown>

       <textureFocus>home-focus.gif</textureFocus>

       <textureNoFocus>-</textureNoFocus>

       <textOffsetX>30</textOffsetX>

</control>

</xml>

就像我们所看到的，这个按钮通常有<label> 1(strings.xml中的一个参考（reference）)，并且一般加载 MyPictures 窗口（<onclick>标签）。改变这个文件中的 <label>并且替换<onclick>标签，如下：

<xml>

<control>

       <description>My Games push button</description>

       <type>button</type>

       <id>4</id>

       <posX>91</posX>

       <posY>271</posY>

       <width>14</width>

       <height>13</height>

       <label>My Games</label>

       <onclick>ActivateWindow(MyPrograms,Games)</onclick>

       <font>special13</font>

       <onleft>98</onleft>

       <onright>99</onright>

       <onup>2</onup>

       <ondown>5</ondown>

       <textureFocus>home-focus.gif</textureFocus>

       <textureNoFocus>-</textureNoFocus>

       <textOffsetX>30</textOffsetX>

</control>

</xml>

现在这个按钮将有一个叫“My Games”的标签（label），并且将会自动加载 My Programs的内容，使用 Games作为默认源。注意，我也改变了<description>标签——记录下你做的改动是一个良好的习惯。这个标签不会被XBMC解析——这样做仅仅是为了皮肤开发者。好了，功能已经完成，在xbox中重新加载这个文件，然后测试它。

1.2.3 美化按钮

我们最后要做的可能是调整当焦点在 My Games按钮时显示的图片。如果你已经测试过，你会发现当焦点在My Games按钮时，它仍然会显示 My Pictures的背景图片，没有作出调整。有两个方法来解决这个问题，下面介绍一种最简单的一个方法。

找到正被加载的图片。它是有标签<visible>Control.HasFocus(4)</visible>的 multiimage控件。（这个按钮我们上面设置的id是4）。

<xml>

<control>

     <type>multiimage</type>

     <id>0</id>

     <posX>182</posX>

     <posY>105</posY>

     <width>538</width>

     <height>362</height>

     <imagepath>4x3home-mypictures</imagepath>

     <visible>Control.HasFocus(4) + !Player.HasVideo</visible>

</control>

</xml>

就像你看到的，正在加载的图像赖在4x3home-mypictures/ 目录。我们想改变这个路径来加载Games的图片，因此我们修改<imagepath>标签成<xml> <imagepath>4x3home-myprograms</imagepath> </xml>。注意，这里你可以加载一个完全不同的 图像路径（imagepath）或者图像（image）。图像应该是大约 512×362 的，以匹配现在的图像。给图像命名，名字和 texttures中已包含的不一样即可（由于他们已经预打包进 Textures.xpr），例如可命名为“mygamesimage.png”。把它放在皮肤的媒体目录下，然后改变<imagepath> 标签成<xml> <imagepath>mygamesimage.png</imagepath> </xml>。

1.3 参考文献

More information on the structure of skin xml files can be found here

http://wiki.xbmc.org/index.php?title=Window_Structure

More information on the different skin files, window names, and id's can be found here

http://wiki.xbmc.org/index.php?title=Window_IDs

Information on Button controls

http://wiki.xbmc.org/index.php?title=Button_control

Information on MultiImage controls

http://wiki.xbmc.org/index.php?title=MultiImage_Control

2，如何通过皮肤使得一个对话在另一窗口自动弹射

3，如何通过皮肤使天气信息在家屏幕正常显示

4，如何通过皮肤增加一个窗口或者对话

来自：http://wiki.xbmc.org/index.php?title=HOW-TO_add_a_new_window_or_dialog_via_skinning 。

这一部分将展示如何在皮肤中增加一个新的窗口或者对话，并且怎么发射它当我们需要的时候。

XBMC支持皮肤开发者依据个人爱好增加任意数量的自定义窗口。皮肤开发者通过编写xml文件可以创建新的窗口，然后当新窗口应该被显示时，增加的xml源码按照需要加载。

注意，皮肤开发者不是可以在每个窗口中添加任意的控件的，许多控件（比如 list 和 thumb panel 控件）只能被XBMC控制和填充。但是，像 button， label， image， rss这些控件是可以随意添加的，没有任何问题。使用新增加的<info>标签，你可以使得自定义窗口显示所有相关信息的源。更多信息可以看参考文献部分。

本教程将会展示如何增加一个新的对话窗口，在用户点击皮肤上的一个按钮时可以呼出（pop up）这个对话窗口。

4.1 创建自定义的xml文件

我们开始创建一个新的窗口xml文件。XBMC加载所有形如 custom#.xml的文件，#是一个数字。这些文件从Home.xml中定义的位置加载，因此如果你想所有的XBMC用户都可以加载的话，你不得不为不同的分辨率创建单独文件。

我们创建一个新的xml文件 custom6.xml。我使用数字6，是由于默认皮肤已经有5个自定义的窗口！custom6.xml中最重要的部分是头部（header section），它定义了窗口放置的位置，窗口唯一的标识符，以及我们定义的窗口类型。

<window id="4567" type="dialog">

  <defaultcontrol>2</defaultcontrol>

  <allowoverlay>yes</allowoverlay>

  <visible>true</visible>

  <coordinates>

    <system>1</system>

    <posX>200</posX>

    <posY>100</posY>

  </coordinates>

  <controls>

  ...

  </controls>

</window>

最重要的标签如下：

id	必须是XBMC中尚未使用的唯一数字。这里有一些要避免的id（http://wiki.xbmc.org/index.php?title=Window_IDs）
type	我们把这个窗口设置为 dialog类型，这是因为我们希望这个窗口可以弹射在其他窗口之上。一个正常的窗口时没有这种行为的。
coordinates	我们已经设置这个窗口使用相对坐标，因此所有的窗口位置都相对于窗口的左上角被定义，左上角的绝对坐标我们定义为（200,100）。

这里（http://wiki.xbmc.org/index.php?title=Window_Structure）有更多关于剩下的标签的信息。

好了，现在窗口现在已经完成，你可以在<controls>模块中增加任意你想要的控件了。需要记住的是，这些控件的位置取决于你使用的 <coordinates>系统。

4.2 弹射判决

最后我们要决定什么时候窗口显示在屏幕上。当然，这取决于你希望窗口如何操作：

（1）窗口应该在按下一个控件或者遥控按键时弹射

如果是这样的话，你可以通过增加ActivateWindow(4567)到 keymap.xml 的一个 按钮上实现此功能。

（2）窗口应该被皮肤上的一个按钮激活

如果是这样的话，增加 button 控件到特定窗口，并且设置 <onclick>标签如下：

<onclick>ActivateWindow(4567)</onclick>

（3）窗口应该自动弹射当另一个窗口活跃时

你可以使用前面提到的xml文件中<visible>标签  <visible>Window.IsActive(window)</visible> 来实现这种变化，window变量可以是 一个字符创标识符，也可以是一个窗口的数字id。例如：

<visible>Window.IsActive(FullScreenVideo)</visible>

这条语句将使得在用户全屏播放视频时，窗口弹出。更多关于<visible>标签的内容关注此网页 http://wiki.xbmc.org/index.php?title=Conditional_Visibility 。

4.3 参考文献

More information on the structure of skin xml files can be found here

http://wiki.xbmc.org/index.php?title=Window_Structure

More information on the different skin files, window names, and id's can be found here

http://wiki.xbmc.org/index.php?title=Window_IDs

More information on the <info> tag can be found here

http://wiki.xbmc.org/index.php?title=InfoLabels

Information on Button controls

http://wiki.xbmc.org/index.php?title=Button_control

Information on Image controls

http://wiki.xbmc.org/index.php?title=Image_Control

Information on Label controls

http://wiki.xbmc.org/index.php?title=Label_Control

5，如何在皮肤中增加一种新的字体