Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Videotutorial: Primeros pasos con CALayer

David Collado
  • Escrito por David Collado el 18 de Abril de 2017
  • 2 min de lectura | Mobile
Videotutorial: Primeros pasos con CALayer
El reproductor de video será cargado en breves instantes.

En esta ocasión vamos a dar los primeros pasos con CAlayer en Swift , las CAlayer es una propiedad dentro de las UIViews que gestiona los layers (capas) en cualquier proyecto para iOS, con los CALayer podremos redondear esquinas, añadir bordes, crear gradientes entre otras tantas opciones.

Vamos a ver algunos ejemplos prácticos con CALayer , lo primero que tenemos que hacer es crear una vista:

 
// Creamos una vista.
let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.backgroundColor = UIColor.blue

// Para acceder a la vista usamos
view.layer

Redondear esquinas

Con esta opción lo que conseguimos es redondear las esquina modificando su radio :


   view.layer.cornerRadius = 20 // Opción 1 redondea esquinas
 

Ahora vamos a ver como conseguir redondear una vista creando una circunferencia con el uso de los bounds de la vista.

Para ello, usamos el ancho que ocupa en pantalla y lo dividimos a la mitad:


   view.layer.cornerRadius = view.bounds.width * 0.5 // 
 

Con este último ejemplo de redondear esquinas,  lo que conseguimos es que las fotografías se "recorten" al no salir de la vista en forma de circunferencia.

   view.layer.maskToBounds = True

Ejemplo de redondear esquinas

Aquí podéis ver el resultado de los tres ejemplos:


Imagen 0 en Videotutorial: Primeros pasos con CALayer

Añadir borde

Después de ver como podemos redondear, ahora procedemos a añadir bordes a nuestro layer . Para ello definimos un color y el tamaño del grosor del borde.


	view.layer.borderColor = UIColor.red.cgColor
	view.layer.borderWidth = 8 // Usar número entero

Ejemplo de añadir borde

Aquí podéis ver el resultado del ejemplo

Imagen 1 en Videotutorial: Primeros pasos con CALayer

Añadir sombra

Añadir una sombra no tiene mucha dificultad , tenemos que definir el tamaño de la sombra con shadowRadius , con el shadowOpacity elegimos el nivel de transparencia del layer de 0 a 1 y por último con shadowOffset establecemos el sombreado, donde con width y height dirigiremos la sombra del layer donde nosotros queramos que se proyecte la sombra.

view.layer.shadowRadius = 4	// El radio de la sombra
view.layer.shadowOpacity = 0.5 // La opacidad de la sombra, siendo 1 100% opaco
view.layer.shadowOffset = CGSize(width: 0, height: 5) // Con Offset dirigimos la sombra

Ejemplo de sombra

Aunque en el ejemplo utilizado no se puede apreciar mucho, en las esquinas hay un pequeño sombreado.

Imagen 2 en Videotutorial: Primeros pasos con CALayer

Añadir degradados

Para terminar con esta introducción a los CALayers , vamos a conseguir el efecto de degradado en nuestra layer.

Para ello, primero utilizamos una sublcase creando una instancia nueva , definimos los colores del degradado, puedes tener tantos colores como quieras (En el ejemplo pasamos de amarillo a transparente).

Lo siguiente que definimos es el punto de inicio y fin del degradado . Hay que tener en cuenta que el 1 es el punto mas cercano a la derecha y el 0 es el más cercano a la izquierda. A continuación con frame estableceremos el punto de origen y el espacio que ocupará el frame en la vista, en el ejemplo ocuparemos todo el ancho y altura desde el centro.

Y por último, añadimos la subcapa en la vista que queremos trabajar el degradado.


	let gradientLayer = CAGradientLayer() // Creamos una instancia nueva
	gradientLayer.colors = [UIColor.yellow.cgColor.UIColor.clear.cgColor] // Establecemos los colores
	gradientLayer.startPont = CGPoint(x:0.5, y: 0) // Origen del degradiente
	gradientLayer.endPoint = CGPoint(x: 0.5, y: 1) // Fin del degradiente
	gradientLayer.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height) // Definimos tamaño y punto de origen del degradiente
	view.layer.addSublayer(gradientLayer) // Añadimos la subcapa

Ejemplo de degradado

Y para terminar, aquí tienes el resultado del código arriba explicado.

Imagen 3 en Videotutorial: Primeros pasos con CALayer


Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars