如何使我的应用程序“skinnable”?

时间:2009-02-05 18:32:41

标签: user-interface skinning skin

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

“skinnable”是指应用程序支持多个皮肤的能力。

我不是针对任何特定平台。只是想知道是否有任何使应用程序可换肤的一般指导原则。

看起来像剥离Web应用程序相对容易。桌面应用程序怎么样?

10 个答案:

答案 0 :(得分:8)

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

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

表示层(或皮肤)只需要执行以下操作:

  • 显示界面
  • 当采取某些行动(点击,在框中输入文本等)时,它会触发动作
  • 当需要更改时,必须从模型和控制器接收通知

在正常程序中,这种抽象是通过将代码连接到与其相关的方法和对象的代码来完成的,并且具有根据程序命令更改显示的代码。

如果你想添加皮肤,你需要具备这种能力,并且可以在不重新编译代码的情况下完成。

例如,查看XUL,看看它是如何完成的。您会发现许多皮肤项目使用XML来描述皮肤的各种“面孔”(它播放音乐,或者为MP3播放器皮肤组织磁带库),然后是每个控件所在的位置以及它们的数据和方法应该附在该计划中。

在你这样做之前看起​​来很难,然后你会发现它就像你之前处理过的任何其他抽象层次一样(从带有gotos的程序,到控制结构,到函数,到结构,到类和对象) ,JIT编译器等)。

最初的学习曲线并不简单,但是做一些项目,你会发现它并不难。

- 亚当

答案 1 :(得分:5)

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

远离任何内联样式

答案 2 :(得分:3)

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

对于大多数情况,您可能可以通过编写某种资源提供程序来提供颜色和图像,而不是在源文件中对其进行硬编码。所以,这个:

Color backgroundColor = Color.BLUE;

会变成:

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

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

答案 3 :(得分:3)

实施因平台而异,但以下是一些通用的跨平台注意事项:

  • 建立一个可以“插入”视觉元素的整体布局是件好事。通过蒙皮来支持完全不同的总体布局更难(但仍然可能)。
  • 为构成皮肤的资产(图像,HTML片段等)制定详细记录的命名约定。
  • 设计一种干净的方法来“发现”现有皮肤并添加新皮肤。例如:Winamp使用ZIP文件格式存储其皮肤的所有图像。所有外观文件都位于应用程序文件夹下的一个众所周知的文件夹中。
  • 请注意缩放问题。不是每个人都使用相同的屏幕分辨率。
  • 您是否准备第三方皮肤开发?这会影响您的设计。
  • 在架构上,模型 - 视图 - 控制器模式适合于蒙皮。

这些只是需要注意的一些事项。您的实施将因Web和胖客户端以及您的功能要求而异。 HTH。

答案 4 :(得分:1)

基本原则是CSS在网页中使用的。

您可以简单地描述内容的格式(颜色/字体/布局[某种程度]),而不是直接指定它的内容类型。

要提供Web示例,请在博客页面的内容中将不同的部分标记为:

  1. 标题
  2. 博客条目
  3. 档案窗格
  4. 条目可能由诸如“标题”,“正文”和“时间戳”之类的子单元组成。

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

    然后,蒙皮,甚至编辑您的设计变得更加容易。您可以简单地创建不同的样式表,并根据热量内容调整值。

    编辑:

    要记住的一个关键点是一般样式(如CSS中的类)和特定样式(如CSS中的ID)之间的区别。您希望能够唯一地标识布局中的某些项目(例如标题),作为可以应用唯一样式的单个可识别项目,而其他项目(例如博客中的条目或字段中的字段)所有人都希望拥有相同的风格。

答案 5 :(得分:1)

每个平台/技术都有所不同。

对于WPF,请看看Josh Smith所说的结构蒙皮:http://www.codeproject.com/KB/WPF/podder2.aspx

答案 6 :(得分:1)

这应该相对容易,请按照以下步骤操作:

  1. 删除整个网络应用程序或网站的所有样式
  2. 使用css更改应用的外观。
  3. 有关详情,请访问css zen garden了解相关提示。

答案 7 :(得分:1)

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

Skinning打破了UI设计准则。它“jars”用户,因为你的皮肤应用程序运行,看起来与他们使用的所有其他应用程序完全不同。命令快捷键之类的东西不一致,它们会失去生产力。因为屏幕阅读器会更难理解它,所以它的可访问性会降低。

有很多原因不能去皮肤。如果您只是想让您的应用程序在视觉上与众不同,那么我认为这是一个不好的理由。您将使您的应用程序更难以使用,并且人们不太可能超越试用期。

说了这么多,有些类型的应用程序基本上可以预期换肤,例如媒体播放器和身临其境的全屏游戏。但是,如果你的应用程序不属于强化皮肤的课程,我会认真考虑寻找其他方法让你的应用程序比竞争对手更好。

答案 8 :(得分:0)

根据您希望挖掘的深度,您可以选择使用“格式化”框架(例如Java的PLAF,网络的CSS)或完全脱离的多层体系结构。

如果要定义可插拔皮肤,则需要从一开始就考虑这一点。表示层知道关于业务逻辑的 nothing ,但它是API,反之亦然。

答案 9 :(得分:0)

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

XML引用挂钩,事件等,并处理事物的外观和反应。我不确定它们如何处理后端,但是加载给定的皮肤就像找到适当的XML文件一样简单,加载图像然后将它们放在需要的位置。

XML还可以让您更好地控制自己可以做的事情(即创建新组件,更改组件大小等)。

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