Como crear una imagen circular

Juan Gabriel Imagenes , , , , , , ,
0

Uno de los cambios que se introdujo por primera vez en iOS 9 fue el hacer uso de las imágenes circulares en lugar de cuadradas como había venido siendo usual. Hemos visto este tipo de imagenes o iconos en las apps de Contactos o incluso Whatsapp del iPhone. En este tutorial veremos de forma breve la clase CALayer y aprenderemos a crear una foto circular o una imagen con el borde redondeado con unas pocas líneas de código.

Puede que no hayas oído hablar jamás de la clase CALayer, pero sin duda alguna la has usado holgadamente muchas de las veces que has construido una app. Cada vista de UIKit (por ejemplo los objetos UIView o UIImageView) tiene asociada una instancia de la clase CALayer (es decir, un objeto llamado capa). El objeto de tipo capa está diseñado para manejar un respaldo para la visualización en la vista y gestionar todas las animaciones relacionadas con la misma. El objeto capa nos proporciona diversos atributos que se pueden asignar para controlar el contenido visual como por ejemplo:

  • El color de fondo
  • El borde y el ancho del borde
  • El tamaño de la sombra y el color de sombra
  • La opacidad
  • El radio de los bordes

Justamente el radio del borde es el atributo que utilizaremos para dibujar un borde circular y conseguir una imagen totalmente redonda.

Sin duda alguna la mejor forma de aprender como funciona la clase CALayer es programando, así que vamos a crear una imagen circular en una sencilla app.

El proyecto inicial

En primer lugar descargate esta plantilla del proyecto con la que empezar. Como podrás ver, contiene una imagen de perfil que ya se muestra en el centro de la pantalla de forma totalmente cuadrada. Compila de hecho el proyecto para comprobarlo. Es un proyecto realmente sencillo y no tiene mucho misterio. La única clase que hace falta que consultes es el ProfileViewController que se trata del controlador asociado a la única vista del storyboard.

Verás que también he vinculado la imagen de perfil (UIImageView) con la propiedad profileImageView del ProfileViewController.h.

Imagen cuadrada sin CALayer

Crear la imagen circular

Bien, veamos como cambiar el tamaño del radio del borde y convertir nuestra imagen de perfil en una imagen circular, let’s see how we can change the corner radius and turn the profile image into a circular image.

Abre el archivo ProfileViewController.m y añade las siguientes líneas de código dentro del método viewDidLoad:

Cada vista tiene una propiedad layer. La primera línea es para definir el radio del objeto capa (layer), instancia de la clase CALayer. Para que la imagen sea circular, a partir de una imagen cuadrada, el radio de la vista debería ser exactamente igual a la mitad de la achura (o altura) de la  UIImageView. Por ejemplo, si la anchura de la imagen cuadrada fueran 200 pixels, el radio debería ser de 50 pídeles. La segunda línea indica a la variable clipsToBounds tomar el valor YES para que la modificación aplicada a la capa funcione. Si ahora compilas tu app tendrás el resultado deseado con la foto de perfil en un bonito círculo.

Imagen circular con CALayer

¿Facilísimo verdad? Dos líneas de código y ya tenemos una imagen circular, mucho más estética y bonita que la cuadrada inicial. Vamos a hacerlo un poco más bonito añadiendo un pequeño borde a la imagen.

Añadir un borde a la imagen

Lo dicho, vamos a aplicar un borde a la imagen. Otra vez no nos llevará más de dos líneas de código más que vamos a añadir justo después de las dos anteriores que hemos escrito en el paso anterior.

El código anterior no solo es trivial, si no además auto explicativo. La primera línea define el borde de la imagen para que tenga una anchura exacta de 3 pixels, y la segunda de ellas define que el color del borde sea blanco. Si comics la app de nuevo verás el nuevo y fantástico resultado con un fantástico borde que hemos incorporado a nuestra imagen circular.

Imagen circular y con borde blanco con CALayer

Crear una imagen con el borde circular

Finalmente apliquemos  esta técnica a un caso más genérico y creemos una imagen con el borde circular. ¿Adivinas donde está el truco? En facto, basta con cambiar el valor del radio del borde a otros valores. Prueba por ejemplo a poner el valor 10,

y obtendrás un resultado como el siguiente.

Imagen con los bordes redondeados con CALayer
Imagen con los bordes redondeados con CALayer

Para tu referencia, puedes descargarte el proyecto completo en Xcode aquí. Si te ha gustado el tutorial, no dudes en comentarlo!

Nuevo contenido cada semana

Cada semana publicaremos uno o dos tutoriales para complementar los contenidos del Curso de Desarrollo de Apps para iOS 9 en Objective-C para ayudarte en tu aprendizaje. Poco a poco aprenderás a utilizar todas las funcionalidades de los dispositivos iOS, conectar con un servidor o incluso publicar tu idea real en el App Store

Accede al curso completo para

  • Aprende programación para iOS desde cero
  • Construye tu primera app para iPhone paso a paso
  • Descarga el código fuente para consultarlo en cualquier momento
  • Nuevo contenido adicional cada semana

¡Oferta limitada! ¡Consigue hasta un 75% de descuento!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Preparado para llevar tus habilidades de programación más allá?

Sí, ¡quiero unirme!