【转】关于颜色主题
引言
bada –三星的智能手机平台-可以安装在不同显示器的不同设备上.下面的表格说明了Wave(第一个bada手机)和WaveWQ(Wave525, Wave533, Wave723)之间的区别.
| Wave | WaveWQ | |
|---|---|---|
| 类型 | Super AMOLED | TFT LCD |
| 尺寸 | 3.3" | 3.2" |
| 分辨率 (像素) | 480 x 800 | 240 x 400 |
| 颜色深度 | 32-bit | 16-bit |
<表 1. Wave 和 WaveWQ 显示>
因为不同的显示器有不同的要求, bada支持WVGA和WQVGA分辨率, 并且使用两种不同的颜色主题. 这份文件说明了受支持的颜色主题, 与主题相关的系统颜色,及使用定制颜色的指南.
受支持的颜色主题
颜色主题定义了使用在某个设备上的缺省系统颜色的组成. 不同的显示器意味着设备展示颜色的不同能力,及不同的色域. 因为显示器的不同, 很难创建一个放之四海皆适用的主题. 为了安放不同的显示器, 需要创建多个主题.每个主题使用于特定的设备.bada平台现在有两个颜色主题:
- 用于Wave的是黑色主题, 适合于支持WVGA分辨率的设备,颜色真实,支持alpha blend.
- 用于WaveWQ的是白色主题,适用于支持WQVGA分辨率的设备, 支持16字节颜色.
<图 1.黑色 Wave主题和白色WaveWQ主题>
随着越来越多的bada设备的推出, 正根绝市场需要创建新的颜色主题.
下面的图显示了颜色主题元素的名称, 而下表则定义了元素颜色的细节.
<表2: 颜色主题元素的名称>
| Black theme | White theme | Description | |
|---|---|---|---|
| SYSTEM_COLOR_FOREGROUND | 透明 (0,0,0,0) | 黑色 (0,0,0,255) | 缺省前景色 (例如, 在Label 和 CheckButton中) |
| SYSTEM_COLOR_BACKGROUND | 透明 (0,0,0,0) | 蓝灰
(200,211,226,255) |
缺省背景色 (例如, 在Label, Panel, 和ScrollPanel中) |
| SYSTEM_COLOR_BODY_TEXT | 黑色 (0,0,0,255) | 黑色 (0,0,0,255) | 出现在UI控件中的文本颜色 |
| SYSTEM_COLOR_FORM_BACKGROUND | 黑色 (0,0,0,255) | 蓝灰
(200,211,226,255) |
格式背景中的缺省颜色 |
| SYSTEM_COLOR_TITLE_TEXT | 白色
(255,255,255,255) |
白色(255,255,255,255) | 出现在指示器和指令域中的文本颜色(例如,Softkey, Title, 和 Tab中的颜色) |
| SYSTEM_COLOR_LIST_BACKGROUND | 透明 (0,0,0,0) | 白色
(255,255,255,255) |
列表背景中的缺省颜色 |
| SYSTEM_COLOR_POPUP_BACKGROUND* | 透明 (0,0,0,0) | 浅蓝(221,227,244,255) | 弹出背景中的缺省颜色 |
| SYSTEM_COLOR_FORM_GROUP_BACKGROUND | 蓝灰
(41,51,60,255) |
蓝灰(200,211,226,255) | 格式背景的缺省颜色, 分类的风格子控件 |
| SYSTEM_COLOR_LIST_ITEM_TEXT | 白色
(255,255,255,255) |
黑色
(0,0,0,255) |
列表条目文本的缺省颜色 |
| SYSTEM_COLOR_LIST_ITEM_PRESSED_TEXT | 白色
(255,255,255,255) |
白色
(255,255,255,255) |
当条目被按下,列表条目文本的缺省颜色 |
| SYSTEM_COLOR_LIST_ITEM_HIGHLIGHTED_TEXT | 白色
(255,255,255,255) |
白色(255,255,255,255) | 当条目被强调时, 列表条目文本的缺省颜色 |
| SYSTEM_COLOR_GROUP_ITEM_TEXT | 白色
(255,255,255,255) |
天空蓝(0,189,246,255) | 组项文本的缺省颜色 |
<表 2. 元素的颜色细节>
* 弹出窗口的真实背景颜色(SYSTEM_COLOR_POPUP_BACKGROUND)与背景主题的预定义颜色不同.大部分预定义系统颜色与真实的颜色一样,这就意味着如果你使用真实的颜色, 外侧边缘是看不到的.然而,弹出窗口的真实背景颜色是半透明的, 所以如果你使用那个颜色, 就可通过alpha blending更改边缘颜色, 这样外侧边缘就可见了.因为SYSTEM_COLOR_POPUP_BACKGROUND与真实的背景颜色不同, 使用它就可以获得适当的结果.
使用白色主题利用弹出窗口
当你将弹出窗口的Label或Panel放入一个白色主题中, 写下代码隐藏label或Panel的边缘. Label或Panel的背景颜色在黑色主题中是透明的, 与白色主题中的Form的颜色一致. 黑色主题中的效果不错, 但是在白色主题中, Label或Panel的边缘是可见的, 因为它使用的是Form的背景颜色, 这与弹出窗口的背景颜色一致.
<图 3.白色主题的弹出窗口上可见的控制菜单边缘>
控制菜单边缘问题可以使用以下代码解决:
__pPopup->Construct(L"IDP_POPUP1"); static_cast<Label *>(__pPopup->GetControl(L"IDC_LABEL1")) ->SetBackgroundColor(SYSTEM_COLOR_POPUP_BACKGROUND); static_cast<Panel *>(__pPopup->GetControl(L"IDC_PANEL1")) ->SetBackgroundColor(SYSTEM_COLOR_POPUP_BACKGROUND);
<代码 1. 用于隐藏白色主题内控制菜单边缘的代码>
SYSTEM_COLOR_POPUP_BACKGROUND 定义了弹出窗口上控件的背景颜色. 有了这个系统颜色, 你可以消除控制菜单的可见边缘.
<表 4. H白色主题中弹出窗口的隐藏的控制菜单边缘>
使用定制颜色
下面的表说明如果你为UI控件使用了缺省系统颜色, 在不同的主题中如何保持颜色的一致性.
如果一旦有可能,你就使用了缺省系统颜色, 你要确保程序总是有恰当的颜色, 即使它用在不同的颜色主题上,而非你之前为之创建的颜色主题. 如果你没有使用缺省颜色, 你必须注意你选择的定制颜色在不同的主题中的使用. 譬如, 如果你定义了一个全新的背景颜色, 记住更改前景颜色(反之亦然)以避免不可预期的结果.
下面的表说明RGB (0, 0, 0)用于Label和Panel的背景颜色的一个场景. 黑色的Wave主题显示了一个恰当的结果, 而白色WaveWQ主题却没有. 因为程序使用定制颜色,而非缺省系统颜色, Label和Panel的背景颜色没有根据使用的主题自动更改.白色主题的前景颜色最后与背景颜色一样,从而导致文本不可见.
<图6. Label 和Panel使用的定制背景颜色>
