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.

Contenido