fbpx
 

Tutorial de Introducción a CALayer [Parte 2]

Tutorial de Introducción a CALayer [Parte 2]

1. Introducción

 

Esta semana en EfectoApple veremos la segunda parte del Tutorial sobre CALayer.

Hace justo 7 días vimos la primera parte de este Tutorial, donde repasamos algunos conceptos básicos sobre CALayer.

Si no has podido revisar ese artículo, te recomiendo que le eches un vistazo antes de continuar aquí.

Puedes acceder a la Primera Parte del Tutorial sobre CALayer desde aquí.

Una vez revisados los conceptos básicos de la primera parte continuemos con la segunda parte del Tutorial.

 

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

 

Esta parte del tutorial será totalmente práctico.

Vamos a ver 4 ejemplos, en los que aplicaremos a situaciones concretas de aplicaciones reales todo lo que podemos hacer con CALayer.

Podríamos desarrollar algunos ejemplos que no tengan nada que ver unos con otros pero puede ser bastante aburrido.

Por este motivo he elegido una temática común para todos ellos. Un personaje de cómic.

Los ejemplos de este tutorial estarán relacionados con Linterna Verde.

Estos son los 4 ejemplos que vamos a desarrollar:

  1. Utilizar lo que sabemos hacer con CALayer para crear un logo
  2. Como modificar el formato de un texto a través de CATextLayer
  3. Crear un fondo de pantalla utilizando un gradiente
  4. Desarrollar un Indicador de Carga personalizado

 

Comencemos entonces por el primero de ellos.

 

3. Creando un Logo con CALayer

 

Como primer ejemplo del tutorial sobre CALayer vamos a ver lo fácil que es crear un logo.

Siguiendo nuestra temática relacionada con Linterna Verde, crearemos el logo de dicho cómic.

Por si no conoces el aspecto del logo, aquí lo tienes:

 

0 CALayer logo

 

El símbolo central del logo lo obtendremos de una imagen, la cual encapsularemos dentro de un círculo de color blanco, con borde verde y con sombreado, todo realizado a través de CALayer.

Para comenzar con el desarrollo, descarga el Proyecto de Inicio de este primer ejemplo desde aquí.

Una vez descargado, descomprímelo y ábrelo con Xcode.

Si ejecutas la aplicación comprobarás que lo único que se muestra ahora mismo es un fondo de color verde.

Accede a ViewController.swift. Allí verás que hemos creado algunas constantes que necesitaremos para el desarrollo del ejemplo.

Además puedes ver que el método setupLayer() está vacío.

Vamos a rellenar ese método con el código que aprovechará CALayer para convertir nuestra imagen en el logo de Linterna Verde.

Primero vamos a ver el código completo del método y a continuación lo explicaremos.

Añade el siguiente código a tu proyecto:

Veamos, ahora paso a paso lo que hemos hecho.

//1. Asignamos al frame del CALayer el bounds de nuestra viewForLayer, para que trabajemos directamente en la posición de la View que tenemos creada en nuestro Storyboard

//2. Utilizamos la propiedad kCAGravityCenter para que el contenido de la CALayer se centre tanto horizontal como verticalmente.

//3. Especificamos el radio de la máscara circular que aplicamos a la imagen. También determinamos cual será el ancho del borde que usaremos en nuestro logo.

//4. Usaremos un color verde que hemos almacenado en la variable greenLanternColor y el color blanco para el fondo del logo. Ten en cuenta que no usamos UIColor sino CGColor. Podemos realizar la conversión fácilmente a través de la propiedad cgColor.

//5. Por último determinamos las propiedades del efecto de sombreado. Opacidad, Offset y Radio de sombreado.

 

Siempre que quieras aplicar una máscara circular a una imagen, deberás tener en cuenta que la propiedad cornerRadius debe ser justo la mitad del tamaño de la imagen

 

Si ejecutas ahora la aplicación, deberías obtener exactamente esto:

 

1 CALayer playing first example

 

Puedes descargar el proyecto correspondiente a este ejemplo directamente desde aquí.

 

4. Utilizando CATextLayer para Modificar Formatos

 

En el segundo ejemplo, vamos a ver como utilizar la clase CATextLayer, la cual hereda de CALayer.

Esta clase nos proporciona una representación de texto que nos permite manipular la fuente, tamaño, color, alineación, ajuste y truncamiento y otras muchas propiedades.

En este ejemplo veremos como crear un objeto de este tipo y modificar sus propiedades directamente por código.

Descarga el Proyecto de Inicio desde aquí.

Una vez descargado, descomprímelo y ábrelo con Xcode.

Accede a ViewController.swift.

Vamos a seguir el mismo proceso que en el ejemplo anterior. Rellenaremos el método setupLayer() y después veremos en que consiste el código.

Por tanto, añade lo siguiente a tu clase ViewController:

Hemos hecho lo siguiente:

//1. Creamos un objeto de tipo CATextLayer y le asignamos el bounds de la view de nuestro storyboard a su propiedad frame (Practicamente igual que lo que hicimos en el Ejemplo 1)

//2. Creamos una constante que almacene el texto y asignamos esa constante a la propiedad string del objeto textLayer.

//3. Creamos una constante que almacene la fuente que vamos a utilizar y se la asignamos a textLayer junto con el tamaño de fuente que hemos declarado al principio de la clase.

//4. Especificamos el color del texto y alineamos dicho texto a la izquierda. Además es obligatorio utilizar las propiedades isWrapped y contentScale para que no se produzca pixelación en las pantallas retina. Por último añadimos nuestro objeto CATextLayer como subcapa de nuestro objeto CALayer.

 

Ahora, si ejecutas el proyecto, verás como se muestra por pantalla, el texto que hemos especificado, con el tipo de fuente y color que hemos determinado en la aplicación.

 

2 CALayer playing second example

 

Puedes descargar el proyecto correspondiente a este ejemplo directamente desde aquí.

 

5. Diseñando un Fondo de Pantalla Gradiente

 

En bastantes ocasiones es probable que tengas que trabajar con gradientes en tus Proyectos iOS.

Lo normal suele ser que el Equipo de Diseño te pase una imagen de fondo con el gradiente creado, sin embargo hay otras muchas posibilidades en las que puede que seas tu quien tenga que crear este gradiente (Ya sabemos todos como funciona esto… 🙂 )

Podrías abrir tu aplicación de diseño preferida y crear un gradiente, sin embargo, como Desarrollador iOS que eres, ¿para qué diseñar cuando puedes programar?

En este ejemplo, veremos como puedes crear tus propios gradientes a través de la clase CAGradientLayer, que por supuesto, hereda de CALayer.

Como siempre, descarga el Proyecto de Inicio desde aquí.

Ábrelo con Xcode y accede a ViewController.swift.

Ya conoces, el proceso, rellenaremos el método setupLayer() y después veremos la explicación del método.

Añade esto a tu clase ViewController:

Como puedes ver, en este ejemplo, hemos añadido 2 métodos diferentes. El segundo es un método auxiliar que nos permite hacer que el código de setupLayer() sea mucho más limpio. Así que nos centraremos en el primer método:

//1. Creamos el objeto CAGradientLayer y le asignamos la propiedad bounds de nuestra view principal

//2. Especificamos los colores que van a formar parte del gradiente. Cuantos más colores añadamos y mas similares sean estos colores, mas suave será la transición del gradiente.

//3. Determinarmos cual será el punto inicial y el punto final del gradiente.

//4. Añadimos nuestro objeto CAGradientLayer a la layer de la view principal.

Una vez añadido esto, ejecuta el proyecto y verás el gradiente que acabamos de diseñar.

Si le añadiéramos el logo que vimos en el primer ejemplo, podría valer perfectamente como Splash Screen de nuestra aplicación sobre Linterna Verde.

 

3 CALayer playing third example

 

Puedes descargar el proyecto correspondiente a este ejemplo desde aquí.

 

6. Creando un Loading Personalizado

 

En el último ejemplo de este Tutorial, vamos a desarrollar un loading personalizado.

En cualquier aplicación que descargue datos desde un backend debemos mantener siempre informado al usuario durante ese proceso.

Para estos casos, Apple nos ofrece la clase UIActivityIndicatorView.

Nosotros en lugar de utilizar la solución ofrecida por Apple, vamos a crear un Indicador de Carga personalizado utilizando CAReplicatorLayer, que por supuesto, hereda de CALayer.

La creación de este indicador, consiste en representar un único elemento repitiéndolo varias veces, trazando una forma circular. Esta suele ser la base de cualquier indicador de carga.

Como en ocasiones anteriores, para comenzar descarga el Proyecto de Inicio desde aquí.

Una vez descargado, abre el proyecto en Xcode y accede a la clase ViewController.swift.

Vamos a añadir el siguiente código al método setupLayer():

Aquí tienes la explicación del código:

//1. Creamos una instancia de CAReplicatorLayer y a su propiedad frame le asignamos el bounds de nuestra viewForLayer.

//2. Especificamos el número de copias que vamos a hacer de nuestro elemento inicial, también determinamos el delay en la creación de cada una y el color de dicho elemento. Utilizando la propiedad presevesDepth además determinamos que la capa que estamos creando será en 2D.

//3. A través de una transformada, hacemos que las copias de nuestro elemento inicial se vayan creando de forma circular.

//4. Creamos el elemento inicial, que será la base de nuestro indicador y establecemos sus propiedades básicas.

//5. Utilizamos una animación para que dicho elemento vaya cambiando de opacidad y así de la sensación de movimiento.

//6. Inicializamos la opacidad de la capa a 0, para que se muestre transparente hasta que cada instancia sea dibujada y se le asigne su color y su propiedad alpha.

 

Al terminar, ejecuta la aplicación y verás como el indicador de carga funciona perfectamente.

 

CALayer example 4 working

 

Si quieres descargar el proyecto completo, puedes hacerlo desde aquí.

 

7. Conclusiones

 

Como has podido ver en esta serie de ejemplos, CALayer ofrece una gran cantidad de posibilidades.

Con unas pocas lineas de código hemos visto algunas operaciones comunes a las que tal vez hayas tenido que enfrentarte en algún proyecto.

La próxima vez que te encuentres ante estas situaciones, tal vez este Tutorial pueda ayudarte a solucionar cualquiera de estos problemas de forma sencilla.

 

8. Has terminado el Tutorial

 

Enhorabuena, has completado la segunda parte del Tutorial sobre CALayer.

Espero que alguno de estos ejemplos te sirva para desarrollar partes de tus futuros proyectos.

Como siempre, aquí tienes el video-chorra de esta semana.

 

 

9. ¿Donde ir ahora?

 

El lunes de la semana que viene continuaremos con un nuevo tutorial en EfectoApple.

Si quieres acceder a más contenido ahora mismo sin esperar a la semana que viene, visita la sección de Tutoriales, donde podrás revisar diferentes temas relacionados con el Desarrollo iOS.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Y como siempre, para cualquier duda, tienes los comentarios a tu disposición.

Recuerda, cada lunes un nuevo Tutorial sobre Desarrollo iOS.

Gracias por leer EfectoApple.

 

Etiquetas:
Sin comentarios

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.