Hola a todos, mi nombre es Oleg Chernyshenko. En este video, estoy creando una interfaz
de usuario de una aplicación iOS en código. En esta imagen puedes ver la estructura de
nuestra futura aplicación. Tiene tres UILabels, que muestran la
temperatura actual, el nombre de la ciudad y las condiciones meteorológicas. También tiene dos botones en la parte inferior. El izquierdo para cambiar a grados Celsius,
el derecho para mostrar la temperatura en Fahrenheit. Además, tiene un ícono que muestra las
condiciones climáticas actuales. Estoy comenzando con la plantilla que creé
en un video anterior, donde ya eliminé el guión gráfico principal e inicialicé ViewController
en AppDelegate. Permítanme cambiar el nombre del controlador de vista. Quiero llamarlo WeatherViewController. Después, agregaré una nueva clase, llamada WeatherView.
En esta clase, definiremos todas las subvistas
de la pantalla actual. Vamos a subclasificar la
vista raíz de ViewController. Debido a que no hay forma de cambiar la vista propia real
de un ViewController, utilizo un enfoque sugerido por Nate Cook. En este enfoque, queremos crear una nueva
propiedad computada, llamada mainView que devolverá la versión encasillada de self.view. La vista en sí se inicializa en el
método loadView. Como marco, estoy usando los límites de la pantalla. Volvamos a la clase WeatherView en sí. Quiero agregar un método que se usará para
configurar todas las subvistas. Cuando se llame desde init(), todas las
subvistas se agregarán de inmediato.
Quiero dividir el proceso de configuración en dos. Primero, configure las vistas, luego agregue las restricciones
a estas vistas. Ahora, cuando tengamos el plano, agreguemos las
vistas. Guardé el archivo y vemos que falta el
inicializador requerido. Arreglemos esto. Para crear vistas, uso fragmentos que creé de antemano. Todas las vistas se crean con un marco que tiene
un área cero porque más adelante se les dará forma mediante restricciones. Quiero usar un UIStackView como contenedor principal. UIStackView permite posicionar todas sus subvistas
ordenadamente con un mínimo esfuerzo. Puede ver algunos ajustes iniciales mínimos
aquí. El eje es vertical para diseñar todas las subvistas de
arriba a abajo. La distribución se establece en espacios iguales para organizar
todas las subvistas futuras sin estirarlas.
Ahora estoy agregando las etiquetas con un
texto predeterminado. Más tarde, todos los textos se cambiarán desde el
controlador de vista, pero ahora necesitamos algo para ver el resultado. Para agregar el símbolo de "grado"
, presiono la combinación Control, Comando, Espacio para abrir el Visor de caracteres y buscar el
símbolo especial. Ahora estoy agregando los botones. Voy a especificar el título para que coincida con
el diseño. Estos dos botones deben colocarse en una fila. Para lograr esto en Stack View, debemos
colocarlos en otro UIStackView. Esta vez estoy cambiando el eje a horizontal. Cuando todas las vistas se describen en el código, podemos
comenzar a agregarlas. Todas las vistas se organizarán en el orden en
que las agregamos.
Entonces, la primera debería ser la vista de fondo,
luego la vista de la pila principal. Es importante usar el método llamado addArrangedSubviews
para llenar la vista de pila en lugar de addSubview normal. Este método agrega automáticamente la
vista proporcionada como una subvista de la vista de pila. También hace algo de magia StackViewy, como animaciones,
en el camino. Cuando se agregan todas las vistas, podemos comenzar a agregar
restricciones. Con Auto Layout, siempre uso métodos auxiliares adicionales
que me permiten reducir significativamente la cantidad de código escrito.
Voy a agregar dicho método como una extensión
para demostrar la idea. Estoy creando una extensión de UIView en la que
estoy agregando el método pinEdges. Conectará los bordes de una vista con los
bordes correspondientes de otra vista. Ahora podemos llamar a este método en cualquier
instancia de UIView. Fijemos la pila principal y la
vista de fondo a la vista principal para que cubran toda la pantalla. Si construimos la aplicación ahora, veremos que las
vistas se agregan pero su diseño está bastante mal.
Voy a añadir algo de estilo. Uso los valores proporcionados en el archivo Sketch
donde se creó el diseño. Hagamos lo mismo con los botones. Estoy construyendo de nuevo y podemos ver que la
etiqueta de temperatura se ve mejor. Ahora puedo ver que olvidé agregar el
nombre de la ciudad y las etiquetas de condiciones climáticas. El último elemento que debo agregar es una
vista de imagen que muestre el ícono del clima actual. Tengo la obra de arte exportada desde Sketch. Todo lo que necesito hacer es arrastrarlo a la
biblioteca de activos. Otra forma de agregar las constantes es directamente
dentro del cierre donde se crea la vista. Quiero agregar restricciones para que el tamaño
de la vista sea el mismo que el tamaño de la imagen importada. Agregar imageView a la vista de pila principal. Quiero que esté en la parte superior de la pantalla, así que
agréguelo primero. Pegar las etiquetas donde quiero que estén. Lo último que olvidé es cambiar el color
de la vista de fondo.
Construyamos.. Y vemos que no es exactamente lo que
esperábamos. Todas las vistas están ahí, en el orden correcto, pero los
tamaños y las posiciones están desactivados. Para colocarlos correctamente, necesitaremos agregar
restricciones adicionales y ajustar un poco las vistas de la pila. En el próximo video, profundizaré en
el diseño automático y haré que la vista del clima se vea como debería. Espero que hayas disfrutado el video. Por favor, dale me gusta y suscríbete..