Diseño de una aplicación usando componentes del UIKit para Storyboards

Clase 6 de 27 • Curso de Swift con Storyboards

David Campos

student•

Yo decidi hacer un layout en plan reproductor de musica :D

Alejandro Reyna

student•

Estoy haciendo este curso con storyboards para MacOS, usando Xcode 14.2 y Mac Ventura 13.2.

El background de la view no puede cambiarse y los bordes del botón tampoco, lo dejo cómo apunte por si alguien hace lo mismo que yo, antes de que pase media hora buscándolo.

Gera Meraki

student•

curiosamente encontre el “Hack” para hacerlo funcionar. Cuando seleccionas “custom color” en la primera opcion mueve el circulito y selecciona un color, el que tu quieras, veras que el background color cambia en el canvas. despues de eso ya te vas al rgb slider y ahi pones el hexadecimal del figma “#F0DCC0” y listo. Esta raro pero al parecer es un bug de xCode. .

Wilberto Torres Torres

student•

El Stack View tiene un parecido a Flexbox de CSS en la forma de distribuir los elementos en un contenedor

Hendrys Fabián Tobar-Muñoz

student•

Tal vez sea importante mencionar que la forma de añadir esa reglas para que se ajusten los elementos al tamaño del dispositivo, se llama AutoLayout, y que es definido como:

"Un sistema de diseño basado en restricciones (constraints), para construir interfaces de usuario de tamaño dinámico. Permite crear diseños de interfaz de usuario que se adaptan dinámicamente a todos los tamaños de pantalla sin necesidad de configurar manualmente el marco de cada vista."

Definición de Kodeco (Raywenderlich)

Maximiliano Ovando Ramírez

student•

Distribuciones de un StackView en UIKit

En UIKit, el StackView es un contenedor flexible que se utiliza para organizar y gestionar la disposición de múltiples vistas. Una de las características clave del StackView es su capacidad para distribuir las vistas contenidas dentro de él de diferentes maneras. A continuación, se presentan las cinco distribuciones disponibles:

1. Fill

La distribución Fill permite que las vistas dentro del StackView se expandan y llenen todo el espacio disponible horizontal o verticalmente, dependiendo de la dirección del StackView.

2. Fill Equally

La distribución Fill Equally distribuye el espacio disponible de manera uniforme entre todas las vistas contenidas en el StackView. Esto significa que todas las vistas tendrán el mismo ancho o alto, dependiendo de la dirección del StackView.

3. Fill Proportionally

La distribución Fill Proportionally asigna el espacio disponible a las vistas proporcionando un tamaño relativo basado en sus pesos. Puedes asignar un peso a cada vista, y el StackView ajustará su tamaño proporcionalmente de acuerdo con los pesos asignados.

4. Equal Spacing

La distribución Equal Spacing distribuye el espacio disponible entre las vistas de manera uniforme, pero no ajusta el tamaño de las vistas. Esto significa que todas las vistas mantendrán su tamaño original, pero el espacio entre ellas será igual.

5. Equal Centering

La distribución Equal Centering distribuye el espacio disponible entre las vistas de manera que el espacio entre cada par de vistas sea igual. Esto es útil cuando se desea que las vistas estén centradas horizontal o verticalmente dentro del StackView.

Estas son las cinco distribuciones disponibles en UIKit para un StackView. Cada una tiene sus propias características y se puede elegir según las necesidades de diseño de tu aplicación.

¡Espero que esta información sea útil! Si tienes alguna otra pregunta, no dudes en preguntar.

Luis Gilberto Sánchez amador

student•

No puedo hacer que el label del texto crezca automaticamente a 2 lineas

Edwin Mejia

student•

Hola.. Cuando doy click en stack view, el word wrap se pierde , como lopuedo solucionar

Gera Meraki

student•

Antes de ir a la siguiente clase, primero deben hacer esta y ya despues la que sigue,

Diseño de una aplicación usando componentes del UIKit para Storyboards

Primeros pasos en Swift

Bienvenida a los Storyboards de Swift

¿Qué es Swift?

Recursos necesarios para programar en Swift

Instalación de Xcode

Mi primera app en Swift

Configurar un proyecto desde cero en Xcode

Diseño de una aplicación usando componentes del UIKit para Storyboards

Importación de imágenes a los Storyboards

Stackviews y Constraints

Crear y utilizar íconos personalizados

Reto: replica la interfaz de calculadora del iPhone y muéstranos el resultado

Setup

Clonar el proyecto con la UI creada en Figma

Cambiar elementos de forma programática

Modelo Vista Controlador de nuestra app en Swift

Obtener las respuestas del usuario

Revisión de la Poke API y creación del modelo de datos

Consumo de la Poke API

Extender la funcionalidad del controlador

Lógica del juego

Generar números aleatorios

Image manager

Game model del juego

Validación de las respuestas del jugador

Score y reset del juego

Flujo de storyboards

Navegación entre vistas

Resultado final de nuestra app

Ejecución

Ejecución de Aplicaciones iOS en Dispositivos Físicos con Xcode

Despedida

Siguientes pasos en Swift