Publicado el Deja un comentario

Image SwiftUI

tutorial image SwiftUI

Sigo con los tutoriales de aplicaciones para dispositivos iOS, en este ejemplo con SwiftUI trabajaremos con una imagen que se cargará en nuestra app y jugaremos un poco con su forma, tamaño y estilo. Image con Swift UI es actualmente lo que era hace ya bastantes años el tratamiento de imágenes con UIKit Image.

Seguimos viendo las grandes diferencias que existen trabajando con la interface SwiftUI y lo que nos facilitar en todo momento del desarrollo de nuestras apps nativas para iOS en Swift.

Comenzamos con el tutorial Image SwiftUI y lo primero que vamos a hacer es crear un nuevo proyecto, al que le vamos a indicar principalmente dos cosas:

  • Interface: SwiftUI.
  • Lenguaje: Swift.

Si no tienes claro cómo crear un proyecto nuevo en Xcode, puedes verlo en este tutorial Tabview Swift UI en el que hay capturas de pantalla para que veas cómo hay que hacerlo.

Tutoriales de SwiftUI

Para este tutorial de Swift no vamos a emplear más vistas de las que se crean por defecto en un proyecto de Xcode, desarrollaremos nuestra app iOS directamente en ContentView.swift. Lo que sí vamos a necesitar es una imagen que será la encargada de dar vida a nuestra aplicación mediante Image con SwiftUI.

La idea es probar algunas de las posibilidades que nos brinda SwiftUI incluyendo muy pocas líneas de código, por esta razón para el tutorial utilizaré algunas capturas de pantalla, creo que así lo vamos a ver mucho mejor.

Puedes echar un vistazo también a este tutorial de UISlider con Swift.

Archivo ContentView.swift

Añadiremos de la forma más sencilla que existe nuestra imagen a la app mediante Image SwiftUI.

var body: some View {
    Image("abeja")
}


Ahora incluiremos una línea de código para darle a esta imagen diferentes dimensiones en este tutorial de SwiftUI sobre imágenes. Me va a resultar algo pesado tener que hacer tantas capturas de pantalla para cada una de las variaciones con Image Swift UI pero creo que merece la pena ir paso a paso para ver cada uno de los cambios.

Image resizable scaledToFit
var body: some View {
    Image("abeja")
   .resizable().scaledToFit()
}


.resizable().scaledToFit() – .resizable().scaledToFill().

Image resizable scaledToFill
var body: some View {
    Image("abeja")
   .resizable().scaledToFill()
}

Aprende SwiftUI con ejemplos

Ahora vamos a meter la imagen dentro de un Frame para poder ajustarla a las medida que nosotros queramos, luego pondremos las esquinas de la imagen redondeadas y dibujaremos un contorno al Frame para que veamos la diferencia.

Image frame SwiftUI
var body: some View {
    Image("abeja")
   .resizable().scaledToFit()
   .frame(width: 200.0,height:200)
}

Incluimos de forma sencilla un radio a cada una de las esquinas cornerRadius() para Image con SwiftUI.

Image cornerRadius SwiftUI
var body: some View {
    Image("abeja")
   .resizable().scaledToFit()
   .frame(width: 200.0,height:200)
   .cornerRadius(30.0)
}

Creamos una capa rectángulo con la overlay Swift UI y le damos un contorno negro para que podamos apreciar como este contorno tiene la forma exacta de nuestro frame SwiftUI, se salta la curvatura de las esquinas de la imagen cornerRadius SwiftUI.

overlay rectangle Swift UI
var body: some View {
    Image("abeja")
   .resizable().scaledToFit()
   .frame(width: 200.0,height:200)
   .cornerRadius(30.0)
   .overlay(Rectangle().stroke(Color .black, lineWidth: 2))
}

Ahora modificaré el ancho de nuestro Frame SwiftUI, le vamos a dar 100 px más para que se pueda observar claramente esto que os digo. Vamos ponerle una capa rectangular y otra con forma de círculo.

overlay frame SwiftUI
var body: some View {
    Image("abeja")
   .resizable().scaledToFit()
   .frame(width: 300.0,height:200)
   .cornerRadius(30.0)
   .overlay(Rectangle().stroke(Color .black, lineWidth: 2))

}

Se puede ver claramente que la capa del rectángulo es más ancha que la imagen 100px, para el contorno circular vamos a volver a colocar en la medida de 200 tanto de ancho como de alto.

overlay Circle SwiftUI
var body: some View {
    Image("abeja")
   .resizable().scaledToFit()
   .frame(width: 200.0,height:200)
   .cornerRadius(30.0)
   .overlay(Circle().stroke(Color .black, lineWidth: 2))

}

Ahora vamos a volver a colocar Image de SwiftUI para que cargue la imagen adaptándose al ancho de nuestra pantalla sin deformarse, como hemos visto en el segundo pantallazo con .resizable().scaledToFit() y con esta medida la haremos de forma circular.

Image clipshape SwiftUI
var body: some View {
    .resizable().scaledToFit()
    .clipShape(Circle())
}

Tutoriales Swift UI

Aquí puedes ver toda la información en la página oficial de Apple sobre Shadow SwiftUI, nosotros únicamente utilizaremos un poco de sombreado para nuestra imagen.

Image shadow SwiftUI
var body: some View {
    .resizable().scaledToFit()
    .clipShape(Circle())
    .shadow(color: Color.green,
        radius: 10.0,
        x: CGFloat(4),
        y: CGFloat(10))
}

Por último en este tutorial de imágenes con SwiftUI vamos a incluir una frase de texto la que no vamos a entrar a analizar, lo dejaré para el siguiente tutorial en español de Swift UI, que será sobre el texto.

overlay Text SwiftUI
var body: some View {
    .resizable().scaledToFit()
    .overlay(Text("Bee | Tutoriales SwiftUI"), alignment: .center)
    .foregroundColor(.white)
    .font(.system(size: 32, weight: .light, design: .serif))
}

Este proyecto de Xcode para desarrollar apps con SwiftUI no lo voy a poner para que lo podáis descargar de forma directa porque únicamente tenéis que ir modificando una línea de código, no seáis tan flojos anda, creadlo en casa que no cuesta tanto :)

Cualquier duda que tengáis sobre este tutorial Swift UI podéis dejarme en la parte inferior con un comentario, estaré encantado de echarle un ojo y tratar de resolverla (si está a mi alcance) lo antes posible.

Fundador de Untitled.es ♡ developer ( ) { web; graphic; iOS; } – http://diwo.es

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *