钛:平台检测并相应地改变界面样式

Titanium: platform detection and changing interface style accordingly

本文关键字：改变 界面 样式 平台 检测      更新时间：2024-03-23

如您所知，不同的平台将需要略微不同的UX/UI。

例如，当你为iphone设计时，你可能有一个后退按钮，但当你为android构建时，你不想要后退按钮。

其他的东西是图标，你可能在android的工具栏上有多个按钮，而在iphone的工具栏上只有两个按钮。

所以问题是……当你构建js文件来定义接口时，你是构建两个不同的接口js文件，每个文件都是特定于平台的，还是只构建一个会根据平台检测改变UI的js文件。

我认为拥有两组特定于平台的UI可能更容易，而不是在平台检测上改变风格，因为用户体验甚至可能不同，所以用户体验和UI的代码会相当复杂？你觉得怎么样？

我认为，拥有两组特定于平台的UI是更好的选择。示例应用程序（与钛工作室一起内置）展示了如何决定平台。以下是示例应用程序的代码：

var osname = Ti.Platform.osname,
    version = Ti.Platform.version,
    height = Ti.Platform.displayCaps.platformHeight,
    width = Ti.Platform.displayCaps.platformWidth;
//considering tablet to have one dimension over 900px - this is imperfect, so you should feel free to decide
//yourself what you consider a tablet form factor for android
var isTablet = osname === 'ipad' || (osname === 'android' && (width > 899 || height > 899));
var Window;
if (isTablet) {
        Window = require('ui/tablet/ApplicationWindow');
}
else {
    // Android uses platform-specific properties to create windows.
    // All other platforms follow a similar UI pattern.
    if (osname === 'android') {
        Window = require('ui/handheld/android/ApplicationWindow');
    }
    else {
        Window = require('ui/handheld/ApplicationWindow');
    }
}
new Window().open();

最好将您的业务逻辑&UI .js文件。另外，为每个平台创建一个.js文件，您可以根据平台指定正确的js URL。您可以参考Kitchen Sink的选项卡示例以获得清晰的想法。

相关文章：