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