fbpx
 

Tutorial de Introducción a UIStackView

Tutorial de Introducción a UIStackView

1. Introducción

En el tutorial de esta semana en EfectoApple vamos a hablar de UIStackView.

Hemos visto en tutoriales anteriores como trabajar con Auto Layout cuando desarrollamos nuestras aplicaciones iOS. De hecho, aquí tienes una lista de los tutoriales más recientes sobre este tema:

[caja-gris]

TUTORIALES DE LA SERIE AUTO LAYOUT & CONSTRAINTS

Introducción a Auto Layout [Parte 1]

Introducción a Auto Layout [Parte 2]

Introducción a Auto Layout [Parte 3]

Domina Auto Layout como un experto [Parte 1]

Domina Auto Layout como un experto [Parte 2][/caja-gris]

Aunque tengas bastante experiencia utilizando Auto Layout, seguro que más de una vez has tenido problemas para hacer que la interfaz de una aplicación quedara exactamente como querías.

Hoy no vamos a hablar de Auto Layout aunque si vamos a ver un tipo de view, que Apple introdujo en iOS 9 y que puede ayudarte a desarrollar cualquier interfaz de forma sencilla: UIStackView.

2. ¿Qué vamos a ver en este tutorial?

En el tutorial de esta semana vamos a desarrollar una app completa utilizando la clase UIStackView.

Crearemos una aplicación donde se mostrarán los emblemas de algunas de las casas aparecidas en el Universo de Juego de Tronos. Además mostraremos en la parte inferior dos labels y dos buttons que carecerán de funcionalidad y únicamente se usarán para demostrar las diferentes formas de trabajar con UIStackViews.

Cuando lo hayas terminado, tu aplicación tendrá este aspecto:uistackview final appNota Legal: Game of Thrones es es una marca registrada de HOME BOX OFFICE, INC. El uso de su marca en este Tutorial obedece únicamente a propósitos didácticos.

Si te fijas en la interfaz, podría parecer que tenemos 9 imágenes formando el conjunto de las casas de Juego de Tronos. En realidad no son 9 imágenes sino 3. Vamos a utilizar 3 imágenes, ya que cada imagen agrupa a 3 casas. Para que te hagas una idea, esta sería la primera imagen:

 

uistackview got houses

 

¿Por qué vamos a utilizar 3 imágenes en lugar de 9 como sería lo normal?

Para poder utilizar las 9 imágenes en nuestra interfaz habría que complicar demasiado este tutorial. Considero que sería excesivo para un Tutorial de Introducción.

Aun así no te preocupes, ya que es muy probable que desarrolle otro Tutorial donde crearemos una aplicación con una interfaz más compleja utilizando UIStackViews.

Por ahora, el desarrollar esta aplicación te permitirá ver las ventajas que ofrecen las UIStackViews a la hora de crear cualquier interfaz de este tipo.

Podríamos crear esta aplicación sin utilizar ninguna UIStackView. Sin embargo, como vas a ver a continuación, utilizándolas podremos desarrollar la app completa sin tener que escribir ni una sola linea de código. Nos vamos a enfocar al 100% en el uso de Interface Builder para desarrollar nuestra interfaz.

3. ¿En qué consisten las UIStackViews?

¿Para que sirve una UIStackView?

Una UIStackView es una subclase de UIView, cuya función principal es la de actuar como contenedor de otras views. Gracias a esta clase podemos agrupar fácilmente varios elementos de nuestra interfaz. Además, las views que añadas a la stack view no necesitarán constraints. Es la propia stack view la que se encarga de posicionar las views y definir automáticamente las constraints por ti. ¿No es genial? Podrás diseñar partes completas de interfaces sin tener que añadir constraints en los elementos que vayas utilizando.

No me malinterpretes, esto no quiere decir que puedas olvidarte por completo del Auto Layout. Todavía tendrás que definir las constraints para las stack views que utilices en tus interfaces. Aun así es una gran ventaja.

Imagina que necesitas crear una interfaz que contenga 12 views diferentes (Unas cuantas UILabel, algún UIButton, alguna UIView…). Si utilizas una UIStackView que contenga esas 12 views, no tendrás que crear las constraints para cada una de las 12 views, ya que la UIStackView se encarga de gestionarlas automáticamente. Supone un gran ahorro de tiempo.

Propiedades de las UIStackViews

Las propiedades de una UIStackView con las que tendrás que trabajar son fundamentalmente cuatro:

Axis

La propiedad Axis determina si las views contenidas en la UIStackView deben colocarse en posición Vertical u Horizontal

Distribution

La propiedad Distribution define el tamaño y posición de las views contenidas en la UIStackView. Por defecto toma el valor Fill, lo que significa que cada una de las views contenidas ocupan todo el espacio disponible en la UIStackView.

Alignment

La propiedad Alignment especifica como se alinearán las views contenidas en la UIStackView. Si quisiéramos que las imágenes aparecieran centradas en nuestra UIStackView, utilizaríamos la opción: Center.

Spacing

Por último la propiedad Spacing te permite especificar el espacio que habrá entre las views.

¿Cómo añadir una UIStackView a nuestros proyectos?

También debes saber que Xcode te permite utilizar una UIStackView en tu proyecto de dos formas diferentes:

  1. Arrastrando una UIStackView (horizontal ó vertical) directamente a tu storyboard. Después podrás arrastrar y soltar labels, buttons, imageViews o cualquier otro tipo de view dentro de la UIStackView.
  2. Utilizando la opción Stack situada en la barra de Auto Layout. Para hacerlo de esta forma, deberás seleccionar dos o más views y después pulsar en el botón Stack. Interface Builder incorporará las views dentro de la UIStackView y la redimensionará automáticamente.

Explicado de esta forma es probable que no seas capaz de visualizar ambos métodos. No te preocupes, en este tutorial utilizaremos ambos, así podrás elegir el que más te convenga.

4. El Proyecto de Inicio

Para evitarte perder el tiempo creando un proyecto desde cero, en el que tendrías que añadir las imágenes que vamos a utilizar, he desarrollado un Proyecto de Inicio que puedes descargar desde aquí. Es un proyecto muy simple. Unicamente consiste en un navigation controller y las imágenes que vamos a utilizar en la app.

5. Añadiendo nuestra UIStackView desde Interface Builder

Una vez que hayas descargado el proyecto, ábrelo y accede al Main.storyboard. Desde la librería de objetos, arrastra una UIStackView vertical al view controller que tiene el título en la parte superior: Juego de Tronos. Como has podido ver, puedes añadir dos tipos de UIStackView, vertical y horizontal. Cada una posicionará las views en un eje diferente. En nuestro caso elegimos la vertical porque queremos que nuestra interfaz muestre las imágenes de forma vertical.

uistackview-anadiendo-uistackview

 

Una vez que hemos añadido la UIStackView lo que haremos será especificar las dimensiones que queremos que tenga, utilizando para ello algunas constraints.

Recuerda lo que hemos dicho antes. Usar UIStackViews hace que no tengas que añadir las constraints para todos los elementos de la interfaz. Sin embargo, si que es necesario que especifiques las constraints de la propia UIStackView. Para nuestra UIStackView definiremos las siguientes constraints:

  • Margen Superior: 10
  • Margen Derecho: 10
  • Margen Izquierdo: 10
  • Height: 70% de la height de su superview

Primero añadiremos las constraints de posición (Las 3 primeras). Para añadirlas, selecciona la UIStackView, haz clic en el botón Pin de la barra de Auto Layout y añade las 3 constraints de posición:

uistackview adding position constraints

 

Antes de añadir constraints es mejor que desactives siempre la opción “Constrain to margins“.

Como podrás ver, en cuanto añadas estas constraints, aparecerán en tu view controller, avisos de que algo está fallando. Podemos distinguir dos avisos diferentes:

  • De color naranja (Warnings): Se producen porque nuestra UIStackView se encuentra en una posición diferente a la que hemos establecido en las constraints.
  • De color rojo (Errores): Se produce porque falta añadir una constraint a la UIStackView (Height).

Vamos a solucionar primero nuestro Error.

Para añadir la constraint de tamaño (Height), desde el Document Outline arrastra con la tecla Ctrl pulsada desde la UIStackView hasta la view principal. Al soltar justo encima de la view principal selecciona “Equal Heights”.

uistackview-delete-xcode-error

 

Como puedes ver, nuestro error (En color rojo) desaparece.

Esto hará que el height de nuestra UIStackView sea igual al height de la view. Sin embargo, lo que queremos es que el height de nuestra UIStackView ocupe solo el 70% del height de nuestra view. Para ello selecciona la constraint “Stack View.Height” y a través del Inspector de Atributos cambia el valor del Multiplier de 1.0 a 0.7.

 

uistackview add 0-7 constraint

 

De esta forma, nuestra UIStackView tendrá un height del 70% de nuestra view, que es lo que queríamos.

En nuestro storyboard seguimos teniendo el warning que nos indica que la posición actual de la UIStackView no coincide con las constraints. Para solucionarlo, haz clic en el warning (Flecha amarilla) que aparece en el Document Outline, después pulsa en el triángulo amarillo que verás a continuación, selecciona la opción “Update frames” y pulsa en el botón Fix Misplacement.

 

uistackview delete warning

 

Verás como la UIStackView automáticamente adopta la posición y el tamaño que queríamos.

6. Configurando las Propiedades de nuestra UIStackView

Una vez que hemos añadido y configurado el tamaño y posición de nuestra UIStackView, podremos configurar su apariencia a través de sus propiedades.

Estas son las propiedades de nuestra UIStackView y los valores que toma por defecto al añadirla a nuestra interfaz:

uistackview properties

La propiedad Axis determina si las views contenidas deben colocarse en posición vertical u horizontal. En nuestro caso, buscamos que las imágenes se coloquen verticalmente, por lo que dejaremos esta opción como Vertical.

La propiedad Alignment especifica como se alinearán las views contenidas en la UIStackView. Como queremos que las imágenes ocupen todo el espacio de la UIStackView dejaremos esta opción como Fill.

La propiedad Distribution define el tamaño y posición de las views contenidas. Por defecto toma el valor Fill, lo que significa que cada una de las views contenidas ocupan todo el espacio disponible en la UIStackView. No queremos eso, lo que queremos es que cada una de nuestras image views ocupen el mismo espacio que las demás, así que cambiaremos la opción a Fill Equally.

Por último la propiedad Spacing te permite establecer el espacio entre las views. En nuestro caso no queremos añadir espacio entre las views, así que puedes dejar su valor en 0.

Estos deberían ser los valores finales para tu UIStackView:

uistackview properties final

7. Añadiendo las image views a nuestra UIStackView

Nuestro siguiente paso será añadir las imágenes a la UIStackView. Para ello, arrastra una image view de la librería de objetos hasta la UIStackView. En cuanto la añadas, verás como la image view se redimensiona automáticamente. Repite esta operación y añade dos image views más. Aquí es donde puedes ver la utilidad de la UIStackView. En cuanto vas añadiendo más views, éstas se van colocando automáticamente en posición vertical, ocupando exactamente el mismo espacio unas que otras y definiendo sus constraints sin que tengas que hacer nada más.

uistackview adding 3 image views

8. Enlazando las imágenes de nuestra aplicación

Una vez que hemos añadido nuestras image views, tendremos que especificar que imágenes vamos a mostrar en cada una de ellas.

Selecciona la primera image view y desde el Inspector de Atributos escribe en su propiedad Image: houses1.

uistackview setting houses1

 

Repite este proceso para el resto de image views, eligiendo las imágenes houses2 y houses3.

El aspecto de tu interfaz debería ser este:

uistackview added 3 images

 

Ahora ejecuta la aplicación y comprueba que se muestra perfectamente en los diferentes simuladores de Xcode. Nuestra UIStackView especifica las constraints por nosotros.

9. Añadiendo más elementos a nuestra aplicación

Acabas de ver como podemos añadir image views a nuestra UIStackView. Pero como hemos comentado al principio del tutorial, podemos añadir cualquier tipo de view.

Lo que vamos a hacer a continuación es añadir dos labels y dos buttons a nuestra interfaz.

Para ello, desde la Librería de Objetos de Interface Builder arrastra un label a la view. OJO: Date cuenta que he dicho a la view, no a la UIStackView. Ahora verás por qué. Escribe en la label “Casas Principales” y colócala justo debajo de la UIStackView. Haz la label un poco más grande, cambiando su fuente a 26 puntos. Después arrastra otra label justo debajo de la anterior y escribe “Vota tu Favorita“. En las opciones de formato de esta label selecciona Bold, para que el texto aparezca en negrita.

Si recuerdas, al comienzo del tutorial dijimos que existían dos formas de utilizar las UIStackViews. Ya hemos visto como añadir elementos a una UIStackView arrastrándolos directamente dentro de ella. Ahora veremos como podemos añadirlos a través del botón Stack.

Dejando la tecla cmd pulsada haz clic en ambas labels. Una vez que estén seleccionadas las dos, pulsa en el botón Stack, situado en la barra de Layout. Interface Builder automáticamente añadirá las labels dentro de una UIStackView vertical.

uistackview adding labels with button stack

 

A continuación añade dos buttons a la view. Colócalos en la parte inferior uno junto al otro. Escribe en el primero “Votar” y en el segundo “Compartir“. Vamos a añadir estos dos buttons a otra UIStackView, así que repite el proceso anterior. Selecciona ambos con la tecla cmd pulsada y haz clic en el botón Stack. Como ves, ambos han sido añadidos a una UIStackView horizontal. Añade un espacio de 5 puntos entre ellos a través de la propiedad Spacing.

 

uistackview added buttons to horizontal stack

 

Antes hemos comentado que las UIStackViews pueden anidarse unas dentro de otras. Este es otro de los puntos fuertes de las UIStackViews. Te permiten contener unas dentro de otras para conseguir la interfaz que buscas. Vamos a verlo con un ejemplo. Vamos a añadir la UIStackView que contiene los buttons y la UIStackView que contiene las labels dentro de una nueva UIStackView.

Para ello selecciona las dos UIStackViews dejando la tecla cmd pulsada y haz clic en el botón Stack. Verás como se crea una nueva UIStackView que envuelve a ambas UIStackViews.

uistackview adding uistackview inside other uistackview

 

Los buttons deben estar alineados por su parte inferior con la label, así que selecciona la UIStackView y cambia su propiedad Alignment de Fill a First Baseline. Además cambia la propiedad Spacing a 20 para que haya algo de distancia entre la label y los buttons.

Como puedes ver, solo hemos tenido que utilizar UIStackViews anidadas para diseñar de forma exacta nuestra interfaz.

Para terminar, tendremos que especificar las constraints entre la UIStackView que contiene las image views y la UIStackView que contiene los buttons y los labels. Selecciona la UIStackView que contiene los buttons y labels y a través del botón Pin añade las siguientes constraints:

  • Margen superior: 8 puntos
  • Margen izquierdo: 0 puntos
  • Margen derecho: 0 puntos

 

stack view adding constraints xcode

 

¡Perfecto! Has terminado el diseño de la interfaz de nuestra aplicación. Ahora ejecuta el proyecto y échale un vistazo al resultado final. Si has seguido paso a paso el tutorial, el aspecto de tu aplicación debería ser el siguiente:uistackview final app

10. Resumen Final

En este Tutorial de Introducción a UIStackView hemos visto los siguientes puntos:

  • ¿Qué son las UIStackViews?
  • ¿Qué propiedades debes controlar para configurar una UIStackView?
  • Dos formas diferentes de añadir UIStackViews a tus proyectos
  • ¿Cómo añadir views a una UIStackView?
  • ¿Cómo anidar UIStackViews unas dentro de otras?
  • Ventajas que te ofrecen las UIStackViews en el diseño de tus interfaces

11. Descarga el Proyecto

10AppsBanner

 

Consigue el proyecto completo y muchos más con el Pack de Aplicaciones de EfectoApple que puedes descargar totalmente gratis desde aquí.

12. Has terminado el Tutorial

Has acabado el tutorial de esta semana en EfectoApple.

Como siempre, aquí tienes tu recompensa en forma de video-chorra:
[ejercicio titulo = “El escalador” num=”1″]

[/ejercicio]

13. ¿Donde ir ahora?

Puedes acceder a más tutoriales disponibles en EfectoApple desde aquí.

Si este artículo te ha parecido útil, me harías un gran favor si utilizaras 10 segundos de tu tiempo en compartirlo en tus redes sociales. Te lo pongo fácil con los botones de la izquierda 😉

Y como siempre, para cualquier duda, tienes los comentarios a tu disposición. Yo te ayudaré con todo lo que pueda.

Gracias por leer EfectoApple.

Etiquetas:
2 Comentarios
  • Rafael
    Publicado a las 01:51h, 26 agosto Responder

    Buen contenido y en español

    • Luis R
      Publicado a las 13:51h, 28 agosto Responder

      Muchas gracias Rafael!

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.