Dibujo y Personalización de Íconos e Imágenes en Xcode

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:26

Dibujo y Personalización de Íconos e Imágenes en Xcode

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 4 de 23

Clase 4 / 23

Recursos

Explora el dibujado de íconos y a la personalización de imágenes en tus aplicaciones iOS en esta clase.

Para comenzar, debes tener un archivo en Xcode con el componente más básico, el texto "hello world". Vamos a transformar este texto en una imagen de sistema. Borra el texto y utiliza Image con el identificador de system name, que será un string. Por ejemplo, usa "star" para obtener un ícono de estrella. Estos identificadores vienen de la librería de símbolos de sistema de Xcode, accesible desde la esquina superior derecha donde está el icono de "+".

¿Cómo podemos modificar el tamaño y estilo del ícono?

Los íconos de sistema pueden ser tratados de manera similar al texto en cuanto a su tamaño y estilo. Para cambiar el tamaño, usa el modifier font. Configura, por ejemplo, font(.largeTitle) para aumentar el tamaño de tu ícono. Además, puedes personalizar el peso de la fuente usando .bold() para darle un aspecto más robusto.

Para darle color, aplica el foregroundColor modifier con el color que prefieras:

Image(systemName: "star")
    .font(.largeTitle)
    .bold()
    .foregroundColor(.yellow)

Este código generará una estrella amarilla, grande y negrita.

¿Cómo tratar el ícono como una imagen?

Si prefieres tratar tu ícono como una imagen, puedes usar el modifier resizable seguido de frame para establecer un nuevo ancho y alto. Por ejemplo:

Image(systemName: "star")
    .resizable()
    .frame(width: 100, height: 100)

Esto ajustará tu ícono a las dimensiones especificadas sin perder calidad.

Si deseas cambiar entre una estrella contorneada y una rellena, debes buscar el ícono adecuado en la librería, por ejemplo, "star.fill" para una estrella totalmente rellena:

Image(systemName: "star.fill")

¿Cómo cargar y personalizar imágenes propias?

Además de los íconos de sistema, SwiftUI permite usar imágenes personalizadas cargadas desde los assets. Puedes utilizar imágenes en formatos PNG, SVG, o PDF. Primero, ve a los assets en Xcode, haz clic en el botón "+" y selecciona Image Set. Luego, ajusta el scale al single scale si es necesario. Puedes arrastrar y soltar tu imagen desde el Finder directamente al Xcode.

¿Cómo ajustar las imágenes personalizadas?

Para incluir tu imagen en el ContentView, solo nómbrala como lo hiciste en los assets, por ejemplo, "logo". Si deseas ajustar su tamaño:

Image("logo")
    .resizable()
    .frame(width: 200, height: 200)

Si notas distorsiones, aplica el modifier aspectRatio con el contentMode adecuado:

fit: Ajusta la imagen dentro del frame.
fill: Rellena el espacio permitido, incluso si se sale del frame.

Para visualizar cómo el aspectRatio afecta tu imagen, añade un background colorido:

Image("logo")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 200, height: 200)
    .background(Color.gray)

Este código mantiene la relación de aspecto de la imagen sin cortes incómodos.

Atrévete a utilizar estos conocimientos, modifica tu botón de la clase pasada cambiando el texto por una imagen, y compártelo en los comentarios. ¡Nos vemos en la próxima lección para seguir explorando SwiftUI!