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

时间:2011-09-22 10:30:01

标签: sencha-touch

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

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

这些问题的答案是必须的,因为这些将决定我们是否应该采用sencha作为跨平台工具。如果我能在iPhone / iPad / Android手机/ Android Pads上运行这种类型的平台特定UI,我将不胜感激。

谢谢, 塔伦。

1 个答案:

答案 0 :(得分:3)

您可以使用主题来获取原生颜色。 Sencha touch附带4个css - android.css,apple.css,bb6.css和sencha-touch.css。如果你对那些不满意,你可以用sass和指南针制作一个自定义的。主题 - http://vimeo.com/17879651

因此,如果您正在使用Web应用程序,那么您应该检测出哪种设备并发送相应的css。如果您正在使用app这样的手机屏幕,那么您可以为每个平台打包不同的CSS。

要获得原生位置和方向,您可以使用sencha的配置文件。在本教程中阅读所有相关内容:http://www.sencha.com/learn/idiomatic-layouts-with-sencha-touch/ - 基本上,在检查了该对象的if / else语句之后,检查设备的类型并将其保存到配置文件对象。

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