Del curso: Domina SwiftUI
Cómo adaptar el tamaño de una imagen en SwiftUI - Tutorial de SwiftUI
Del curso: Domina SwiftUI
Cómo adaptar el tamaño de una imagen en SwiftUI
Es tan sencillo mostrar una imagen de tus assets como indicar su nombre en el elemento Image. Voy a añadir una imagen a Assets, hacemos Import y voy a añadir esta imagen llamada relax. Y creamos en ContentView un elemento Image al que le indicamos el nombre de la imagen, que era «relax», para mostrar esta imagen. Por defecto, esta opción no se ajusta a la pantalla. Vamos a ver qué opciones tenemos para adaptar el tamaño de las imágenes. En primer lugar, voy a añadir resizable para ajustarnos al espacio disponible. Y si quieres mantener las proporciones, puedes usar scaledToFit. En este primer elemento de imagen, lo que hemos hecho es ajustar la imagen al tamaño disponible manteniendo sus proporciones. Voy a ponerlo en un comentario; «Ajustar imagen al tamaño disponible manteniendo sus proporciones». Podemos también darle un tamaño fijo a nuestra imagen, «2-> tamaño fijo» utilizando frame. Vamos a hacer Image, relax, resizable, y usamos frame para darle ese tamaño fijo. Por ejemplo, voy a ponerle un width «80», height, «80» también. La imagen se deforma porque no estamos respetando sus proporciones al añadirle el tamaño. Podemos añadir scaledToFit, y después indicarle un valor para el ancho. Hacemos frame(width: «200») y, antes de ello, hacemos scaledToFit. De esta manera, tenemos un ancho fijo, pero le dejas que mantenga sus proporciones con el alto. «Mantenemos proporciones con ancho fijo». Podemos mantener las proporciones, pero de manera diferente con scaledToFill. Voy a comentar las demás imágenes. Voy a copiarme esto de aquí, comentar el resto de imágenes y así tenemos todo el espacio disponible y podemos ver bien qué hace este modificador. Así que vamos a añadirlo a nuestra imagen visible. .scaledToFill. Estamos llenando todo el espacio disponible y lo que pasa es que la imagen se sale de la pantalla, no vemos lo que no cabe. Voy a darle un tamaño fijo con frame. Vamos a darle de ancho «200» y de alto también «200». Aquí pasa algo diferente. Si le ponemos un border a Image, voy a ponerle un border azul, vemos que el marco de la imagen es cuadrado y la imagen excede este marco. Tenemos que recortar manualmente lo que sale del marco con clipped. Hacemos .clipped y obtenemos esta imagen recortada. Este es nuestro cuarto caso con un tamaño fijo. Hemos usado fill y hemos realizado un recorte. Voy a quitar los comentarios a las imágenes para ver todas las opciones en la preview y ya hemos acabado este repaso sobre las imágenes y su tamaño. Ahora te toca hacer tus pruebas y, cualquier cosa, estoy disponible para tus dudas o comentarios.
Practica mientras aprendes con los archivos de ejercicios.
Descarga los archivos que el instructor utiliza para enseñar el curso. Sigue las instrucciones y aprende viendo, escuchando y practicando.
Contenido
-
-
-
-
(Bloqueado)
Utilizando el elemento Spacer()3 min 35 s
-
(Bloqueado)
Cómo formatear un texto dentro de un Text()5 min 17 s
-
(Bloqueado)
Cómo añadir una imagen diferente según el esquema de color (dark/light)3 min 40 s
-
Cómo adaptar el tamaño de una imagen en SwiftUI4 min 22 s
-
(Bloqueado)
Cómo cargar una imagen de una URL1 min 56 s
-
(Bloqueado)
Cómo añadir una lista de elementos4 min 2 s
-
(Bloqueado)
Cómo extraer una vista para refactorizar código1 min 42 s
-
(Bloqueado)
Cómo hacer vistas que reciban parámetros2 min 7 s
-
(Bloqueado)
Añadir padding a un elemento2 min 15 s
-
(Bloqueado)
Formas disponibles en SwiftUI3 min 22 s
-
(Bloqueado)
Cómo añadir y usar los colores5 min 9 s
-
(Bloqueado)
Atención al orden de los modificadores3 min 49 s
-
(Bloqueado)
Cambiar el estado de una vista usando un botón1 min 59 s
-
(Bloqueado)
Cómo crear un botón con estilo, texto e icono2 min 23 s
-
Qué es una propiedad @Binding en SwiftUI3 min 35 s
-
(Bloqueado)
Cómo poblar una lista por categorías3 min 38 s
-
(Bloqueado)
Cómo crear una lista con varias columnas4 min 40 s
-
(Bloqueado)
Cómo crear visualmente una tabla para que se visualice en iPhone4 min 11 s
-
(Bloqueado)
Usando los gestos en SwiftUI6 min 18 s
-
(Bloqueado)
¿Y sí hay un cambio en los datos de un modelo?4 min 48 s
-
(Bloqueado)
Datos compartidos entre vistas con @EnvironmentObject5 min 38 s
-
(Bloqueado)
@Environment vs @EnvironmentObject4 min 25 s
-
(Bloqueado)
Cómo mostrar un texto junto a un icono gracias al elemento Label3 min 24 s
-
Cómo crear un interruptor switch3 min 57 s
-
(Bloqueado)
Cómo crear un estilo propio para un botón3 min
-
(Bloqueado)
Usar un picker y acceder al valor seleccionado6 min 21 s
-
(Bloqueado)
Cómo hacer un picker de fechas en SwiftUI4 min 10 s
-
(Bloqueado)
Contraseñas con campos de texto seguros2 min 2 s
-
(Bloqueado)
Un campo de texto que solo reciba números6 min 26 s
-
(Bloqueado)
Añadir los mismos modificadores a un grupo de elementos2 min 36 s
-
(Bloqueado)