仙游 系统视图
现在让我们创建系统视图。
备用主题详细视图[备用主题系统视图]
注意它是如何与空白主题不同的。
现在有标志取代简单的文件夹名称。
白色的旋转木马和它下面的灰色条并没有改变（不幸的是，它们被硬编码为仿真，暂时还不适合主题）。
旋转木马后面有一个灰色的背景色。
旋转木马后面还有一个重复的背景图像。
在页脚的“帮助菜单”文本后面有一个半透明的白色条。
“帮助菜单”现在有不同的颜色和字体。
打开spare.xml
我们从简单开始。让我们改变一下背景色。
展开<view name=“system”></view>如下所示：
<view name=“system”>
</view>
现在我们向视图添加一些元素。首先，我们将通过创建名为“background\u color”的新图像元素来更改背景色。
<view name=“system”>
<image name=“background\u color”extra=“true”></image>
</view>
extra=“true”表示这是一个正在添加的新元素，而不是已经由SimulationStation定义的元素
我们需要向元素添加一些属性来告诉它该做什么。图像元素接受7个属性。他们是：
<pos>
图像在屏幕中的位置。
<size>
图像的绝对大小。不保持纵横比。使用this或<maxSize>，而不是两者都使用。
<maxSize>
拉伸图像的最大大小。保持纵横比。使用this或<size>，而不是两者都使用。
<origin>
图像的原点。默认为左上角。
<path>
图像文件的相对路径。
<color>
如果图像重复与否。
<颜色>
彩色叠加，允许您更改图像的颜色和不透明度。
使用8位十六进制值。前6位代表十六进制颜色代码，后2位控制不透明度。
我们要做的第一件事是设置图像的路径：
您的图像文件夹中应该已经有“bg_color.png”。如果没有，请从之前下载的完整备用主题中获取它，并将其放置在Spare/inc/images文件夹中。此图像是一个简单的，白色32 x 32px PNG。
添加行: <path>./_inc/images/bg_color.png</path> to <image name="background_color" extra="true"></image> so it looks like this:
<image name="background_color" extra="true"> <path>./_inc/images/bg_color.png</path></image>
在这里，我们告诉ES在名为images的文件夹中查找名为bg_color.png的图像，该文件夹位于名为_inc的根级文件夹中。
在这里，我们告诉ES在名为images的文件夹中查找名为bg_color.png的图像，该文件夹位于名为_inc的根级文件夹中。
现在我们告诉图像我们想要它坐在哪里，我们想要它有多大。我们希望它从屏幕左上角开始，一直延伸到右下角。为此，我们需要<origin>、<pos>和<size>属性。
<origin>0 0</origin>表示图像从X位置=0（左）和Y位置=0（上）开始。
<pos>0 0</pos>告诉ES将图像的<origin>放在X位置=0（左）和Y位置=0（上）。
<size>11</size>指示图像沿X轴（水平）100%拉伸，沿Y轴（垂直）100%拉伸。
把它们放在一起，看起来像这样：
<image name=“background\u color”extra=“true”>
<path>/u inc/images/bg\u white.png</path>
<origin>0 0</origin>
<pos>0 0</pos>
<size>11</size>
</image>
如果现在刷新ES主题，就不会看到任何不同，因为背景已经是白色的。
注意：如果要查看对主题文件所做的任何更改，请先保存该文件，然后在ES中切换到任何其他主题，然后返回到主题。从现在起，我将称之为“刷新主题”。
这就是<color>属性发挥作用的地方。可以使用此属性使用十六进制颜色代码将白色PNG更改为所需的任何颜色。有很多在线颜色选择工具，你可以用来获得你的十六进制颜色代码，只要记住他们需要6个数字/字母才能正常工作。
如果要将背景颜色更改为红色，请将这一行添加到“background\u color”元素中：
<color>FF0000</color>
其他随机选择的颜色：
<color>70D6F3</color>=浅蓝色
<color>229C29</color>=深绿色
<color>FF7700</color>=橙色
<color>CF1F97</color>=紫色
我只想选择浅灰的颜色，让它显得有点显眼，但不要太显眼。“背景色”元素现在应该如下所示：
<image name=“background\u color”extra=“true”>
<path>/\u inc/images/bg\u color.png</path>
<origin>0 0</origin>
<pos>0 0</pos>
<size>11</size>
<color>d4d4d4</color>
</image>
如果你刷新ES，你现在会看到后面的浅灰色背景。
应该是这样的：
备用主题系统视图-背景色
现在来看看背景图案
“bg_pattern.png”应该已经在您的备用/u inc/images文件夹中。
复制“background\u color”元素并将其更改为如下所示：
<image name=“background\u pattern”extra=“true”>
<path>/u inc/images/bg\u pattern.png</path>
<origin>0.5 0.5</origin>
<pos>0.5 0.5</pos>
<size>11</size>
<color>aeaeae</color>
<tile>true</tile>
</image>
我们在这里所做的是：
将元素重命名为“background_pattern”。
将<path>更改为指向'bg_pattern.png格式'图像。
将<origin>更改为图像的中心，而不是左上角。
将<pos>更改为屏幕中心而不是左上方。
将<color>更改为较深的灰色。
添加了一行<tile>true</tile>。这一行告诉ES在空间上重复图像，而不是将其拉伸。
更改<origin>和<pos>并不是绝对必要的，但我认为对于大多数模式来说，它看起来更好，因此它们从屏幕中心开始，而不是从左上方开始。像往常一样，这取决于他们个人的喜好。
应该是这样的：
备用主题系统视图-背景模式
现在让我们创建系统视图。
备用主题详细视图[备用主题系统视图]
注意它是如何与空白主题不同的。
现在有标志取代简单的文件夹名称。
白色的旋转木马和它下面的灰色条并没有改变（不幸的是，它们被硬编码为仿真，暂时还不适合主题）。
旋转木马后面有一个灰色的背景色。
旋转木马后面还有一个重复的背景图像。
在页脚的“帮助菜单”文本后面有一个半透明的白色条。
“帮助菜单”现在有不同的颜色和字体。
打开spare.xml
我们从简单开始。让我们改变一下背景色。
展开<view name=“system”></view>如下所示：
<view name=“system”>
</view>
现在我们向视图添加一些元素。首先，我们将通过创建名为“background\u color”的新图像元素来更改背景色。
<view name=“system”>
<image name=“background\u color”extra=“true”></image>
</view>
extra=“true”表示这是一个正在添加的新元素，而不是已经由SimulationStation定义的元素
我们需要向元素添加一些属性来告诉它该做什么。图像元素接受7个属性。他们是：
<pos>
图像在屏幕中的位置。
<size>
图像的绝对大小。不保持纵横比。使用this或<maxSize>，而不是两者都使用。
<maxSize>
拉伸图像的最大大小。保持纵横比。使用this或<size>，而不是两者都使用。
<origin>
图像的原点。默认为左上角。
<path>
图像文件的相对路径。
<color>
如果图像重复与否。
<颜色>
彩色叠加，允许您更改图像的颜色和不透明度。
使用8位十六进制值。前6位代表十六进制颜色代码，后2位控制不透明度。
我们要做的第一件事是设置图像的路径：
您的图像文件夹中应该已经有“bg_color.png”。如果没有，请从之前下载的完整备用主题中获取它，并将其放置在Spare/inc/images文件夹中。此图像是一个简单的，白色32 x 32px PNG。
添加行: <path>./_inc/images/bg_color.png</path> to <image name="background_color" extra="true"></image> so it looks like this:
<image name="background_color" extra="true"> <path>./_inc/images/bg_color.png</path></image>
在这里，我们告诉ES在名为images的文件夹中查找名为bg_color.png的图像，该文件夹位于名为_inc的根级文件夹中。
在这里，我们告诉ES在名为images的文件夹中查找名为bg_color.png的图像，该文件夹位于名为_inc的根级文件夹中。
现在我们告诉图像我们想要它坐在哪里，我们想要它有多大。我们希望它从屏幕左上角开始，一直延伸到右下角。为此，我们需要<origin>、<pos>和<size>属性。
<origin>0 0</origin>表示图像从X位置=0（左）和Y位置=0（上）开始。
<pos>0 0</pos>告诉ES将图像的<origin>放在X位置=0（左）和Y位置=0（上）。
<size>11</size>指示图像沿X轴（水平）100%拉伸，沿Y轴（垂直）100%拉伸。
把它们放在一起，看起来像这样：
<image name=“background\u color”extra=“true”>
<path>/u inc/images/bg\u white.png</path>
<origin>0 0</origin>
<pos>0 0</pos>
<size>11</size>
</image>
如果现在刷新ES主题，就不会看到任何不同，因为背景已经是白色的。
注意：如果要查看对主题文件所做的任何更改，请先保存该文件，然后在ES中切换到任何其他主题，然后返回到主题。从现在起，我将称之为“刷新主题”。
这就是<color>属性发挥作用的地方。可以使用此属性使用十六进制颜色代码将白色PNG更改为所需的任何颜色。有很多在线颜色选择工具，你可以用来获得你的十六进制颜色代码，只要记住他们需要6个数字/字母才能正常工作。
如果要将背景颜色更改为红色，请将这一行添加到“background\u color”元素中：
<color>FF0000</color>
其他随机选择的颜色：
<color>70D6F3</color>=浅蓝色
<color>229C29</color>=深绿色
<color>FF7700</color>=橙色
<color>CF1F97</color>=紫色
我只想选择浅灰的颜色，让它显得有点显眼，但不要太显眼。“背景色”元素现在应该如下所示：
<image name=“background\u color”extra=“true”>
<path>/\u inc/images/bg\u color.png</path>
<origin>0 0</origin>
<pos>0 0</pos>
<size>11</size>
<color>d4d4d4</color>
</image>
如果你刷新ES，你现在会看到后面的浅灰色背景。
应该是这样的：
备用主题系统视图-背景色
现在来看看背景图案
“bg_pattern.png”应该已经在您的备用/u inc/images文件夹中。
复制“background\u color”元素并将其更改为如下所示：
<image name=“background\u pattern”extra=“true”>
<path>/u inc/images/bg\u pattern.png</path>
<origin>0.5 0.5</origin>
<pos>0.5 0.5</pos>
<size>11</size>
<color>aeaeae</color>
<tile>true</tile>
</image>
我们在这里所做的是：
将元素重命名为“background_pattern”。
将<path>更改为指向'bg_pattern.png格式'图像。
将<origin>更改为图像的中心，而不是左上角。
将<pos>更改为屏幕中心而不是左上方。
将<color>更改为较深的灰色。
添加了一行<tile>true</tile>。这一行告诉ES在空间上重复图像，而不是将其拉伸。
更改<origin>和<pos>并不是绝对必要的，但我认为对于大多数模式来说，它看起来更好，因此它们从屏幕中心开始，而不是从左上方开始。像往常一样，这取决于他们个人的喜好。
应该是这样的：
备用主题系统视图-背景模式
