|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
   AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

B4A en español - Juan Antonio Villalpando
(BASIC4Android)

-- Tutorial de B4A --

Volver al índice del tutorial

____________________________

15.- Ubicación de los controles según el tamaño de pantalla.

- Tutorial. Ubicación de los controles según el tamaño de pantalla. Anchor.

- Presentación.

- Dependiendo del tamaño de la pantalla del móvil o de la tablet, los controles se situarán de una manera o de otra.
- Los móviles y las tablet podemos colocarlas en forma horizontal o vertical.
- Cuando cambiamos un dispositivo de horizontal a vertical o viceversa, cambia la situación de los controles y las variables, es como si reiniciara la aplicación. (En el emulador para cambiar vertical/horizontal pulsamos las teclas Ctrl - F11)

- Para ver como quedarán los controles en distintos móviles y tablet, en el Designer pulsamos en Tools y luego en Send To UI Cloud.

- En un tutorial anterior ya vimos cómo podemos controlar la orientación de la pantalla.

- Se puede utilizar con el mismo Layout dos Variant, uno para el horizontal y otro para el vertical.
(También se pueden utilizar otros Variant para distintos tamaños de pantalla).

- Cuando la pantalla pasa de orientación horizontal a vertical o viceversa, se produce llama a la subrutina Activity_Pause.
En general, se ejecuta la Activity_Pause cuando...

1. Se inicia una nueva Activity
2. Se pulsa el botón "Casa" del móvil.
3. Cambia la orientación (horizontal/vertical).
4. Se pulsa en botón de "Volver" del móvil.

Cuando...

1. Se inicia una nueva Activity ---> La Activity anterior se mantine en memoria para volver a usarse, si no se borra antes.
2. Se pulsa el botón "Casa". ---> La Activity se mantine en memoria para volver a usarse, si no se borra antes.
3. Cambia la orientación horizontal/vertical. ---> La Activity se destruirá y se creará de nuevo si vuelve.
4. Se pulsa en botón de "Volver". ---> La Activity se destruirá. (Es como cerrarla).

Ver ciclos. Así que a veces hacemos una operación de cambio de orientación, de pulsar el botón "Casa" o el "Volver" y cuando regresamos a la aplicación puedes estar los controles desubicados y la variables iniciadas.
En estos caso debemos poner en la subrutina Activity_Pause un código para guardar las variables, para cuando regresemos al programa.
Las variables se pueden guardar en archivos y recuperarlas cuando volvamos a necesitas utilizando las subrutinas Activity_Create o Activity_Resume.

________________
1.- Tamaño y situación de los controles según el tamaño de la pantalla.

- En los foros encontramos ejemplos y tutoriales para controlar el tamaño y situación de los View según la pantalla.
Se puede hacer mediante Script en el Designer.

1.- http://www.basic4ppc.com/android/files/DesignerScripts_AutoScale.zip
2.- http://www.basic4ppc.com/android/forum/threads/designer-scripts-autoscale-tutorial.22522/
3.- Tutorial Designer.
4.- Varias pantallas.

Con la versión Basic4Android 3.20, en enero de 2014, viene una opción en el Designer llamada Anchor (algo así como anclaje) que trata de situar a los controles en el lugar idóneo de la pantalla según el tamaño de esta.

Cuando situamos los controles mediante el Designer, obtenemos las opciones Horizontal Anchor y Vertical Anchor.
Que pueden ser LEFT, TOP o BOTH.
Según pongamos una u otra obtendremos además otras opciones...

Left, Top, Right Edge Distance, Bottom Edge Distance, Width y Height (estos dos cuando ponemos LEFT o TOP)

Si situamos un botón y ponemos su Anchor en LEFT y TOP, como en la imagen inferior , se situará siempre a 30 de izquierda y 20 de arriba.
Además tendrá una anchura de 120 y un alto de 80.
Sitúalo y haz la prueba cambiando distintas tamaños de pantalla (Pulsa la pestaña Layout del Abstract Designer y elige pantallas).
Esta es la opción por defecto. Observa las marcas de flechas en la arista superior e izquierda del Button1.

Si ponemos el Horizontal Anchor en RIGHT, desaparece Left y aparece la opción Right Egde Distance, en donde se establece que la distancia de enclavamiento ahora es hacia la derecha, en este caso 170.

Si ponemos el Horizontal Anchor en BOTH, desaparece Width y aparece Left y Right Egde Distance, en donde podemos poner la distancia del botón a izquierda y derecha.

Si establecemos BOTH y abrimos una pantalla grande de un Tablet, el botón se agrandará mucho.

 

Veamos qué ocurre cuando ponemos dos botones con Horizontal Anchor en BOTH.

En este caso es mejor ponerlos de esta manera...

El Button3 observamos que está mal situado.

Como he comentado anteriormente, si queremos ver como querarían los View en móviles reales vamos Send To UI Cloud y nos saldrá una página web con distintos tamaños de dispositivos.

__________________________

Baja este ejemplo y estúdialo. Como verás la proporción horizontal de los Paneles no se conserva.

Anchor2.zip

- Si quisíeramos que cada Panel ocupara la mitad horizontal pondríamos esto en el código...

Sub Activity_Resume
Panel1.Width = 50%x
Panel2.Left = Panel1.Width
Panel2.Width = 50%x
End Sub

Es decir, podemos situar los controles mediante el Designer, pero luego en el código los podemos modificar.

- Modificación del Designer anterior. Todos los Views en un Panel y con sus dimensiones vinculadas al Panel.

Se puede crear un Panel que ocupe toda la pantalla. Luego situar todos los demás Views en ese Panel utilizando el Anchor.
El Anchor será relativo al Panel. Al redimensionar el Panel cambiará la ubicación de los Views.

Baja esta modificación del código anterior, Anchor3.zip .
He puesto un Panel3 y dentro de él todos los Views. Puedes modificar el tamaño del Panel incluso que salga de la pantalla.
Ver este vídeo del foro.

__________________________

2.- Dos Variant. Horizontal y Vertical.

- Bajar el ejemplo Horizontal_Vertical.zip

En vez de hacer una recolocación "automática" como hemos visto con el Anchor, podemos crear varios Variant, y según el tamaño y la orientación, situar los distintos Views. Podríamos hacer un Variant por cada tamaño de pantalla, pero no es recomendable trabajar con tantos Variant, con hacer dos, unos horizontal y otro vertical ya podemos tener bien dispuestos nuestro Views.

1.- En un nuevo proyecto vamos al Designer y creamos un Layout llamado "Layout" con estos controles,
en un Variant Vertical de 320 x 480...

 

2.- Pulsamos en New Variants y creamos un layout horizontal de 480 x 320.

En el Abstract Designer pulsamos en la pestaña Layout y elegimos
Phone (landscape): 480 x 320

Reubicamos los controles de esta manera:

Guardamos el layout. Atención el layout es el mismo de antes "Layout". Es decir, tenemos el mismo layout en horizontal y en vertical.

Copiamos el siguiente código...

Código

#Region  Project Attributes 
    #ApplicationLabel: Horizontal Vertical
    #VersionCode: 1
    #VersionName: 
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes 
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
' Juan Antonio villalpando
' juana1991@yahoo.com
' enero 2014
End Sub

Sub Globals
Dim Label1, Label2, Label3 As Label
Dim EditText1, EditText2 As EditText
Dim nombre, edad As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout")
Label1.Text = "Nombre"
Label2.Text = "Edad"
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub Button1_Click
nombre = EditText1.Text
edad = EditText2.Text
Label3.Text = nombre & " - " & edad
End Sub

Ejecutamos el proyecto, ponemos nombre y edad, pulsamos el botón.

Cambiamos a posición horizontal/vertical pulsando la combinación de teclas Ctrl F11.

Observamos que cuando cambia la orientación, "se pierden" las variables.

Cambiamos el código...

He puesto las variables en Process_Global

y he añadido

Sub Activity_Resume
EditText1.Text = nombre
EditText2.Text = edad
Label3.Text = nombre & " - " & edad
End Sub

Para que cada vez que vuelva del cambio de orientación se vuelva a rellenar los EditText y el Label3.

Ahora cambiamos la pantalla en Horizontal/Vertical mediante Ctrl F11 y observamos que mantiene las variables.

Código del programa en Basic4Android
#Region  Project Attributes 
    #ApplicationLabel: Horizontal Vertical
    #VersionCode: 1
    #VersionName: 
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes 
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
' Juan Antonio villalpando
' juana1991@yahoo.com
' enero 2014
Dim nombre, edad As String
End Sub

Sub Globals
Dim Label1, Label2, Label3 As Label
Dim EditText1, EditText2 As EditText
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout")
Label1.Text = "Nombre"
Label2.Text = "Edad"
End Sub

Sub Activity_Resume
EditText1.Text = nombre
EditText2.Text = edad
Label3.Text = nombre & " - " & edad
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub Button1_Click
nombre = EditText1.Text
edad = EditText2.Text
Label3.Text = nombre & " - " & edad
End Sub
      

- Podría ocurrir que queramos cambiar de aplicación, pulsemos el botón "Atrás", etc., pero queramos mantener la última variable que hemos escrito.
Para ello deberíamos poner en la Subrutina Pause

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Un código que guardara la variable en un archivo para más tarde cuando volvamos a la aplicación tomar esas variables que guardamos en ese archivo e insertarlas en el programa.
La Subrutina Activity_Pause se ejecuta al salir de la aplicación.

__________________________

- Detección de si el móvil está en horizontal o vertical.

Dim  Orientation  As String
If  Activity.Width > Activity.Height  Then
     Orientation =  " Landscape "
Else
     Orientation =  " Portrait "
End If

Otra manera de detectar cuando el móvil está en horizontal o en vertical

If GetDeviceLayoutValues.Height > GetDeviceLayoutValues.Width Then
'portrait orientation
Activity.AddView(lblPlayer, 20dip, 10dip, 200dip, 400dip)
Else
'landscape orientation
Activity.AddView(lblPlayer, 2dip, 10dip, offsetX - 15dip, 200dip)
End If

En el ejemplo de código anterior, se detecta si el dispositivo está en horizontal o en vertical, según esté en uno o en otro, un label llamado lblPlayer se sitúa en un sitio o en otro del Activity.

_______________________________________________

- Orientación horizontal - vertical de una página web.

- Consulta este ejemplo del foro y baja la aplicación PreserveURLOnScreenRotation.zip.

________________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información