使用 sencha touch 跨平台的一致 UI 而不是一致的 UI

Question

我想知道如何在所有平台上创建一致的 UI，而不是恒定的 UI。这里所说的一致是指 UI 应该看起来是该特定平台的原生。例如，iOS 中的标签栏位于底部，具有特定的外观和感觉，而 Android 中的标签栏位于顶部，具有不同的外观。

如果我在 sencha 中创建标签栏，它默认位于底部并提供与 iOS 非常相似的蓝色外观，但它不适用于 Android，因为默认外观我会失去 Android 应用程序的感觉，它就像 Android 中的 iOS 应用一样。 那么我该如何解决这个问题呢？我是否编写所有平台的条件以正确布局组件并应用特定的 CSS，或者我可以通过主题来完成它，如果是的话，我可以使用主题来做些什么？请注意，我的目标不仅是拥有不同的组件品牌，而且还要改变它们的位置/方向等。

这些问题的答案是必须的，因为这些将决定我们是否应该采用 sencha 作为跨平台工具。如果我能获得在 iPhone/iPad/Android 手机/Android Pads 上运行并提供其平台特定 UI 的任何此类工作示例，我将不胜感激。

谢谢， 塔伦。

Answer 1

您可以使用主题来获取本机颜色。 Sencha touch 带有 4 个 css - android.css、apple.css、bb6.css 和 sencha-touch.css。如果你对这些不满意，你可以用 sass 和 compass 定制一个。关于主题 - http://vimeo.com/17879651

因此，如果您正在开发网络应用程序，那么您应该检测设备类型并发送适当的 css。如果您正在做一个类似于 phonegap 的应用程序，那么您可以为每个平台打包不同的 css。

要获取本地位置和方向，您可以使用 sencha 的配置文件。在本教程中阅读所有关于它们的信息：http://www.sencha.com/learn/idiomatic-layouts-with-sencha-touch/ - 基本上，您检查设备的类型并将其保存到配置文件对象，在您拥有检查该对象的 if/else 语句之后。

在这里您可以找到一些使用 sencha touch 制作的应用程序 - http://www.sencha.com/apps/