如何编写 2 合 1 感知应用程序
0/5 (0投票)
动态调整您的 UI 以适应 2 合 1 配置更改。
引言
随着二合一设备的推出，应用程序需要能够在这两种“笔记本模式”和“平板电脑模式”之间切换，以提供最佳的用户体验。触摸优化应用程序在“平板电脑模式”（无需鼠标或键盘）下比最初为“笔记本模式”或“桌面模式”（需要鼠标和键盘）设计的应用程序更容易使用。应用程序能够感知设备模式的变化并动态切换这两种模式至关重要。
本文介绍了一种用于检测 Windows* 8 或 Windows* 8.1 桌面应用程序模式变化的方法，并提供了对已增强以提供此功能的示例应用程序的代码示例。
基本概念
桌面应用程序与触摸优化应用程序
大多数人熟悉桌面模式应用程序。Windows* XP 和 Windows* 7 应用程序是例子。这类应用程序通常使用鼠标和键盘输入数据，并且经常有很小的可点击图标、包含许多项目的菜单、子菜单等。这些项目通常太小且靠得太近，无法有效地通过触摸界面进行选择。
触摸优化应用程序从一开始就考虑了触摸界面进行开发。图标通常更大，并且尽量减少了小项目。这些用户界面的优化使得使用触摸设备更加容易。通过正确调整这些 UI 元素的大小，您应该将这种关注点扩展到应用程序正在处理的对象。因此，代表这些项目的图形对象也应该动态调整。
原始 MTI 应用程序
MTI（多点触控界面）示例应用程序最初是作为 Intel® Energy Checker SDK（请参阅附加资源）的一部分编写的，旨在演示（在许多其他方面）如何使用环境光传感器来更改应用程序界面。
核心上，MTI 示例应用程序允许用户绘制和操作贝塞尔曲线。用户只需按顺序定义第一个锚点、第一个控制点、第二个锚点，最后定义第二个也是最后一个控制点。
图 1 展示了一个贝塞尔曲线的例子。请注意，每个图形元素的尺寸和颜色都经过设计，以便快速识别——即使是通过计算机视觉系统（如果需要）——并且易于通过触摸进行操作。
- 锚点是方形和棕褐色的。
- 控制点是圆形的和红色的。
- 连接锚点与其控制点的线段是蓝色的。
- 贝塞尔曲线是黑色的。
图 2、图 3、图 4 和 图 5 展示了用户可以与贝塞尔曲线进行的键交互。通过额外触摸屏幕可以绘制新曲线。
MTI 示例应用程序增加了对环境光传感器 (ALS) 的支持。一旦确定了光线水平，显示就会动态改变，以便用户在不同的光照条件下更容易查看和使用应用程序。微软建议在光照增加时增大 UI 对象的大小和颜色对比度。
MTI 根据光线水平，在多个阶段更改了界面。在明亮的光照情况下，MTI 应用程序将显示更改为“高对比度”模式，增加锚点和控制点的大小，并将颜色逐渐淡化为黑白。在光线较暗的情况下，应用程序会显示更丰富多彩（对比度较低）的界面，带有较小的锚点和控制点。
事实上，任何使用过带 LCD 屏幕的设备（即使有背光）的人都知道，在阳光明媚的日子里屏幕可能很难看清。图 6 和 图 7 清楚地展示了这个问题。
在我们的案例中，我们决定重新利用为 ALS 支持实现的尺寸更改机制。我们仅使用 UI 对象尺寸显示变化的两个极端，这些变化是为 ALS 支持引入的。我们通过简单地将 UI 对象尺寸设置为非平板电脑模式下的最小值，在平板电脑模式下的最大值来实现这一点（约定，未知模式映射到非平板电脑模式）。
修改后的 MTI（又名：Bezier_MTI）
利用上述显示的显示变化，修改了原始 MTI 源代码，以根据特定事件在两个对比度极端之间切换添加新功能。用于在两个对比度极端之间切换的事件是二合一设备在平板电脑模式和笔记本电脑模式之间的切换。硬件信号的变化会通知软件设备配置的更改（图 8）。
启动 Bezier_MTI 应用程序时，设备的初始状态是未知的（图 9）。这是因为用于检索配置的 API 的输出仅在收到切换通知时才有效。任何其他时间，API 的输出都是未定义的。
请注意，只需要第一次通知，因为应用程序可以使用注册表值来记住它收到了通知。通过这种记忆机制，在下次启动时，应用程序可以使用 API 检测其状态。如果应用程序知道它过去在该平台上收到过通知，那么它可以使用 GetSystemMetrics 函数来检测其初始状态。本示例中未实现此类机制。
当设备模式改变时，Windows 会向顶层窗口发送一个 WM_SETTINGCHANGE 消息，并将“ConvertibleSlateMode”放在 LPARAM 参数中。Bezier_MTI 通过此消息检测来自操作系统的配置更改通知。
如果 LPARAM 指向一个等于“ConvertibleSlateMode”的字符串，那么应用程序应该调用 GetSystemMetrics(SM_CONVERTIBLESLATEMODE)。返回“0”表示处于平板电脑模式。返回“1”表示处于非平板电脑模式（图 10）。
...
//---------------------------------------------------------------------
// Process system setting update.
//---------------------------------------------------------------------
case WM_SETTINGCHANGE:
//-----------------------------------------------------------------
// Check slate status.
//-----------------------------------------------------------------
if(
((TCHAR *)lparam != NULL) &&
(
_tcsnccmp(
(TCHAR *)lparam,
CONVERTIBLE_SLATE_MODE_STRING,
_tcslen(CONVERTIBLE_SLATE_MODE_STRING)
) == 0
)
) {
//-------------------------------------------------------------
// Note:
// SM_CONVERTIBLESLATEMODE reflects the state of the
// laptop or slate mode. When this system metric changes,
// the system sends a broadcast message via WM_SETTING...
// CHANGE with "ConvertibleSlateMode" in the LPARAM.
// Source: MSDN.
//-------------------------------------------------------------
ret = GetSystemMetrics(SM_CONVERTIBLESLATEMODE);
if(ret == 0) {
data._2_in_1_data.device_configuration =
DEVICE_CONFIGURATION_TABLET
;
} else {
data._2_in_1_data.device_configuration =
DEVICE_CONFIGURATION_NON_TABLET
;
}
...
作为一种良好实践，Bezier_MTI 包括一个覆盖按钮，用于手动设置设备模式。应用程序启动时，按钮显示为问号（图 11）；然后根据当时的设备模式更改为手机图标（图 12）或桌面图标（图 13）。用户可以触摸图标手动覆盖检测到的显示模式。应用程序显示会根据选择/检测到的模式而改变。请注意，在此示例中，模式指示器被方便地用作手动覆盖按钮。
在平板电脑模式下显示手机图标。
在非平板电脑模式下显示桌面图标。
如何通知我的应用程序设备配置更改？
本示例中的大部分更改都与图形相关。自适应 UI 还应更改向用户公开的功能的性质和数量（本示例未涵盖）。
对于图形，您应该将图形渲染代码与管理代码分离。在这里，贝塞尔曲线和其他 UI 元素的绘制与几何数据计算是分开的。
在图形渲染代码中，您应该避免使用静态 GDI 对象。例如，画笔和刷子应该在每次执行新绘图时重新创建，以便参数可以适应当前状态，或者更普遍地适应任何传感器信息。如果没有发生更改，则无需重新创建对象。
这样，就像示例一样，UI 元素的大小会自动适应设备配置读数。这不仅影响颜色，还影响对象的大小。请注意，在设计此功能时应考虑系统的 DPI（每英寸点数）。确实，小型设备具有高 DPI。这不是一个新考虑因素，但随着设备显示 DPI 的增加，它变得越来越重要。
在我们的案例中，我们决定重新利用为 ALS 支持实现的尺寸更改机制（图 14）。我们通过简单地将 UI 对象尺寸设置为非平板电脑模式下的最小值，在平板电脑模式下的最大值来实现这一点（约定，未知模式映射到非平板电脑模式）。
...
ret = GetSystemMetrics(SM_CONVERTIBLESLATEMODE);
if(ret == 0) {
data._2_in_1_data.device_configuration =
DEVICE_CONFIGURATION_TABLET
;
//---------------------------------------------------------
shared_data.lux = MAX_LUX_VALUE;
shared_data.light_coefficient = NORMALIZE_LUX(shared_data.lux);
} else {
data._2_in_1_data.device_configuration =
DEVICE_CONFIGURATION_NON_TABLET
;
//---------------------------------------------------------
shared_data.lux = MIN_LUX_VALUE;
shared_data.light_coefficient = NORMALIZE_LUX(shared_data.lux);
}
...
以下代码（图 15）展示了一组宏如何使此过程自动化。这些宏随后用于示例的绘图函数中。
... #define MTI_SAMPLE_ADAPT_TO_LIGHT(v) ((v) + ((int)(shared_data.light_coefficient * (double)(v)))) #ifdef __MTI_SAMPLE_LINEAR_COLOR_SCALE__ #define MTI_SAMPLE_LIGHT_COLOR_COEFFICIENT (1.0 - shared_data.light_coefficient) #else // __MTI_SAMPLE_LINEAR_COLOR_SCALE__ #define MTI_SAMPLE_LIGHT_COLOR_COEFFICIENT (log10(MAX_LUX_VALUE - shared_data.lux)) #endif // __MTI_SAMPLE_LINEAR_COLOR_SCALE__ #define MTI_SAMPLE_ADAPT_RGB_TO_LIGHT(r, g, b) RGB( (int)(MTI_SAMPLE_LIGHT_COLOR_COEFFICIENT * ((double)(r))), (int)(MTI_SAMPLE_LIGHT_COLOR_COEFFICIENT * ((double)(g))), (int)(MTI_SAMPLE_LIGHT_COLOR_COEFFICIENT * ((double)(b))) ...
结论
Windows 8 和 Windows 8.1 用户界面允许开发人员为二合一设备自定义用户体验。可以检测设备使用模式的变化，并动态更改应用程序界面，从而为用户提供更好的用户体验。
关于作者
Stevan Rogers 在英特尔工作了 20 多年。他专注于系统配置和实验室管理，并为使用业务线应用程序的移动设备开发营销材料。
Jamel Tayeb 是 Intel® Energy Checker SDK 的架构师。Jamel Tayeb 是英特尔软件与服务部门的软件工程师。他在英特尔的 10 年职业生涯中担任过各种工程、营销和公关职务。Jamel 曾与企业和电信硬件及软件公司合作，为英特尔平台（包括安腾和至强处理器）优化和移植应用程序。最近，Jamel 参与了英特尔的几项节能项目。在加入英特尔之前，Jamel 是一名专业记者。Jamel 获得了瓦朗谢讷大学计算机科学博士学位，巴黎第八大学人工智能研究生文凭，以及 CFPJ（巴黎新闻从业人员培训与进修中心 – 卢浮宫巴黎学院）专业记者文凭。
Intel 和 Intel 标志是 Intel Corporation 在美国和其他国家/地区的商标。
*其他名称和品牌可能被声明为他方财产
版权所有© 2013 Intel Corporation。保留所有权利。
有关编译器优化的更完整信息，请参阅我们的 优化声明。
Intel® Developer Zone 提供跨平台应用开发工具和操作方法信息、平台和技术信息、代码示例以及同行专业知识，以帮助开发人员创新并取得成功。加入我们的社区，探索物联网、Android*、Intel® RealSense™ 技术和Windows*，下载工具、访问开发套件、与志同道合的开发人员分享想法，并参加黑客马拉松、竞赛、路演和本地活动。