En el vídeo de hoy te cuento cuáles son los conceptos más importantes que tienes que comprender cuando estás diseñando pantallas en Android.
Si en el vídeo anterior sobre activities veíamos que estas constan de una clase de código y en un layout, en este nos adentramos en ese apasionante mundo.
Verás las primeras reglas básicas de uso del diseñador, y cuáles son los diferentes tipos de Vistas y ViewGroups que puedes utilizar.
En particular hablaremos de:
- View
- TextView
- EditText
- Button
- FrameLayout
- LinearLayout
Te dejo aquí el vídeo. ¡Espero que lo disfrutes!
Curso de Android Completo con Kotlin
Repaso por las diferentes vistas
Lo primero que se debe tener en cuenta es que existen dos tipos de vistas principales:
- Las Views que son vistas únicas
- Los ViewGroups que son conjuntos de vistas.
Un ViewGroup se dedica a organizar un conjunto de vistas dentro de la pantalla de una forma estructurada, conforme a unas reglas que le asignemos. Lo que este hará será acumular ese conjunto de vistas, y a su vez, está formado por vistas que pueden ser Views como ViewGruops de esta forma podríamos tener una jerarquía de vistas, es decir, unas dentro de otras.
En el caso contrario una vista normal no puede tener vistas dentro de ella y por tanto solo sirve para representar un componente dentro de la pantalla. Podemos usar desde la vista más básica, que es desde la que extienden todas las demás y que se llama View. Podríamos añadir una View a nuestros Layouts y lo que tendríamos que hacer sería pintar absolutamente todo lo que queramos ver en pantalla, además de todas las interacciones que se van a hacer en ese componente.
Cabe resaltar que este comportamiento no es el habitual, lo habitual es que utilicemos vistas que se extienden de esta vista padre, que ya tienen creada la interacción y la parte visual por nosotros, por ejemplo:
- Si queremos pintar un texto, TextView.
- Si queremos pintar un botón, Button
- Si queremos mostrar una imagen, ImageView
Es decir, que tenemos una serie de componentes ya preparados que nos van a simplificar mucho la tarea de crear pantallas dentro de Android.
Por otro lado los Layouts nos van a permitir organizar esas vistas dentro de si mismos conforme a unas reglas, por ejemplo, si estamos creando un formulario con una serie de campos, donde el usuario puede introducir información y luego un botón final, para luego enviar esa información a algún sitio; podríamos utilizar un Layout que coloque cada uno de los campos y los botones uno debajo del otro sin necesidad de que tengamos que preocuparnos de como se colocan.
Hay Layouts sencillos donde solo podemos colocar las vistas en ciertas posiciones y algunos más complejos que nos permiten especificar relaciones entre las distintas vistas y que además nos van a permitir hacer interfaces mucho más complejas, sin embargo también son más difíciles de diseñar, por lo tanto para cada situación necesitaremos una solución u otra.
Ejemplo en pantalla
En el diseñador lo que podemos hacer es ir creando nuestra interfaz de usuario.
La interfaz estará formada en este apartado por un Layout que vendría hacer un ViewGroup.
Para cambiar este ConstraintLayout que tiene a su vez una vista adentro de tipo TextView vamos hacer click derecho sobre el elemento “ConstrainLayout” donde nos aparecerá un menú desplegable y seleccionaremos la opción “Convert View…”
FrameLayout
El cual nos mostrara una ventana con varias opciones y vamos a elegir FrameLayout ya que es uno de los mas sencillo de usar y la única forma de tenemos de organizar las vistas es mediante un atributo que se llama layout_gravity. Se hace uso de posiciones relativas ya que no podemos definir que un elemento tendrá una separación en pixeles u otra unidad de medida fija, ya que hay distintos tipos de dispositivos con diferentes resoluciones y al rotar también cambian.
Seleccionado el TextView y luego en la parte lateral derecha de nuestro Android Studio, hacemos click en Attributes y se nos desplegaran los atributos.
Luego nos dirigimos a la propiedad layout_gravity haciendo click sobre ella.
Nos desplegara todas las opciones disponibles para posicionar nuestro elemento en la pantalla
Elegiremos la opción “bottom” teniendo en cuenta que las podemos combinar, ejemplo: buttom y center_horizontal para mostrar nuestro TextView centrado al final de la pantalla. Este comportamiento se aplica para otros elementos como botones, imágenes, entre otros.
para que nuestro TextView se ponga al final de la pantalla.
LinearLayout
Este layout lo que hará es organizar nuestras vistas, una al lado de la otra, de izquierda a derecha como si se tratase de columnas con la orientación horizontal y con la orientación vertical pasarían hacer como filas.
Cambiaremos un poco el ejemplo anterior y los pasos ya se te harán familiares, convertiremos el FrameLayout en LinearLayout.
Ahora lo que tenemos que hacer es quitarle a nuestros elementos TextView y Bottom los atributos de layout_gravity para que queden por defecto y notaras que estos elementos se ponen uno al lado del otro.
Como siguiente paso agregaremos dos elementos más, uno de tipo E-mail y el otro de tipo Phone, arrastrando uno al lado del otro.
Por consiguiente haremos dos cosas primero eliminaremos nuestro TextView y pondremos nuestro botón al final.
Luego procederemos a poner nuestra vista de forma vertical para que los elementos estén uno encima del otro de arriba hacia abajo, lo haremos seleccionando primero nuestro LinearLayout, por consiguiente yendo a los atributos de este Layout y seleccionando Common Attributes>Orientation ya habremos cambiado nuestra orientación.
La pantalla al momento de hacer este cambio aparece de la siguiente manera.
Esto pasa porque hay unas propiedades que se agregaron a los elementos de tipo texto que son el E-mail y el Phone. Para quitar la propiedad solo tenemos que ir a los atributos de cada elemento y dejar en blanco el campo layout_weight.
Lo que queremos ahora es centrar nuestros elementos pero en vez de usar layout_gravity ya que identifica lo que hacen los componentes con respecto al ViewGroup, o sea Layout padre, lo que vamos hacer es el inverso; Vamos a utilizar el gravity del padre, para decirle todo el contenido que tengas dentro de mi mismo, colócalo en equis posición.
En las propiedades del LinearLayout ahora iremos a gravity y seleccionaremos center.
Cambiar valores a nuestros elementos
Una forma sencilla para el botón es ir a sus atributos y seleccionar el que dice text, ahí podemos cambiar el texto por defecto por “enviar” en este caso; para el texto de tipo E-mail y Phone vamos a los atributos y escribimos en el campo hint. Todos estos campos de texto son de tipo EditText.
Por ultimo vamos a ver tres atributos:
- layout_width: es el ancho del elemento y puede tener dos propiedades wrap_content y match_parent.
- layout_height: es el alto del elemento y puede tener dos propiedades wrap_content y match_parent.
- layout_weight: aquí repartimos la porción de espacio que cada elemento ocupara.
El wrap_content nos ocupara el espacio mínimo del elemento como ya hemos visto por defecto, esto se aplica tanto para el widht como el heigth.
El match_parent es el contrario del wrap_content ya que buscara ocupar todo el espacio disponible para el widht y el heigth.
En LinearLayout no es muy recomendable usarlo porque empujaría al resto de elementos fuera de la pantalla.
La ultima propiedad vista en este apartado es la del layout_weight que dependiendo del valor que se le de repartirá los espacios. Vamos a ver un ejemplo si le damos el valor de 1 y a otro elemento el valor de 3. Lo que sucederá es que se distribuyo al elemento con un mayor valor.
Conclusión
Hemos visto como funcionan las vistas y los ViewGroup en Android y como se relacionan entre ellos. Mi recomendación es prueba varias vistas e intenta agregarle elementos con un orden que consideres útil para tus futuros proyectos como DevExperto en Android.
