前文已經對XBMC原始碼的整體架構進行了分析：
XBMC原始碼分析 1：整體結構以及編譯方法
從這篇文章開始，就要對XBMC原始碼進行具體分析了。首先先不分析其C++代碼，分析一下和其皮膚相關的代碼。
XBMC 的和皮膚相關的代碼位於 "根目錄/addons" 裡面。可以從官方網站上下載皮膚檔案的壓縮包，然後解壓到該目錄下面即可。皮膚檔案夾名稱一般是“skin.XXXX”形式的，即以“skin.”開頭。
XBMC內建的皮膚儲存在檔案夾“skin.confluence”中。我從網上下載了4個皮膚，解壓後，如所示。
系統預設的皮膚：confluence。
可以在“skin”選項裡面選擇皮膚，。
皮膚“simplicity”。
皮膚“SiO2”。
可以看出。不同皮膚之間差距非常的大。皮膚囊括了XBMC所有可以看見的介面元素。可以說不修改原始碼，只製作皮膚，也可以完全定製出一套非常個人化的系統。
下面我們以系統內建的皮膚“confluence”為例，分析一下皮膚的構成。
skin.confluence檔案夾中，目錄結構：
每個檔案夾的作用：
例如，background檔案夾內容：
media檔案夾內容：
下面重點研究720p檔案夾中的內容。這個檔案夾中儲存了介面的布局資訊。系統會根據這個檔案夾中的布局資訊（xml形式）設定視窗的大小，並去其他檔案夾中尋找相關的素材。
我們以系統的“設定”頁面為例研究一下布局資訊。系統的布局頁面如所示。
“設定”頁面對應的布局資訊檔為Settings.xml。
時間所限，就不逐行注釋了。文法理解起來還是比較容易的。總結以下幾點：
1.文法與HTML類似。最外層的<window>相當於<html>。<controls>相當於<body>。<control>類似於<div>，是可以嵌套的。<content>相當於<ul>，<item>相當於<li>。當然，這隻是打個比方，方便理解。
2.各種組件都是<control>，就是屬性“type”不一樣。例如“image”，“group”等等。<control>中
<left>，<top>，<width>，<height>表示視窗位置；
<animation>表示其動畫效果；
<onleft>2</onleft>表示遙控器按向左鍵時如果焦點還在控制項裡面，並且己經是最左邊一個元素時，將焦點切換到ID為2的控制項；<onright>，<onup>，<ondown>與此類似。
<!--雷霄驊leixiaohua1020@126.com中國傳媒大學/數字電視技術--><?xml version="1.0" encoding="UTF-8"?><window><defaultcontrol always="true">9000</defaultcontrol><allowoverlay>no</allowoverlay><controls><include>CommonBackground</include><control type="image"><left>0</left><top>100r</top><width>1280</width><height>100</height><texture>floor.png</texture><animation effect="slide" start="0,10" end="0,0" time="200" condition="Window.Previous(Home)">WindowOpen</animation><animation effect="slide" start="0,0" end="0,10" time="200" condition="Window.Next(Home)">WindowClose</animation></control><control type="group"><left>90</left><top>30</top><animation type="WindowOpen" reversible="false"><effect type="zoom" start="80" end="100" center="640,360" easing="out" tween="back" time="300"/><effect type="fade" start="0" end="100" time="300"/></animation><animation type="WindowClose" reversible="false"><effect type="zoom" start="100" end="80" center="640,360" easing="in" tween="back" time="300"/><effect type="fade" start="100" end="0" time="300"/></animation><control type="image"><left>5</left><top>5</top><width>1090</width><height>630</height><texture border="15">ContentPanel.png</texture></control><control type="image"><left>5</left><top>625</top><width>1090</width><height>64</height><texture border="15">ContentPanelMirror.png</texture></control><control type="button"><description>Close Window button</description><left>980</left><top>11</top><width>64</width><height>32</height><label>-</label><font>-</font><onclick>PreviousMenu</onclick><texturefocus>DialogCloseButton-focus.png</texturefocus><texturenofocus>DialogCloseButton.png</texturenofocus><onleft>1</onleft><onright>1</onright><onup>1</onup><ondown>1</ondown><visible>system.getbool(input.enablemouse)</visible></control><control type="image"><description>LOGO</description><left>30</left><top>15</top><width>220</width><height>80</height><aspectratio>keep</aspectratio><texture>Confluence_Logo.png</texture></control><control type="list" id="9000"><left>10</left><top>82</top><width>260</width><height>541</height><onleft>9000</onleft><onright>9001</onright><onup>9000</onup><ondown>9000</ondown><pagecontrol>-</pagecontrol><scrolltime>300</scrolltime><itemlayout height="54" width="260"><control type="image"><left>0</left><top>0</top><width>260</width><height>55</height><texture border="5">MenuItemNF.png</texture></control><control type="label"><left>250</left><top>0</top><width>380</width><height>55</height><font>font24_title</font><textcolor>grey3</textcolor><align>right</align><aligny>center</aligny><label>$INFO[ListItem.Label]</label></control></itemlayout><focusedlayout height="54" width="260"><control type="image"><left>0</left><top>0</top><width>260</width><height>55</height><texture border="5">MenuItemFO.png</texture></control><control type="label"><left>250</left><top>0</top><width>380</width><height>55</height><font>font24_title</font><textcolor>white</textcolor><align>right</align><aligny>center</aligny><label>$INFO[ListItem.Label]</label></control></focusedlayout><content><item id="1"><label>480</label><label2>31400</label2><onclick>ActivateWindow(AppearanceSettings)</onclick><icon>-</icon></item><item id="2"><label>157</label><label2>31401</label2><onclick>ActivateWindow(VideosSettings)</onclick><icon>-</icon></item><item id="3"><label>31502</label><label2>31409</label2><onclick>ActivateWindow(PVRSettings)</onclick><icon>special://skin/backgrounds/tv.jpg</icon></item><item id="4"><label>2</label><label2>31402</label2><onclick>ActivateWindow(MusicSettings)</onclick><icon>-</icon></item><item id="5"><label>1</label><label2>31403</label2><onclick>ActivateWindow(PicturesSettings)</onclick><icon>-</icon></item><item id="6"><label>8</label><label2>31404</label2><onclick>ActivateWindow(WeatherSettings)</onclick><icon>-</icon></item><item id="7"><label>24001</label><label2>31408</label2><onclick>ActivateWindow(AddonBrowser)</onclick><icon>-</icon></item><item id="8"><label>14036</label><label2>31410</label2><onclick>ActivateWindow(ServiceSettings)</onclick><icon>-</icon></item><item id="9"><label>13000</label><label2>31406</label2><onclick>ActivateWindow(SystemSettings)</onclick><icon>-</icon></item></content></control><control type="image"><left>268</left><top>10</top><width>804</width><height>50</height><texture border="5">black-back2.png</texture></control><control type="image"><left>268</left><top>10</top><width>804</width><height>70</height><aspectratio>stretch</aspectratio><texture>GlassTitleBar.png</texture></control><control type="label"><description>header label</description><left>300</left><top>20</top><width>740</width><height>30</height><font>font16</font><label>$LOCALIZE[31000] $LOCALIZE[5]</label><align>left</align><aligny>center</aligny><textcolor>white</textcolor><shadowcolor>black</shadowcolor></control><control type="image"><left>270</left><top>60</top><width>800</width><height>450</height><texture border="5">button-nofocus.png</texture></control><control type="image"><left>272</left><top>62</top><width>796</width><height>446</height><aspectratio>stretch</aspectratio><fadetime>600</fadetime><texture background="true">special://skin/backgrounds/settings.jpg</texture></control><control type="image"><left>272</left><top>62</top><width>600</width><height>340</height><aspectratio>stretch</aspectratio><texture>GlassOverlay.png</texture><colordiffuse>AAFFFFFF</colordiffuse></control><control type="image"><left>268</left><top>510</top><width>804</width><height>118</height><texture border="5">black-back2.png</texture></control><control type="textbox"><description>Appearance Description</description><left>300</left><top>520</top><width>740</width><height>100</height><font>font12</font><label>$INFO[Container(9000).ListItem.Label2]</label><align>left</align><textcolor>white</textcolor><shadowcolor>black</shadowcolor></control></control><include>CommonNowPlaying</include><include>MainWindowMouseButtons</include><include>BehindDialogFadeOut</include><control type="image"><description>Section header image</description><left>20</left><top>3</top><width>35</width><height>35</height><aspectratio>keep</aspectratio><texture>icon_system.png</texture></control><control type="grouplist"><left>65</left><top>5</top><width>1000</width><height>30</height><orientation>horizontal</orientation><align>left</align><itemgap>5</itemgap><control type="label"><include>WindowTitleCommons</include><label>$LOCALIZE[5]</label></control></control><include>Clock</include></controls></window>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
