¿Cómo cambiar el tamaño de la imagen con SwiftUI?

97

Tengo una imagen grande en Assets.xcassets. ¿Cómo cambiar el tamaño de esta imagen con SwiftUI para hacerla pequeña?

Intenté establecer el marco pero no funciona:

Image(room.thumbnailImage)
    .frame(width: 32.0, height: 32.0)
subdan
fuente

Respuestas:

217

Debe usar .resizable()antes de aplicar cualquier modificación de tamaño en un Image.

Image(room.thumbnailImage).resizable()
.frame(width: 32.0, height: 32.0)
rraphael
fuente
4
¿Y cómo se cambia el tamaño de la imagen manteniendo la relación de aspecto?
Mark Kang
@MarkKang No lo probé, pero hay un método llamadoaspectRatio(_:contentMode:)
rraphael
4
Image ("image01") .resizable () .aspectRatio (UIImage (named: "image01") !. size, contentMode: .fit)
Mark Kang
1
Eso estaría bien. Pero creo que hay un error con el ajuste. hackingwithswift.com/swiftui/…
Mark Kang
17
Image("name").resizable().scaledToFit()sin embargo, no tiene micrófonos. Para que pueda envolver su imagen en una vista, ajustar el marco de la vista al tamaño que necesite, luego scaledToFit()hará que la imagen sea lo más grande posible manteniendo la relación de aspecto.
jemmons
38

Qué tal esto:

struct ResizedImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFit()
                .frame(width: 200.0,height:200)

    }
}

la vista de la imagen es de 200x200, pero la imagen mantiene la relación de aspecto original (cambio de escala dentro de ese marco)

Vorlon confundido
fuente
Esta solución no mantiene la relación de aspecto original en mi caso.
pm89
@ pm89 ¿de qué tamaño son su imagen / vista original y final?
Confused Vorlon
1
La relación de aspecto original es 3/2 y el resultado se convierte en 1/1, lo que alarga la imagen. Esto parece ser un error de SwiftUI. Terminé usando el método sugerido por Mark Kang en los comentarios debajo de la respuesta aceptada, Image(uiImage: image!).resizable().aspectRatio(image!.size, contentMode: .fill)donde imagees de tipo UIImageporque el Imagetipo no expone ninguna propiedad de tamaño.
pm89
Para mí, funciona así, incluido el mantenimiento de la relación de aspecto, gracias 👍
laka
17

Ampliando la respuesta y los comentarios de @ rraphael:

A partir de Xcode 11 beta 2, puede escalar una imagen a dimensiones arbitrarias, mientras mantiene la relación de aspecto original envolviendo la imagen en otro elemento.

p.ej

struct FittedImage: View
{
    let imageName: String
    let width: CGFloat
    let height: CGFloat

    var body: some View {
        VStack {
            Image(systemName: imageName)
                .resizable()
                .aspectRatio(1, contentMode: .fit)
        }
        .frame(width: width, height: height)
    }
}


struct FittedImagesView: View
{
    private let _name = "checkmark"

    var body: some View {

        VStack {

            FittedImage(imageName: _name, width: 50, height: 50)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 100, height: 50)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 50, height: 100)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 100, height: 100)
            .background(Color.yellow)

        }
    }
}

Resultados

Imágenes ajustadas que conservan la relación de aspecto

(Por alguna razón, la imagen se muestra un poco borrosa. Tenga la seguridad de que la salida real es nítida).

Womble
fuente
Probablemente esté viendo una imagen borrosa en SO porque está usando un monitor de alto DPI. Puse esto en un monitor de DPI normal y se ve nítido
Ben Leggiero
1
Esto mantiene la relación de aspecto original, solo porque la relación de aspecto de la imagen original es 1 (la imagen es un cuadrado) y está utilizando .aspectRatio(1, .... Por no decir que ninguna otra solución aquí me ha funcionado hasta ahora ...
pm89
10

En SwiftUI, use el .resizable()método para cambiar el tamaño de una imagen. Al usar .aspectRatio()y especificar a ContentMode, puede "Ajustar" o "Rellenar" la imagen, según corresponda.

Por ejemplo, aquí hay un código que cambia el tamaño de la imagen ajustando:

Image("example-image")
.resizable()
.aspectRatio(contentMode: .fit)
amp.dev
fuente
3
struct AvatarImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFill() // <=== Saves aspect ratio
                .frame(width: 60.0, height:60)
                .clipShape(Circle())

    }
}
Amarshan
fuente
3

Nota: El nombre de mi imagen es img_Logoy puede cambiar el nombre de la imagen para definir las propiedades de la imagen:

 VStack(alignment: .leading, spacing: 1) {
                        //Image Logo Start
                        Image("img_Logo")
                            .resizable()
                            .padding(.all, 10.0)
                            .frame(width: UIScreen.main.bounds.width * 0.4, height: UIScreen.main.bounds.height * 0.2)
                        //Image Logo Done
                    }
cmlcrn17
fuente
Te recomiendo encarecidamente que escribas un breve texto junto con tu código, algún tipo de explicación. Por favor, eche un vistazo al código de conducta aquí: stackoverflow.com/conduct
disp_name
2

Si desea usar la relación de aspecto con el cambio de tamaño, puede usar el siguiente código:

Image(landmark.imageName).resizable()
                .frame(width: 56.0, height: 56.0)
                .aspectRatio(CGSize(width:50, height: 50), contentMode: .fit)
Dinesh Sharma
fuente
2

Dado que no deberíamos codificar / corregir el tamaño de la imagen. Esta es una mejor manera de proporcionar rango para ajustar de acuerdo con la resolución de la pantalla en diferentes dispositivos.

Image("ImageName Here")
       .resizable()
       .frame(minWidth: 60.0, idealWidth: 75.0, maxWidth: 95.0, minHeight: 80.0, idealHeight: 95.0, maxHeight: 110.0, alignment: .center)
       .scaledToFit()
       .clipShape(Capsule())
       .shadow(color: Color.black.opacity(5.0), radius: 5, x: 5, y: 5)
Hanny
fuente
2

Otro enfoque es usar el scaleEffectmodificador:

Image(room.thumbnailImage)
    .resizable()
    .scaleEffect(0.5)
Luis Fer García
fuente
1

Si desea cambiar el tamaño de la imagen en swiftUI, simplemente use el siguiente código:

import SwiftUI

    struct ImageViewer : View{
        var body : some View {
            Image("Ssss")
            .resizable()
            .frame(width:50,height:50)
        }
    }

Pero aquí hay un problema con esto. Si agrega esta imagen dentro de un botón, la imagen no se mostrará, solo un bloque de color azul estaría allí. Para resolver este problema, simplemente haga esto:

import SwiftUI

struct ImageViewer : View{
    var body : some View {
        Button(action:{}){
        Image("Ssss")
        .renderingMode(.original)
        .resizable()
        .frame(width:50,height:50)
    }
   }
}
sachin jeph
fuente
1

Bueno, parece bastante fácil en SwiftUI / Siguiendo la demostración que dieron: https://developer.apple.com/videos/play/wwdc2019/204

struct RoomDetail: View {
     let room: Room
     var body: some View {

     Image(room.imageName)
       .resizable()
       .aspectRatio(contentMode: .fit)
 }

Espero eso ayude.


fuente
1

Puede definir las propiedades de la imagen de la siguiente manera: -

   Image("\(Image Name)")
   .resizable() // Let you resize the images
   .frame(width: 20, height: 20) // define frame size as required
   .background(RoundedRectangle(cornerRadius: 12) // Set round corners
   .foregroundColor(Color("darkGreen"))      // define foreground colour 
Komal Gupta
fuente
1

Es muy importante comprender la estructura lógica del código. Como en SwiftUI, una imagen no se puede cambiar de tamaño de forma predeterminada. Por lo tanto, para cambiar el tamaño de cualquier imagen, debe cambiar su tamaño aplicando el modificador .resizable () inmediatamente después de declarar una vista de imagen.

Image("An Image file name")
    .resizable()
Shawkath Srijon
fuente
1

De forma predeterminada, las vistas de imágenes se ajustan automáticamente a su contenido, lo que puede hacer que vayan más allá de la pantalla. Si agrega el modificador resizable (), la imagen se dimensionará automáticamente para que ocupe todo el espacio disponible:

Image("example-image")
    .resizable()

Sin embargo, eso también puede hacer que la imagen tenga su relación de aspecto original distorsionada, ya que se estirará en todas las dimensiones en la cantidad necesaria para llenar el espacio.

Si desea mantener su relación de aspecto, debe agregar un modificador de relación de aspecto usando .fill o .fit, como este:

Image("example-image")
    .resizable()
    .aspectRatio(contentMode: .fit)
Sudán Suwal
fuente