Neuerungen in SwiftUI – Teil 2

AsyncImage

Mit Xcode 13 steht uns in SwiftUI eine neue View namens AsyncImage zur Verfügung. Die ermöglicht es, ein Bild auf Basis einer URL asynchron zu laden. Das Bild wird automatisch angezeigt, sobald der Download erfolgreich abgeschlossen wurde.

Um eine AsyncImage-Instanz zu erzeugen, braucht es wenigstens die URL zum gewünschten Bild, wie der folgende Aufruf zeigt:

AsyncImage(url: URL(string: "https://www.myGreatImage.jpeg")!)

AsyncImage kann aber noch mehr. Beispielsweise lässt sich eine Skalierung des geladenen Bildes mithilfe des scale-Parameters festlegen. Das ist für hochauflösende Bilder spannend, die man im Code beispielsweise mit dem @2x-Suffix versehen würde:

AsyncImage(
    url: URL(string: "https://www.myGreatImage.jpeg")!),
    scale: 2
)

Bildkonfiguration und Platzhalter

Da AsyncImage eine ganz eigene View im SwiftUI-Framework ist, lassen sich diverse Image-spezifische Modifier nicht mit ihr verwenden, beispielsweise resizable().

Zu diesem Zweck ermöglicht es AsyncImage mithilfe des content-Closures, das geladene Bild in Form einer Image-Instanz zu konfigurieren und anschließend als anzuzeigendes Ergebnis zurück zu liefern. Gleichzeitig nutzt man den placeholder-Parameter, um eine beliebige View so lange als Platzhalter für AsyncImage anzuzeigen, bis das Bild erfolgreich geladen wurde.

Den beispielhaften Einsatz dieser beiden Parameter demonstriert das folgende Listing. Darin wird das geladene Bild in der Größe angepasst. Als Platzhalter fungiert eine einfache ProgressView.

AsyncImage(url: URL(string: "https://www.myGreatImage.jpeg")!) { image in
    image
        .resizable()
        .scaledToFit()
        .padding()
} placeholder: {
    ProgressView()
}

Fazit

AsyncImage ist eine gelungene Ergänzung innerhalb des SwiftUI-Frameworks und bedient einen durchaus des Öfteren benötigten Workflow. Der Einsatz von AsyncImage ist erfreulich einfach und benötigt nicht mehr als eine URL. Zusätzlich lässt sich unkompliziert ein Platzhalter ergänzen, der automatisch durch das konkrete Bild ersetzt wird, sobald das zur Verfügung steht.

Euer Thomas