前文已经对XBMC源代码的整体架构进行了分析：

XBMC源代码分析 1：整体结构以及编译方法

从这篇文章开始，就要对XBMC源代码进行具体分析了。首先先不分析其C++代码，分析一下和其皮肤相关的代码。

XBMC 的和皮肤相关的代码位于 "根目录/addons" 里面。可以从官方网站上下载皮肤文件的压缩包，然后解压到该目录下面即可。皮肤文件夹名称一般是“skin.XXXX”形式的，即以“skin.”开头。

XBMC自带的皮肤存储在文件夹“skin.confluence”中。我从网上下载了4个皮肤，解压后，如下图所示。

系统默认的皮肤：confluence如图所示。

可以在“skin”选项里面选择皮肤，如图所示。

皮肤“simplicity”如图所示。

皮肤“SiO2”如图所示。

可以看出。不同皮肤之间差距非常的大。皮肤囊括了XBMC所有可以看见的界面元素。可以说不修改源代码，只制作皮肤，也可以完全定制出一套非常个性化的系统。

下面我们以系统自带的皮肤“confluence”为例，分析一下皮肤的构成。

skin.confluence文件夹中，目录结构如图所示：

每个文件夹的作用：

720p：界面存放于文件夹里

background：背景图片

font：字体

language：各种语言支持

media：各种图标

sound：声音

例如，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>

XBMC源代码分析 2：Addons（皮肤Skin）的更多相关文章

  1. XBMC源代码分析 7：视频播放器（dvdplayer）-输入流（以libRTMP为例）

    前文分析了XBMC的基本结构: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 XBMC源代码分 ...

  2. XBMC源代码分析 6：视频播放器（dvdplayer）-文件头（以ffmpeg为例）

    XBMC分析系列文章: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 XBMC源代码分析 4: ...

  3. XBMC源代码分析 4：视频播放器（dvdplayer）-解码器（以ffmpeg为例）

    XBMC分析系列文章: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 本文我们分析XBMC中视 ...

  4. XBMC源代码分析 3：核心部分（core）-综述

    前文分析了XBMC的整体结构以及皮肤部分: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) 本文以及以后的文章主要分析XBMC的VC工程中的源代码. ...

  5. 转：XBMC源代码分析

    1:整体结构以及编译方法 XBMC(全称是XBOX Media Center)是一个开源的媒体中心软件.XBMC最初为Xbox而开发,可以运行在Linux.OSX.Windows.Android4.0 ...

  6. XBMC源代码分析 1：整体结构以及编译方法

    XBMC(全称是XBOX Media Center)是一个开源的媒体中心软件.XBMC最初为Xbox而开发,可以运行在Linux.OSX.Windows.Android4.0系统.我自己下载了一个然后 ...

  7. XBMC源代码简析 5：视频播放器（dvdplayer）-解复用器（以ffmpeg为例）

    XBMC分析系列文章: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 XBMC源代码分析 4: ...

  8. android-plugmgr源代码分析

    android-plugmgr是一个Android插件加载框架,它最大的特点就是对插件不需要进行任何约束.关于这个类库的介绍见作者博客,市面上也有一些插件加载框架,但是感觉没有这个好.在这篇文章中,我 ...

  9. Twitter Storm源代码分析之ZooKeeper中的目录结构

    徐明明博客:Twitter Storm源代码分析之ZooKeeper中的目录结构 我们知道Twitter Storm的所有的状态信息都是保存在Zookeeper里面,nimbus通过在zookeepe ...

随机推荐

  1. Docker命令查询

    基本语法 docker [OPTIONS] COMMAND [arg...] 一般来说,Docker 命令可以用来管理 daemon,或者通过 CLI 命令管理镜像和容器.可以通过 man docke ...

  2. Docker环境 ELK 快速部署

    Docker环境 ELK快速部署 环境 Centos 7.4 , Docker version 17.12 Docker至少3GB内存: #内核配置 echo ' vm.max_map_count = ...

  3. Java语言程序设计课程学期总结

    2016-2017 第2学期 课程介绍 编程类课程,76学时(44理论+32实验),学期末还有1周的课程设计. 问题与现状 4个班共120人,教师无法逐一检查每个学生的编程实验. 纸质作业质量不高. ...

  4. Xcode 调试技巧 --常用命令和断点

    Xcode 中的调试技巧与我们的日常开发息息相关,而这些调试技巧在我们解决Bug时,常常有事半功倍的作用,经常会用到的有各种断点 和 命令.而这些调试技巧也经常会在面试中问到,所以不知道的就来看看吧. ...

  5. 微信小程序基础之交互操作控件

    好久没有写关于微信小程序的文章了,今天简单的发表一篇,内容比较简单,包括:ActionSheet上拉菜单.AlertAction提示框.SuccessAction完成框.LoadingAction加载 ...

  6. 有一台机器，上面有m个储存空间。然后有n个请求，第i个请求计算时需要占 R[i]个空间，储存计算结果则需要占据O[i]个空间（据O[i]个空间（其中O[i]<R[i]）。问怎么安排这n个请求的顺序，使

    有一台机器,上面有m个储存空间.然后有n个请求,第i个请求计算时需要占 R[i]个空间,储存计算结果则需要占据O[i]个空间(据O[i]个空间(其中O[i]<R[i]).问怎么安排这n个请求的顺 ...

  7. [Pelican]Pelican入门(二)

    之前是搭建了一个简单的博客,但是没有图片,没有具体的栏目分类 这次来研究下 一 导航栏 之前是直接把.md扔到的content文件夹下,结果导航栏,显示的是Category信息. 现在这么改成 D:. ...

  8. 阻塞IO服务器模型之多线程服务器模型

    针对单线程服务器模型的特点,我们可以对其进行改进,使之能对多个客户端同时进行响应.最简单的改进即是使用多线程(或多进程)服务器模型,在应用层级别,我们一般采用多线程模式.多线程能让多个客户端同时请求, ...

  9. mvn管理项目jar包

    Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做POM.xm ...

  10. Java基本语法-----java变量

    1.变量的概述 用于存储可变数据的容器. 2.变量存在的意义 计算机主要用于处理生活中的数据,由于生活中存在大量的可变数据,那么计算机就必须具备存储可变数据的能力. 比如: 1.时间每一秒都在发生变化 ...