2012-07-28 31 views
2

如您所知,不同的平臺將需要略有不同的UX/UI。Titanium:相應的平臺檢測和更改界面樣式

例如,當您爲iphone設計時,您可能會有後退按鈕,但是當您爲android構建時,不需要後退按鈕。

其他的東西是圖標,你可能在android的工具欄上有多個按鈕,在iphone上只有2個按鈕。

所以問題是......當你構建js文件來定義接口時,你是否構建了兩個不同的接口js文件,每個接口js文件都是特定於該平臺的,或者只是一個可以根據平臺檢測更改UI的js文件。


我想這可能是更容易有兩套UI的特定於平臺,而不是在平臺上檢測轉變作風,因爲UX甚至可能是不同的,所以對於UX和UI代碼將是相當複雜?你怎麼看?

回答

3

我認爲,有兩套特定於平臺的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(); 
+1

最好有一個應用程序級別的函數和一個應用程序級別的變量來存儲平臺和版本,因爲每次調用Ti.Platform.osname時Ti都必須進入操作系統。另外,你不必一直放置'osname ==='android''並使用'if(app.isAndroid()){}'來代替。 – Cyntech 2012-08-03 04:41:09

+0

@Cyntech,app.isAndroid定義的這個「app」在哪裏? – 2013-08-08 21:41:57

+1

@TonyAdams我使用全局應用程序變量(在我的bootsrap js文件中定義)來存儲頂級配置變量或函數,甚至窗口。但是,自從Alloy出現以來,我沒有編寫過Ti,所以接受的做這種事情的方法可能已經改變了。 – Cyntech 2013-08-09 03:51:23

0

這將是更好的分離業務邏輯& UI .js文件。還要爲每個平臺創建一個.js文件,並根據平臺指定正確的js URL。您可以參考Kitchen Sink示例中的標籤以獲取清晰的想法。