Titanium handling different resoutions

Question

Simple question, which is the best way to make sure that the app works on different screen resolutions without looking crap? I can't use static values, then it want adjust according to the resolution. Right now i am using relative measurements (percentage of screen) but wonder if that's really the best way to handle it!?

Nguyen

3.5 years passed, is it still the same answer for this question? Titanium is now 3.5.0GA and Alloy is also 1.x. – Duckpin

Answer 1

Another/additional option we have been successful with is a small set of functions which use the screen density value to compute display sizes... this is of course only an approximation, as there are only the four densities, but we have found this to be very helpful.

//=============================================================================
// 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;
}

So if you want something to be 3/4 inch high on the screen....

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

...or if you want to scale things by point size, one could make some constants...

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"},...

We also created a couple of functions to get the screen height and width, so if we wanted a better layout on a tablet or something tiny we could better understand what we were dealing with.

//=============================================================================
// 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;
}

You can go on and on from there... but this really helped us nail down how we laid out our screens on the different densities and platforms. The inch function has exception handling only because we use it early in the app, and sometimes the Ti.Platform is still undefined. By the time we are laying out our reports Ti.Platform is available and so the screen functions do not have the exception handling. If you need to query earlier you may need exception handling in those as well.

Hope this helps!

Anhydride

Answer 2

You'll want to modify your tiapp.xml - in the android section you add a manifest record like so:

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

That will make the app default to the same style that the older versions of titanium used, where it basically scales them according to the device in use. More details on the change can be found here: http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html

Nourishment

No problem - the amount of info Appcelerator provide on this sort of thing is shockingly poor! – Nourishment

Answer 3

well, as far as I googled, the solution is :

1.detect the specific screen resolution:

// 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 query style 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'
}

refer to: http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-Platform-SpecificStyles

Duckpin