Cuando hablamos de interfaces gráficas en desarrollo de aplicaciones móviles, implicitamente se involucran algunos conceptos relevantes al diseño de Apps, y este proceso de diseño va desde la conceptualización de la idea, los mockups o bocetos, los diseños finales hasta la programación del sistema y posterior entrega.
Normalmente en esta etapa se definen prototipos de baja fidelidad como los que se muestran en la imágen anterior y posteriormente se pueden validar diferentes propuestas hasta elegir el diseño final.
Adicionalmente debemos tener presentes otros conceptos como la UI (User Interface), GUI (Graphical User Interface), UX (User Experience), elementos que son transversales al tipo de aplicacion, sea móvil, web o escritorio, en si varios elementos incluidos la usabilidad, accesibilidad entre otros más, pero por suerte, android brinda unos lineamientos de diseño definidos qué facilitan la creación de aplicaciones.
Material Design
Esta es una filosofia de diseño propuesta por google para la creación de sus aplicaciones, es un lenguaje de diseño que brinda una propuesta y normativa de diseño en cuanto a componentes, colores, estilos, animaciones, tipografia, navegación entre otros elementos que componen la aplicación.
Son un conjunto de reglas claras de como debemos crear nuestras aplicaciones, creado inicialmente para el desarrollo de apps android desde la versión lollipop pero dada su aceptación se ha ido migrando también para sistemas web. ver: https://developer.android.com/guide/topics/ui?hl=es-419
Material You
Con la llegada de android 12, en el 2021 se crea Material You, una evolución de Material Design donde el diseño varia según las preferencias del usuario dandole mayor relevancia a las animaciones y formas dinamicas, este nuevo enfoque de diseño busca darle mayor expresividad a las aplicaciones, una de sus caracteristicas es que la gama de colores de las aplicaciones puede variar dependiendo del dispositivo y las preferencias de usuario, por ejemplo, se puede adaptar según los colores del fondo que esté definido en el dispositivo https://developer.android.com/jetpack/androidx/releases/compose-material3
Elementos claves para las GUI en Android
Como vemos la filosofia de diseño ha tenido diferentes actualizaciones sin embargo la base es la misma, buscando cada vez realizar una mejora más personalizada para el usuario, sin embargo para la creación de interfaces en Android no solo debemos tener presente esta filosofia, sino su integración con diferentes aspectos en torno a unidades de medida, componentes gráficos y la forma de visualizar dichos componentes.
En Android podemos hacer uso de ficheros xml para la construcción de las interfaces, cada interfaz contiene views que están agrupadas en view groups.
Por lo regular los lenguajes de programación brindan alternativas de interfaces graficas de usuario para facilitar aún más el trabajo con el sistema que estamos programando, cuando se trabaja con dispositivos móviles este concepto juega un papel de suma importancia pues va a facilitar la interacción del usuario no solo con nuestra aplicación sino con el dispositivo en general.
Android actualmente brinda dos alternativas nativas para la construcción de interfaces gráficas, una es la tradicional utilizando archivos XML que permiten tener una independencia entre la parte gráfica de la aplicación y la lógica de negocio y por otro lado desde hace poco surgió Jetpack Compose que corresponde a un nuevo kit de desarrollo para la creación de interfaces en Android que no requiere el uso de XML.
En esta guía veremos algunos de los componentes gráficos básicos que pone a nuestra disposición el sistema operativo Android, inicialmente trabajaremos de la manera tradicional con XML y en un futuro se realizará la transición a Jetpack Compose, pero antes de entrar en materia, es importante referenciar algunos conceptos y propiedades comunes para los diferentes componentes, estos tienen relación con el tamaño, uso de texto y la forma de identificarlos.
View
Los view (Vistas) son elementos que componen la interfaz de usuario de una aplicación como por ejemplo un botón o entradas de texto, definen esa serie de componentes graficos que usara nuestra aplicación, todos estos componentes heredan de la clase view por lo tanto pueden ser creados directamente mediante código java, pero Android facilita este proceso haciéndolo por medio de los archivos xml, todos estos componentes deben estar en un View Group, en este caso los Layout.
Layout
Un layout define la estructura visual de mi aplicación, es un conjunto de vistas agrupadas de una forma determinada, indicando la manera en la que se pueden presentar los componentes gráficos de nuestra aplicación, también heredan de la clase View pero el uso ideal es mediante los xml.
Android brinda diferentes alternativas de layout, estos son:
- ConstraintLayout: Permite crear diseños complejos sin layouts anidados, este es el layout por defecto.
- LinearLayout: define agrupaciones en vertical u horizontal
- TableLayout: representación gráfica de una tabla, por filas y columnas, se usa el componente TableRow
- Gridlayout : Similar al TableLayout, sin embargo su uso no está restringido al uso de TableRow
- RelativeLayout: especifica dimensiones relativas para los componentes
- FrameLayout: Brinda una alternativa sencilla alineación de componentes.
- ScrollView: Permite usar un Scroll dependiendo de lo que queramos mostrar si hay contenido fuera de la pantalla
Los anteriores son los layout básicos que presenta Android sin embargo existen otros componentes de layout un poco más complejos que van ligados a otros componentes.
Unidades de Medida.
Dada la gran cantidad de dispositivos que utilizan Android como sistema operativo es necesario tener muy en cuenta las diferentes resoluciones de pantalla buscando que nuestra aplicación sea visualizada de la mejor manera sin importar el dispositivo en el que se encuentre instalada. En Android se tienen disponibles diferentes unidades de medida para brindan distintas alternativas para especificar el tamaño de un elemento dependiendo de la pantalla del dispositivo. Estas son : dp, sp, pt, px, mm, in
Los puntos, pixeles, milímetros y pulgadas tienen soporte en Android, sin embargo como ya se mencionó dada la gran cantidad de dispositivos el uso de estas unidades de medida no se recomienda, pues no brinda una solución genérica. Por lo anterior se recomienda usar en todo momento dp para los view pues es independiente de la resolución o tamaño de las pantallas, sin embargo para los textos debe usarse en todo momento sp pues brinda una mejor solución al momento de cambiar el tamaño del texto.
Clase R
La clase R es una clase generada de forma automatica al momento de construir el proyecto, usada para identificar dinámicamente los views utilizados, esta clase tiene en su interior constantes publicas equivalentes a los id que permiten identificar los views y así poderlos referenciar en las clases java o kotlin, es una clase auto gestionada y como se mencionó permite referenciar todos los recursos del proyecto, es decir, imágenes, archivos y también de todas las vistas de todas las pantallas a las que se les haya generado un identificador.
Archivo XML
Como se mencionó nos centraremos en los componentes gráficos asociados a los archivos XML, recordemos que al momento de crear un proyecto en Android Studio normalmente se crea una clase Kotlin con extensión .kt en este caso llamamos MainActivity2.kt encargada de gestionar la lógica del sistema y a su vez se crea un archivo xml llamado activity_main2.xml donde se creará la interfaz gráfica.
Veamos que en la clase MainActivity2.kt se hace referencia al archivo activity_main2.xml mediante el llamado a la clase R que se explicó anteriormente.
En el archivo .xml vemos que se usa un componente <androidx.constraintlayout.widget.ConstraintLayout este corresponde a uno de los diferentes gestores de contenido mencionados anteriormente, pero es importante tener claro que estos gestores de contenido o Layouts nos permiten administrar los componentes gráficos que vamos a utilizar en nuestra pantalla, por lo tanto en este layout se agregarán dichos componentes y a su vez por medio de un id se referenciarán hacia la clase .kt asociada, más adelante en otra entrada veremos esta y otras propiedades.
Y listo, hasta aquí esta entrada, en la próxima entrada revisaremos cuales son los componentes gráficos básicos que debemos conocer.
También te podría Interesar.
- Curso desarrollo de aplicaciones móviles Android con Kotlin
- Introducción desarrollo de aplicaciones móviles
- Tipos de aplicaciones móviles
- Instalación de Android Studio
- Creación Primer Proyecto Android
- Estructura de directorios en android
- Como emular app en dispositivo virtual.
- Como emular en dispositivo físico.
- Qué es el SDK en Android
- Que es el archivo Android Manifest
- Qué son las actividades y cual es su ciclo de vida
- Conceptos Básicos de Programación Orientada a Objetos.
¿Hay algo que quieras anexar o comentar sobre esta entrada? no dudes en hacerlo.....y si te gustó...... te invito a compartir y Suscribirte ingresando al botón "Participar en este sitio" para darte cuenta de mas entradas como esta ;)
No hay comentarios:
Publicar un comentario
Eres libre de realizar cualquier comentario, desde que pueda ayudar con gusto lo atenderé, y si es un critica, bienvenida sea!!!