Comment redimensionner une image avec SwiftUI?

Question

J'ai une grande image dans Assets.xcassets. Comment redimensionner cette image avec SwiftUI pour la rendre petite ?

J'ai essayé de définir le cadre mais cela ne fonctionne pas :

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

Answer 1

Vous devriez utiliser .resizable() avant d'appliquer des modifications de taille sur une Image.

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

Answer 2

Que diriez-vous de ceci :

struct ResizedImage: View {
    var body: some View {
        Image("myImage")
            .resizable()
            .scaledToFit()
            .frame(width: 200, height: 200)
    }
}

La vue de l'image est de 200x200, mais l'image conserve le rapport hauteur/largeur original (redimensionnement dans ce cadre).

Answer 3

En SwiftUI, utilisez la méthode .redimensionnable() pour redimensionner une image. En utilisant .aspectRatio() et en spécifiant un ContentMode, vous pouvez soit "Adapter" soit "Remplir" l'image, selon le cas.

Par exemple, voici le code qui redimensionne l'image en l'adaptant :

Image("exemple-image")
.redimensionnable()
.aspectRatio(contentMode: .fit)

Answer 4

Élargir la réponse et les commentaires de @rraphael :

À partir de Xcode 11 beta 2, vous pouvez redimensionner une image aux dimensions souhaitées tout en conservant le ratio d'aspect d'origine en enveloppant l'image dans un autre élément.

par exemple

struct FittedImage: View
{
    let nomImage: String
    let largeur: CGFloat
    let hauteur: CGFloat

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

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

    var body: some View {

        VStack {

            FittedImage(nomImage: _nom, largeur: 50, hauteur: 50)
            .background(Color.yellow)

            FittedImage(nomImage: _nom, largeur: 100, hauteur: 50)
            .background(Color.yellow)

            FittedImage(nomImage: _nom, largeur: 50, hauteur: 100)
            .background(Color.yellow)

            FittedImage(nomImage: _nom, largeur: 100, hauteur: 100)
            .background(Color.yellow)

        }
    }
}

Résultats

(Pour une raison quelconque, l'image apparaît un peu floue. Soyez assuré que la sortie réelle est nette.)

Answer 5

struct AvatarImage: View {
    var body: some View {

            Image("monImage")
                .resizable()
                .scaledToFill() // <=== Sauvegarde le ratio d'aspect
                .frame(width: 60.0, height:60)
                .clipShape(Circle())

    }
}