2011-09-06 55 views
9

簡單的問題,這是確保應用程序在不同屏幕分辨率上工作而不看垃圾的最佳方式?我不能使用靜態值,然後根據分辨率進行調整。現在我正在使用相對測量(屏幕的百分比),但不知道這是否是處理它的最好方法!?鈦處理不同的資源

+0

3.5年過去了,這個問題仍然是相同的答案?鈦現在3.5.0GA和合金也是1.x. –

回答

7

我們已經成功的另一個/附加選項是一組使用屏幕密度值計算顯示尺寸的功能......這當然只是一個近似值,因爲只有四種密度,但我們發現這是非常有用的。

//============================================================================= 
// inch 
// 
// compute approximate number of pixels for the specified physical on-screen 
// size based on the density reported by the OS 
//============================================================================= 
function inch(size) 
{ 
    // default to 160 dpi if unavailable 
    var height = size * 160.0; 

    try 
    { 
     // compute header height based on screen density ... target .25" height 
     height = size * Ti.Platform.displayCaps.dpi; 
    } 
    catch(e) { warn("Error accessing display caps for screen density calculation: " + e); } 

    return height; 
} 

所以,如果你想要的東西是3/4英寸高的屏幕上....

Ti.UI.createThing({ height: inch(.75)}); 

...或者,如果你想通過縮放點大小的東西,一個可以使一些常量...

const g_12pt = inch(12/72); //0.166667 
const g_10pt = inch(10/72); //0.138889 
const g_8pt = inch(8/72); //0.111111 
const g_6pt = inch(6/72); //0.083333 
... 
...font:{fontSize: g_10pt, fontWeight:"bold"},... 

我們還創建了幾個函數來得到屏幕的高度和寬度,所以如果我們想在平板電腦或細小的東西,我們可以更好地瞭解我們正在處理一個更好的佈局。

//============================================================================= 
// screenWidth - return screen width in inches 
//============================================================================= 
function screenWidth() 
{ 
    return Titanium.Platform.displayCaps.platformWidth/Titanium.Platform.displayCaps.dpi; 
} 

//============================================================================= 
// screenHeight - return screen height in inches 
//============================================================================= 
function screenHeight() 
{ 
    return Titanium.Platform.displayCaps.platformHeight/Titanium.Platform.displayCaps.dpi; 
} 

你可以從那裏繼續......但是這確實幫助我們明確了我們如何在不同的密度和平臺上佈置我們的屏幕。英寸函數僅僅因爲我們在應用程序的早期使用它而有異常處理,有時Ti.Platform仍然未定義。在我們製作報告時,Ti.Platform可用,因此屏幕功能沒有異常處理。如果您需要更早地查詢,那麼您也可能需要異常處理。

希望這會有所幫助!

5

你要修改tiapp.xml - 在android部分添加一個清單記錄,像這樣:

<android xmlns:android="http://schemas.android.com/apk/res/android"> 
    <manifest> 
     <supports-screens android:anyDensity="false"/> 
    </manifest> 
</android> 

這將使應用程序默認的相同的風格,老版本的鈦使用時,它基本上根據使用的設備對其進行縮放。有關更改的更多細節可以在這裏找到:http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html

+0

非常感謝RickM,你的回答幫了我很大的忙。 – Anand

+2

沒問題 - Appcelerator在這類事情上提供的信息量驚人地差! – Sk446

1

好,據我GOOGLE了,解決的辦法是:

1.detect具體的屏幕分辨率:

// app/alloy.js 
Alloy.Globals.isIos7Plus = (OS_IOS && parseInt(Ti.Platform.version.split(".")[0]) >= 7); 
Alloy.Globals.iPhoneTall = (OS_IOS && Ti.Platform.osname == "iphone" && Ti.Platform.displayCaps.platformHeight == 568); 

2.write查詢風格TSS:

// Query styles 
"#info[if=Alloy.Globals.isIos7Plus]" : { 
    font : { textStyle : Ti.UI.TEXT_STYLE_FOOTNOTE } 
}, 
"#title[if=Alloy.Globals.isIos7Plus]" : { 
    top: '25dp', // compensate for the status bar on iOS 7 
    font : { textStyle : Ti.UI.TEXT_STYLE_HEADLINE } 
}, 
"#content[if=Alloy.Globals.isIos7Plus]" : { 
    font : { textStyle : Ti.UI.TEXT_STYLE_CAPTION1 } 
}, 
"ScrollView[if=Alloy.Globals.iPhoneTall]" : { 
    height : '500dp' 
} 

參考到:http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-Platform-SpecificStyles