Ajustes de diseños según resolución
Como adaptar la resolución y fuente de tu App en los distintos dispositivos
Las aplicaciones XOne gozan de gran versatilidad, ya que su utilización puede realizarse en cualquier dispositivo, sin que las especificaciones de los mismos influyan en su funcionamiento o diseño.
Para lograr que el diseño de las mismas se adapten a cualquier tipo de dispositivo independientemente de su resolución es indispensable usar scale-fontsize como atributo en el xml de nuestra app:
| Atributo | Funcionalidad |
|---|---|
| scale-fontsize | Permite ajustar o escalar las fuentes del proyecto a la resolución del dispositivo con el que se trabaja. Por defecto su valor es “false”. En el caso de los dispositivos iOS, puede usarse conjuntamente con el atributo ios-font-factor. No es obligatorio, pero si aconsejable para realizar una adaptación entre tamaños de fuentes entre los dispositivos Android e iOS. |
El atributo scale-fontsize por defecto su valor es “false”, al tomar valor “true” permite el ajuste de las fuente de nuestra aplicación de manera que los atributos relacionados con las fuentes de nuestras aplicaciones tomaran el valor del tamaño de fuente de ese dispositivo en específico. Por ejemplo si hemos definido un prop cuyo atributo es fontsize=“5”, el tamaño de la fuente en este caso, al haber previamente definido a true el atributo scale-fontsize hará que la fuente tome el tamaño 5 que le corresponde a ese dispositivo.
En el caso de los dispositivos iOS, puede usarse conjuntamente con el atributo ios-font-factor. No es obligatorio, pero si aconsejable para realizar una adaptación entre tamaños de fuentes entre los dispositivos Android e iOS, que no es más por el valor que vamos a multiplicar la fuente de nuestra app para lograr el tamaño deseado.
Formas de ajustar tamaños de controles y fuentes
| Detalle | Descripción |
|---|---|
| Por porcentaje (%) | Se utiliza con mejor resultado de diseño en controles que utilizan width y height, como en los frames. |
| Por píxel (p) | Se adaptará el width y el height a la resolución del dispositivo usando regla de 3, tanto en tamaño de los controles como en fuentes. |
Ejemplo:
<prop name="FECHA" type="D" visible="0" text-fontsize="5" labelwidth="0" lmargin="5p" width="400p" text-align="right" locked="true" /> <prop name="MAP_HORA" type="T" visible="0" text-fontsize="5" labelwidth="0" locked="true" lmargin="5p" width="150p" text-align="left" newline="false" /> <prop name="MAP_COLORVIEW" type="T" visible="0" info="#4fbb74"/> <prop name="MAP_FORECOLOR" type="T" visible="0" info="#4fbb74"/> <prop name="TIPO" type="N" visible="0" info="texto,documento,foto,voz"/>
Atributos que utilizan para ajustes de tamaño de fuentes
| Atributos para ajustes de tamaño de fuentes | Descripción |
|---|---|
| fontsize | Tamaño de la fuente |
| labelfont-size | Tamaño de la fuente para controles con etiquetas |
| textfont-size | Tamaño de fuente para la parte del texto del control |
Ejemplos:
<?xml version="1.0" encoding="iso-8859-15" standalone="yes"?> <xml> <app prefix="gen" version="V:24.07.2020" vtime="4" application-max-priority="true" autologon="true" load-wait="false" show-wait-dialog="false" ios-font-factor="12" scale-fontsize="true" resolution-height="2560" resolution-width="1440" screen-orientation="portrait" debug="true" default-language="javascript" > <style url="default.css" strict-mode="true" /> <style url="default-colors.css" strict-mode="true" /> <style url="cssframe.css" strict-mode="true" /> <style url="controles.css" strict-mode="true" /> <style url="camara.css" strict-mode="true" /> <entry-point> <item name="EntradaApp" conditions="" /> </entry-point> --> <connection name="DatosOnline" datemask="ymd" connstring="Provider=Xone Remote ..... /> <connection name="OnlineSpeed" datemask="ymd" connstring="Provider=Xone Remote Provider...... />
<coll name="Ayuda" title="Ayuda" objname="gen_ayuda" updateobj="gen_ayuda" progid="ASData.CASBasicDataObj" loadall="true" connection="DatosOnline" sql="SELECT ID, TITULO, DESCRIPCION, DOCUMENTO, TIPO, 'iconoayudas.png' AS MAP_IMAGEN FROM GEN_AYUDA WHERE BAJA=0 AND DESTINO='APP' ORDER BY ORDEN ASC" no-data-text="No hay documentos disponibles" cell-bgcolor="#00000000" > <group name="General" id="1"> <frame name="todo" width="100%" height="50%" align="top|center" bgcolor="#00000000" forecolor="#00000000" framebox="false" > <frame name="derecha" width="40%" height="50%" lmargin="30%" tmargin="10%" bgcolor="#00000000" align="center"> <prop name="MAP_IMAGEN" type="IMG" width="80%" visible="4" /> </frame> <frame name="izquierda" width="100%" height="40%" align="center" bgcolor="#00000000"> <prop name="TITULO" type="T" class="propGrid fuente7" text-align="center" heightx="30%" text-forecolor="#FFFFFF" textfont-bold="true" lines="2p" /> <prop name="DESCRIPCION" visible="0" type="T" class="propGrid" heightx="70%" textfont-size="3" text-forecolor="#FFFFFF" lines="2" /> <prop name="DOCUMENTO" type="T" visible="0" /> <prop name="BAJA" type="N" visible="0" info="0 activo. 1 borrado(no se ve)"/> <prop name="TIPO" type="T" visible="0" info="VIDEO, YOUTUBE, PDF"/> </frame> </frame> </group> <selecteditem refresh="false" show-wait-dialog="true"> <action name="runscript"> <script language="javascript"> //Ver el documento, segun el tipo que sea if (comprobarConexion() == 'OK') { verAyuda(self); } else { showPregunta('P0',self); } </script> </action> </selecteditem> </coll>
.propPH
{
bgcolor:#00000000;
forecolor:#222222;
img-width:125p;
img-height:125p;
img-delete:bt_Delete.png;
img-delete-sel:bt_Delete.png;
img-camera:bt_camera.png;
img-camera-sel:bt_camera.png;
}
.propGrid
{
visible:4;
width: 97%;
locked:true;
text-align:left;
labelwidth:0;
labelbox:false;
fontsize:4;
textfont-size:3;
floating-tooltip:false;
text-bgcolor:#00000000;
text-forecolor:#000000;
fontbold:false;
xlpadding:50p;
lmargin:3%;
text-border:false;
}