NativeScript: múltiples tamaños de pantalla
Hoy voy a escribir sobre NativeScript y sobre el soporte a múltiples tamaños de pantalla.
Cuando definimos la UI con NativeScript, situamos los objetos y los dimensionamos utilizando puntos (dp). Estos puntos no se corresponden directamente con pixels de la pantalla. Cuando el móvil o tablet ejecuta nuestro programa, convierte estos puntos en pixels reales de la pantalla (px).
Cada dispositivo tiene una densidad de pixels (pixels por pulgada, dpi) diferente. Hay dispositivos con 90 dpi y hay dispositivos con 320 dpi.
Se establece el siguiente criterio: suponemos una densidad de pixels de 160 dpi, y sobre esa densidad definimos los puntos. O sea, los puntos se corresponden exactamente con pixels en pantallas con 160 dpi. Pero en pantallas de otra densidad, los puntos hay que transformarlos en pixels (si tenemos más de 160 dpi, se pintarán varios pixels por cada punto, y si tenemos menos de 160 dpi, necesitaremos varios puntos para completar un pixel).
En un dispositivo con densidad dpi, la conversión a pixels del dispositivo se hace con la siguiente fórmula:
px = dp * dpi / 160
Al programar, se posiciona y se dimensiona todo en puntos, y luego esto se convierte a pixels en cada dispositivo según la fórmula anterior.
Por ejemplo, si creamos un círculo en la posición (300, 200) con 100 puntos de radio, se dibujará de la siguiente forma:
- en un dispositivo de 160 dpi: radio 100 pixels, posición (300, 200)
- en un dispositivo de 320 dpi: radio 200 pixels, posición (600, 400)
- en un dispositivo de 220 dpi: radio 137 pixels, posición (412, 275)
el tamaño y posición del círculo será exactamente igual en ambos dispositivos.
Esto resuelve el problema de que cada dispositivo tiene una densidad de pixels distinta, y los objetos gráficos tendrán el mismo tamaño en todos los dispositivos.
Sin embargo, esto no resuelve el problema de los distintos tamaños de pantalla. Tenemos pantallas desde 3.5" hasta 5.5" y más. Aunque el círculo del ejemplo anterior se mostraría en la misma posición y con igual tamaño en cualquier dispositivo, sin embargo, en función del tamaño físico de la pantalla, el círculo estaría en el centro, o hacia la izquierda o hacia la derecha.
Este problema se resuelve con los layouts que posicionan los objetos y los redimensionan en función del tamaño de la pantalla.
Se considera que un dispositivo es una tablet cuando su dimensión más pequeña es superior a 3,75", o sea, cuando hay más de 600 dp en su dimensión más pequeña.
Si la dimensión más pequeña es mayor que 3,75" (600 dp) => es una tablet
NativeScript sigue el siguiente criterio de nombrado para los ficheros:
filename.qualifier*.extension
Por ejemplo: main_page.android.xml
Los cualificadores pueden ser:
Cuando definimos la UI con NativeScript, situamos los objetos y los dimensionamos utilizando puntos (dp). Estos puntos no se corresponden directamente con pixels de la pantalla. Cuando el móvil o tablet ejecuta nuestro programa, convierte estos puntos en pixels reales de la pantalla (px).
Cada dispositivo tiene una densidad de pixels (pixels por pulgada, dpi) diferente. Hay dispositivos con 90 dpi y hay dispositivos con 320 dpi.
Se establece el siguiente criterio: suponemos una densidad de pixels de 160 dpi, y sobre esa densidad definimos los puntos. O sea, los puntos se corresponden exactamente con pixels en pantallas con 160 dpi. Pero en pantallas de otra densidad, los puntos hay que transformarlos en pixels (si tenemos más de 160 dpi, se pintarán varios pixels por cada punto, y si tenemos menos de 160 dpi, necesitaremos varios puntos para completar un pixel).
En un dispositivo con densidad dpi, la conversión a pixels del dispositivo se hace con la siguiente fórmula:
px = dp * dpi / 160
Al programar, se posiciona y se dimensiona todo en puntos, y luego esto se convierte a pixels en cada dispositivo según la fórmula anterior.
Por ejemplo, si creamos un círculo en la posición (300, 200) con 100 puntos de radio, se dibujará de la siguiente forma:
- en un dispositivo de 160 dpi: radio 100 pixels, posición (300, 200)
- en un dispositivo de 320 dpi: radio 200 pixels, posición (600, 400)
- en un dispositivo de 220 dpi: radio 137 pixels, posición (412, 275)
el tamaño y posición del círculo será exactamente igual en ambos dispositivos.
Esto resuelve el problema de que cada dispositivo tiene una densidad de pixels distinta, y los objetos gráficos tendrán el mismo tamaño en todos los dispositivos.
Sin embargo, esto no resuelve el problema de los distintos tamaños de pantalla. Tenemos pantallas desde 3.5" hasta 5.5" y más. Aunque el círculo del ejemplo anterior se mostraría en la misma posición y con igual tamaño en cualquier dispositivo, sin embargo, en función del tamaño físico de la pantalla, el círculo estaría en el centro, o hacia la izquierda o hacia la derecha.
Este problema se resuelve con los layouts que posicionan los objetos y los redimensionan en función del tamaño de la pantalla.
Se considera que un dispositivo es una tablet cuando su dimensión más pequeña es superior a 3,75", o sea, cuando hay más de 600 dp en su dimensión más pequeña.
Si la dimensión más pequeña es mayor que 3,75" (600 dp) => es una tablet
NativeScript sigue el siguiente criterio de nombrado para los ficheros:
filename.qualifier*.extension
Por ejemplo: main_page.android.xml
Los cualificadores pueden ser:
- cualificadores de orientación: port, land
- cualificadores de plataforma: android, ios
- cualificadores de tamaño de pantalla: minWHxxx la dimensión más pequeña debe ser al menos xxx dp's, minWxxx el ancho debe ser al menos xxx dp's, minHxxx el alto debe ser al menos xxx dp's
Con este criterio, podemos definir diseños de pantalla y estilos específicos para una orientación, para un tamaño o para un sistema operativo.
The King Casino Company - Ventureberg
ResponderEliminarIt was born in https://jancasino.com/review/merit-casino/ 1934. worrione The Company offers luxury deccasino hotels, If you don't have ventureberg.com/ a poker room in your house, communitykhabar then you'll find a poker room in the