Wie kann ich die Bildgröße mit SwiftUI ändern?

98

Ich habe ein großes Bild in Assets.xcassets. Wie kann ich die Größe dieses Bildes mit SwiftUI ändern, um es klein zu machen?

Ich habe versucht, den Rahmen festzulegen, aber es funktioniert nicht:

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

Antworten:

218

Sie sollten verwenden, .resizable()bevor Sie Größenänderungen an einem vornehmen Image.

Image(room.thumbnailImage).resizable()
.frame(width: 32.0, height: 32.0)
Rraphael
quelle
4
Und wie können Sie die Größe des Bildes unter Beibehaltung des Seitenverhältnisses ändern?
Mark Kang
@ MarkKang Ich habe es nicht ausprobiert, aber es gibt eine Methode namensaspectRatio(_:contentMode:)
Rraphael
4
Image ("image01") .resizable () .aspectRatio (UIImage (benannt: "image01")!. Size, contentMode: .fit)
Mark Kang
1
Das wäre nett. Aber ich denke, es gibt einen Fehler mit der Passform. hackingwithswift.com/swiftui/…
Mark Kang
17
Image("name").resizable().scaledToFit()ist aber nicht abgehört. So können Sie Ihr Bild in eine Ansicht einbinden, den Rahmen der Ansicht auf die gewünschte Größe einstellen scaledToFit()und das Bild dann so groß wie möglich machen, während das Seitenverhältnis beibehalten wird.
Jemmons
38

Wie wäre es damit:

struct ResizedImage: View {
    var body: some View {

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

    }
}

Die Bildansicht ist 200 x 200, aber das Bild behält das ursprüngliche Seitenverhältnis bei (Neuskalierung innerhalb dieses Rahmens).

Verwirrter Vorlon
quelle
Diese Lösung behält in meinem Fall nicht das ursprüngliche Seitenverhältnis bei.
pm89
@ pm89 Welche Größe haben Ihr ursprüngliches und endgültiges Bild / Ihre endgültige Ansicht?
Verwirrter Vorlon
1
Das ursprüngliche Seitenverhältnis beträgt 3/2 und das Ergebnis wird 1/1, wodurch das Bild gedehnt wird. Dies scheint ein SwiftUI-Fehler zu sein. Am Ende habe ich die von Mark Kang vorgeschlagene Methode in den Kommentaren unter der akzeptierten Antwort verwendet, Image(uiImage: image!).resizable().aspectRatio(image!.size, contentMode: .fill)wobei sie imagevom Typ ist, UIImageda der ImageTyp keine Größeneigenschaft verfügbar macht.
pm89
Für mich funktioniert es so, einschließlich des Beibehaltens des Seitenverhältnisses, danke 👍
laka
18

Erweitern von @ rraphaels Antwort und Kommentaren:

Ab Xcode 11 Beta 2 können Sie ein Bild auf beliebige Abmessungen skalieren und dabei das ursprüngliche Seitenverhältnis beibehalten, indem Sie das Bild in ein anderes Element einschließen.

z.B

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)

        }
    }
}

Ergebnisse

Angepasste Bilder, die das Seitenverhältnis beibehalten

(Aus irgendeinem Grund wird das Bild etwas verschwommen angezeigt. Seien Sie versichert, dass die tatsächliche Ausgabe scharf ist.)

Womble
quelle
Wahrscheinlich sehen Sie auf SO ein verschwommenes Bild, weil Sie einen hochauflösenden Monitor verwenden. Ich habe dies auf einen normalen DPI-Monitor gestellt und es sieht
scharf
1
Dadurch bleibt das ursprüngliche Seitenverhältnis erhalten, nur weil das Seitenverhältnis des Originalbilds 1 beträgt (das Bild ist ein Quadrat) und Sie es verwenden .aspectRatio(1, .... Um nicht zu sagen, dass jede andere Lösung hier bisher für mich funktioniert hat ...
pm89
10

Verwenden Sie in SwiftUI die .resizable()Methode, um die Größe eines Bildes zu ändern. Wenn Sie a verwenden .aspectRatio()und angeben ContentMode, können Sie das Bild je nach Bedarf entweder "anpassen" oder "füllen".

Hier ist zum Beispiel Code, der die Größe des Bildes durch Anpassen ändert:

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

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

    }
}
Amarshan
quelle
3

Hinweis: Mein Bildname lautet img_Logound Sie können den Bildnamen ändern. Definieren Sie die Bildeigenschaften wie folgt :

 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
quelle
Ich würde Ihnen wärmstens empfehlen, einen kurzen Text zusammen mit Ihrem Code zu schreiben, eine Art Erklärung. Den Verhaltenskodex finden Sie hier: stackoverflow.com/conduct
disp_name
2

Wenn Sie das Seitenverhältnis beim Ändern der Größe verwenden möchten, können Sie den folgenden Code verwenden:

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

Da sollten wir die Bildgröße nicht fest codieren / fixieren. Hier finden Sie eine bessere Möglichkeit, den Bereich entsprechend der Bildschirmauflösung auf verschiedenen Geräten anzupassen.

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
quelle
2

Ein anderer Ansatz ist die Verwendung des scaleEffectModifikators:

Image(room.thumbnailImage)
    .resizable()
    .scaleEffect(0.5)
Luis Fer Garcia
quelle
1

Wenn Sie die Größe des Bildes in swiftUI ändern möchten, verwenden Sie einfach den folgenden Code:

import SwiftUI

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

Aber hier ist ein Problem damit. Wenn Sie dieses Bild in eine Schaltfläche einfügen, wird das Bild nicht angezeigt, sondern nur ein blauer Farbblock. Um dieses Problem zu lösen, gehen Sie einfach wie folgt vor:

import SwiftUI

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

Nun, in SwiftUI / Nach der Demo, die sie gegeben haben , scheint es ziemlich einfach zu sein : 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)
 }

Ich hoffe es hilft.


quelle
1

Sie können die Bildeigenschaften wie folgt definieren: -

   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
quelle
1

Es ist sehr wichtig, die logische Struktur des Codes zu verstehen. Wie in SwiftUI kann die Größe eines Bilds standardmäßig nicht geändert werden. Um die Größe eines Bildes zu ändern, müssen Sie die Größe ändern, indem Sie den Modifikator .resizable () unmittelbar nach dem Deklarieren einer Bildansicht anwenden.

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

Standardmäßig passen sich Bildansichten automatisch an ihren Inhalt an, wodurch sie möglicherweise über den Bildschirm hinausgehen. Wenn Sie den Modifikator resizable () hinzufügen, wird das Bild stattdessen automatisch so dimensioniert, dass es den gesamten verfügbaren Speicherplatz ausfüllt:

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

Dies kann jedoch auch dazu führen, dass das ursprüngliche Seitenverhältnis des Bilds verzerrt wird, da es in allen Dimensionen um den Betrag gedehnt wird, der erforderlich ist, damit es den Raum ausfüllt.

Wenn Sie das Seitenverhältnis beibehalten möchten, sollten Sie einen Aspekt-Verhältnis-Modifikator mit .fill oder .fit wie folgt hinzufügen:

Image("example-image")
    .resizable()
    .aspectRatio(contentMode: .fit)
Sudan Suwal
quelle