2011-09-06 11 views
9

simple pregunta, que es la mejor manera de asegurarse de que la aplicación funciona en diferentes resoluciones de pantalla sin mirar basura? No puedo usar valores estáticos, entonces quiero ajustar de acuerdo a la resolución. En este momento estoy usando mediciones relativas (porcentaje de pantalla) pero me pregunto si esa es realmente la mejor manera de manejarlo?titanio manejo de diferentes resoutions

+0

3,5 años pasados, ¿sigue siendo la misma respuesta para esta pregunta? El titanio ahora es 3.5.0GA y Alloy también es 1.x. –

Respuesta

7

Otra opción adicional con la que hemos tenido éxito es con un pequeño conjunto de funciones que utilizan el valor de densidad de pantalla para calcular el tamaño de visualización ... esto es solo una aproximación , ya que solo hay cuatro densidades, pero hemos encontrado que esto es muy útil.

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

Así que si quieres que algo sea de 3/4 pulgadas de alto en la pantalla ....

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

... o si desea cambiar la escala cosas por tamaño en puntos, uno podría hacer algunas constantes ...

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

también creamos un par de funciones para obtener la altura y la anchura de la pantalla, así que si queríamos un mejor diseño en una tableta o algo pequeño que podríamos entender mejor lo que nos ocupa.

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

Puede seguir y seguir desde allí ... pero esto realmente nos ayudó a concretar la forma en que expusimos nuestras pantallas en las diferentes densidades y plataformas. La función pulgadas tiene el manejo de excepciones sólo porque utilizamos a primera hora de la aplicación, ya veces el Ti.Platform aún no definido. Por el momento estamos poniendo nuestros informes Ti.Platform está disponible y así las funciones de la pantalla no tenemos el control de excepciones. Si necesita consultar antes, es posible que también necesite el manejo de excepciones.

Espero que esto ayude!

5

Usted desea modificar su tiapp.xml - en la sección androide se agrega un registro manifiesta de este modo:

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

que hará que el valor por defecto de aplicaciones para el mismo estilo que las versiones anteriores de titanio usado, donde básicamente los escala de acuerdo con el dispositivo en uso. Puede encontrar más detalles sobre el cambio aquí: http://developer.appcelerator.com/blog/2011/06/new-defaults-for-android-layouts-in-1-7.html

+0

gracias RickM mucho, su respuesta me ayudaron mucho .. – Anand

+2

No hay problema - la cantidad de información Appcelerator facilitarse sobre ese tipo de cosas es sorprendentemente pobre! – Sk446

1

así, por lo que en Google, la solución es:

1.Detect la resolución de pantalla específica:

// 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 estilo de consulta 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' 
} 

se refieren a: http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-Platform-SpecificStyles

Cuestiones relacionadas