Currículo: este documento forma parte de los contenidos prácticos del Tema 2 – Desarrollo móvil correspondiente a 1ºESO.
En el contexto del desarrollo de aplicaciones móviles, y en general, en todo el mundo del desarrollo de software, el concepto de layout es fundamental para crear interfaces de usuario atractivas y funcionales.
Un layout determina la organización espacial de los elementos visuales dentro de una pantalla. Esto incluye cómo se disponen los botones, textos, imágenes y otros componentes interactivos.
El layout debe ser adaptable a diferentes tamaños de pantalla y orientaciones (vertical u horizontal). Esto asegura una experiencia de usuario coherente a través de diversos dispositivos.
Un layout bien diseñado no solo mejora la estética de la aplicación, sino que también contribuye a una mejor usabilidad. Elementos como la separación adecuada entre botones y la legibilidad del texto son aspectos fundamentales que dependen del diseño del layout.
En resumen, el layout establece cuál es la disposición de los elementos en las distintas pantallas de la aplicación.
Como habrás visto en el pequeño ejemplo que hicimos en prácticas anteriores, todos los elementos que añadíamos en la vista de diseño al lienzo, se situaban unos debajo de otros, en una disposición vertical.
Esto nos ofrece muy poca libertad y limita mucho nuestros diseños.
Pero, podemos usar un layout con contenedores que nos permiten distribuir el contenido horizontalmente -uno al lado del otro- y verticalmente -uno debajo de otro-.
Así, combinando layouts y contenedores dentro de ellos, podemos obtener cualquier distribución de componentes que queramos:
Lo que SIEMPRE debe hacerse es reflexionar sobre qué aspecto tiene que tener la pantalla que queremos diseñar. Dibujarla en un papel o con alguna herramienta digital y cuando quede a nuestro gusto, ir a Thunkable y diseñar la pantalla fijándonos en el dibujo que hicimos previamente.
Estos son algunos ejemplos de bocetos que podríamos haber dibujado antes de diseñarlos en nuestra app de Thunkable:
Por ejemplo, imagina que has dibujado este boceto para una aplicación que quieres diseñar:
En lo primero que hay que fijarse es: cuántas zonas distintas tiene la pantalla.
Si nos fijamos bien tiene 5:
- La parte superior donde está el carrusel de imágenes.
- El título del artículo.
- El autor del artículo.
- Los botones para dejar un Like y Comentar.
- El texto del artículo.
Usando el componente layout, podemos empezar por crear una estructura de 5 contenedores:
Sin embargo, no todas las zonas se distribuyen igual.
En las zonas 1, 2, 3 y 5 da igual, porque solo hay un elemento dentro de ellas, por tanto no importa si la distribución de ese elemento es horizontal y vertical.
Pero la zona 4 tiene dos elementos, uno al lado del otro, por tanto ese contenedor tiene que tener obligatoriamente una disposición horizontal.
Así quedaría tras añadir los elementos que forman parte de cada contenedor:
 |  |
Bien.
Teniendo claro todo lo anterior, vamos a ver qué herramientas tenemos a mano para diseñar esa estructura.
El elemento que debemos utilizar para estructurar el layout de la pantalla es:
Lo arrastramos sobre el lienzo y nos aparece esto:
 |  |
Por defecto aparece un layout con dos contenedores. Cada contenedor podemos definirlo con una disposición horizontal o vertical, pulsando sobre él y modificando sus opciones:
 |  |
De igual manera, si en vez de dos contenedores, necesitamos algunos más, simplemente pulsamos sobre el layout y desde el panel de opciones, añadimos uno a uno todos los contenedores que queramos:
 |  |
Además, usando el panel UI Components podemos arrastrar unos contenedores dentro de otros para complementar su visualización y conseguir así, cualquier estructura que se nos ocurra.
De esta manera, conseguimos ir creando la estructura principal de nuestra pantalla: usando uno o más layouts, y dentro de cada uno de ellos, dos o más contenedores (cada uno de ellos con la disposición que nos interese -horizontal o vertical-).
Finalmente, debes saber que, dependiendo de si tenemos seleccionado un layout o un contenedor, en el panel de opciones veremos opciones distintas para situarlos, darles margen externo (margin), margen interno (padding), sombra, borde, color de fondo, etc.
 |  |
¿Qué debes hacer para entregar?
Tu trabajo es diseñar en Thunkable esta aplicación siguiendo los pasos anteriores. Cuando la tengas, dirígete a classroom y allí veras una modificación que debes hacerle a este proyecto.
Entrega en classroom, antes de la fecha límite, un enlace a tu proyecto tal y como se explicó cuando hicimos el repaso de la interfaz de usuario de Thunkable.