如何使我的应用程序“可换肤”？答案

【问题标题】：How to make my applications "skinnable"?如何使我的应用程序“可换肤”？
【发布时间】：2009-02-05 18:32:41
【问题描述】：

是否有一些标准方法可以让我的应用程序可换肤？

“可换肤”是指应用程序支持多种皮肤的能力。

我在这里没有针对任何特定平台。只是想知道是否有任何使应用程序可换肤的一般准则。

看起来为 Web 应用程序换肤相对容易。桌面应用程序呢？

【问题讨论】：

标签： user-interface skinning skin

【解决方案1】：

皮肤只是另一个抽象层次 (YALOA!)。

如果您阅读MVC design pattern，那么您将了解许多所需的原则。

表示层（或皮肤）只需要做一些事情：

显示界面
当执行某些操作（单击、在框中输入文本等）时，它会触发操作
需要更改时必须收到模型和控制器的通知

在普通程序中，这种抽象是通过将文本框连接到与之相关的方法和对象的代码以及根据程序命令更改显示的代码来完成的。

如果您想添加蒙皮，您需要使用该功能并制作它，以便无需再次编译代码即可完成。

例如，查看 XUL，看看它是如何完成的。你会发现很多皮肤项目使用 XML 来描述皮肤的各种“面孔”（它播放音乐，或组织 MP3 播放器皮肤的库），然后每个控件的位置以及它的数据和方法应该附加到程序中。

在你做之前可能看起来很难，然后你意识到它就像你之前处理过的任何其他抽象级别一样（从带有 goto 的程序到控制结构、到函数、到结构、到类和对象, 到 JIT 编译器等）。

最初的学习曲线并不简单，但做几个项目，你会发现它并不难。

-亚当

【讨论】：

【解决方案2】：

将所有样式保存在单独的 CSS 文件中

远离任何内联样式

【讨论】：

【解决方案3】：

这实际上取决于您希望您的应用程序有多“可换肤”。让用户配置颜色和图像比让他们隐藏/删除组件甚至编写自己的组件要容易得多。

在大多数情况下，您可以编写某种资源提供程序来提供颜色和图像，而不是在源文件中硬编码它们。所以，这个：

Color backgroundColor = Color.BLUE;

会变成这样：

Color backgroundColor = ResourceManager.getColor("form.background");

然后，您所要做的就是更改 ResourceManager 类中的映射，所有客户端都将保持一致。如果您想实时执行此操作，更改任何 ResourceManager 的映射可能会向其客户端发送一个事件并通知他们某些内容已更改。然后客户可以根据需要重新绘制他们的组件。

【讨论】：

【解决方案4】：

实现因平台而异，但这里有一些通用的跨平台注意事项：

最好有一个既定的整体布局，可以“插入”视觉元素。通过蒙皮支持完全不同的常规布局更加困难（但仍然可能）。
为构成皮肤的资产（图像、HTML 片段等）制定一个有据可查的命名约定。
设计一种简洁的方式来“发现”现有皮肤并添加新皮肤。例如：Winamp 使用 ZIP 文件格式存储其皮肤的所有图像。所有皮肤文件都位于应用程序文件夹之外的一个众所周知的文件夹中。
注意缩放问题。并非所有人都使用相同的屏幕分辨率。
是否允许第三方皮肤开发？这会影响您的设计。
在架构上，模型-视图-控制器模式适用于蒙皮。

这些只是需要注意的几件事。您的实现会因 Web 客户端和胖客户端以及您的功能要求而异。 HTH。

【讨论】：

【解决方案5】：

基本原理就是网页中CSS使用的原理。

您无需指定内容的格式（颜色/字体/布局[在某种程度上]），而是简单地描述它是什么类型的内容。

举一个网络示例，在博客页面的内容中，您可以将不同的部分标记为：

标题
博客条目
存档窗格

等等

条目可能由多个小节组成，例如“标题”、“正文”和“时间戳”。

然后，在其他地方，您有一个样式表，它指定了每种元素的所有属性、大小、对齐方式、颜色、背景、字体等。在您的 UI 中渲染页面或绘制/初始化组件时，您总是参考当前的样式表来查找这些属性。

然后，蒙皮，实际上编辑您的设计，变得容易得多。您只需创建一个不同的样式表并根据您的热量内容调整值。

编辑：

要记住的一个关键点是一般样式（如 CSS 中的类）和特定样式（如 CSS 中的 ID）之间的区别。您希望能够将布局中的某些项目（例如标题）唯一标识为可以应用唯一样式的单个可识别项目，而其他项目（例如博客中的条目或数据库视图）都希望具有相同的样式。

【讨论】：

【解决方案6】：

每个平台/技术都不同。

对于 WPF，看看 Josh Smith 所说的结构皮肤：http://www.codeproject.com/KB/WPF/podder2.aspx

【讨论】：

【解决方案7】：

这应该比较容易，按照以下步骤操作：

去除整个 Web 应用程序或网站的所有样式
使用 CSS 更改应用的外观。

如需了解更多信息，请访问css zen garden 获取想法。

【讨论】：

【解决方案8】：

你不应该。或者至少你应该问问自己这是否真的是正确的决定。

蒙皮违反了 UI 设计准则。它“罐子”用户，因为您的皮肤应用程序运行并且看起来与他们使用的所有其他应用程序完全不同。命令快捷键之类的东西将不一致，它们会失去生产力。由于屏幕阅读器将更难理解它，因此它的无障碍访问会减少。

不剥皮的原因有很多。如果您只是想让您的应用程序在视觉上与众不同，我认为这是一个糟糕的理由。您将使您的应用更难使用，并且人们不太可能超过试用期。

说了这么多，有一些类别的应用程序基本上需要换肤，例如媒体播放器和身临其境的全屏游戏。但是，如果您的应用不是在很大程度上强制要求换肤的类别，我会认真考虑寻找其他方法让您的应用比竞争对手更好。

【讨论】：

【解决方案9】：

根据您希望挖掘的深度，您可以选择使用“格式化”框架（例如 Java 的 PLAF、Web 的 CSS）或完全解耦的多层架构。

如果你想定义一个可插拔的皮肤，你需要从一开始就考虑到这一点。表示层对业务逻辑一无所知，但它是 API，反之亦然。

【讨论】：

【解决方案10】：

似乎这里的大多数人都提到 CSS，好像它是唯一的皮肤选项。 Windows Media Player（和 Winamp、AFAIR）使用 XML 以及图像（如果需要）来定义皮肤。

XML 引用挂钩、事件等并处理事物的外观和反应。我不确定他们如何处理后端，但加载给定的皮肤实际上就像定位适当的 XML 文件、加载图像然后将它们放在需要去的地方一样简单。

XML 还让您可以更好地控制自己可以做什么（即创建新组件、更改组件大小等）。

XML 与 CSS 相结合可以为桌面或 Web 应用程序的皮肤引擎提供出色的结果。

【讨论】：