Introducción
Lo que aprenderás sobre el desarrollo de interfaces con iOS
Instalacion de Xcode desde 0
Introducción a Xcode
Primer Proyecto
Navigation Area
Editor, Util Area y Tool Bar
Targets y Target Tabs
Formas de crear vistas
Organizacion de Carpetas
Storyboards vs Xibs vs Codigo
Splash Screen
Completando nuestro Splash Screen
UIView Components
TabBar Controller y Mejores Prácticas
Storyboard Reference
Explicación breve de algunos elementos gráficos
Crear nuestra primera interfaz gráfica
Diferentes componentes y formas de autolayout
Agregando el resto de nuestros componentes usando constraints
Agregando Estilo a UIView Components
Agregando un icono a nuestra app
Custom colors
Agregando iconos a nuestros botones
Key paths de redondeo y sombra
Custom fonts
Scroll view controller
Tipos de vistas y manejo
OnBoarding View
Container ViewController
Container ViewController con código
ContainerViews
Adaptación de vistas
Tablas
Diseño de celdas
Completando nuestras vistas
Código para las tablas
Tamaños dinamicos para las celdas
EmptyState usando código
Agregar estilos a nuestro navigation view
Agregando estilos a nuestro Tab bar
Custom Tab bar button
Budget view
Iniciando el header de animacion
Animación de barra superior en las tablas usando constraints
Stats
Conclusiones
Reto final
Conclusiones
Bonus: Lottie
Gestión de dependencias
Instalación dependencias con Cocoapods
Instalación dependencias con Carthage
Cocoapods vs Carthage
Crear nuestro lottie file
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Para pulir un poco más nuestra interfaz vamos a redondear los botones para dejarlos parecidos a los de nuestro diseño original y vamos a crear también sombras.
Para redondear los bordes: Para hacer esto no tenemos una propiedad como tal, así que debemos ir al Show Identity Inspector y añadimos el keypath layer.cornerRadius con valor numérico.
Para agregar una sombra: Este procedimiento es un poco más complejo ya que las sombras de los layers usan un cgColor y para eso debemos crear una extensión por código.
Para ello creamos ciertos keypaths y el componente en código creando una extensión y habilitando allí el uso de cgColor.
Reto: Pon la sombra al botón de Google.
Aportes 17
Preguntas 4
Es normal que salga este error al añadir el key path de borderUIColor?
Failed to set (borderUIColor) user defined inspected property on (UIButton): [<UIButton 0x7fe6e4c10bc0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key borderUIColor.
Reto
Donde encuentro todos los KeyPath? para saber que puedo modifica y tiene alguna estructura?
Si por alguna razón les pasa como yo que no podian tener sombra y rendondeo al mismo tiempo, fijense que el Style del UIButton en el Storyboard sea Default o Plain 🥲
¡Hola! Súper buena la explicación pero tengo una duda. ¿el ¿BorderUIColor le cambia el color de la sombra? porque yo bajé el proyecto y en el mío y ambas aparecen con sombra negra
Así quedo el mio 😄
Mas sin embargo, sale esto en la consola:
2021-06-26 19:52:19.705908-0700 Platzi Finanzas[2989:292400] Failed to set (borderUIColor) user defined inspected property on (UIButton): [<UIButton 0x7fd36bf10ae0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key borderUIColor.
2021-06-26 19:52:19.706102-0700 Platzi Finanzas[2989:292400] Failed to set (borderUIColor) user defined inspected property on (UIButton): [<UIButton 0x7fd36bf0d070> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key borderUIColor.
Excelente tutorial!! Me gustaría consulta una cosa, porque creamos la extension sobre un UIView y no sobre un UIButton que es la clase del botón? Gracias
Excelente! 😄
La sombra se coloca en la parte arriba del boton, y tengo un error el cual comentar federicopalacio :c
Reto
He notado que es independiente del color el resultado de la sombra, es decir, hice una con el verde y cree otro color Todo negro para el botón de google, al escoger el color probe con ambos y me dieron un buen resultado para la sombra del botón de google, no daria lo mismo poner un color negro para todas las sombras ya que al parecer depende del color que lleve el botón? gracias
Hola, una consulta. La sombra se esta colocando sobre el icono de Google y no sobre el botón, alguien me puede ayudar? 🙏🏻
Es tan interesante saber esto, antes recuerdo que tenia que hacer una clase para poder redondear.
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.