Press "Enter" to skip to content

SwiftUI: Grids im Detail – Teil 3

GridItem-Größe

In den beiden vorangegangenen Artikeln dieser Reihe (siehe Link-Übersicht am Ende) ging es um die Grundlagen zum Einsatz der neuen Grid-Views in SwiftUI. Nun werfen wir einen genaueren Blick darauf, wie man die Größe eines einzelnen Grid-Items konfigurieren kann.

Die Größe einer GridItem-Instanz definiert man über einen entsprechenden Parameter namens size. Der basiert auf der Enumeration GridItem.Size, die die folgenden drei Optionen mit sich bringt:

  • adaptive(minimum:maximum:)
  • fixed(_:)
  • flexible(minimum:maximum:)

Am einfachsten zu erklären ist fixed(_:). Dieser Option übergebt ihr die gewünschte Größe in Punkten, die das zugehörige Grid-Item besitzen soll.

Braucht ihr etwas mehr Flexibilität, ist flexible(minimum:maximum:) eine spannende Option. Wie die beiden Parameter bereits andeuten, definiert ihr darüber eine Mindest- und eine Maximalgröße für ein Grid-Item. SwiftUI nutzt diese Informationen, um die Grid-Items ideal darzustellen und die von euch definierten Anforderungen zu erfüllen. So kann es passieren, dass die Grid-Items auf einem kleineren iPhone-Display nicht so groß ausfallen wie auf dem Bildschirm eines 27“-iMac.

Eine Beispielkonfiguration für Grid-Items auf Basis von fixed(_:) und flexible(minimum:maximum:) findet ihr im folgenden Listing:

Die Größe der Grid-Items passt sich den Anforderungen sowie dem verfügbaren Display-Platz an.
Die Größe der Grid-Items passt sich den Anforderungen sowie dem verfügbaren Display-Platz an.

Als dritte Größenoption steht noch adaptive(minimum:maximum:) zur Wahl. Sie ist ideal für Grids, die über keine fixe Anzahl an Spalten bzw. Reihen verfügen. Stattdessen erzeugt SwiftUI automatisch so viele Spalten und Reihen, um die genannten Anforderungen (sprich Mindest- und Maximalgröße) zu erfüllen. Das eignet sich beispielsweise perfekt für Bildergalerien, die auf einem kleinen iPhone-Display weniger Spalten besitzen als auf einem großen iPad-Bildschirm.

Eine beispielhafte Konfiguration eines Grid-Items auf Basis von adaptive(minimum:maximum:) zeigt das folgende Listing:

Dank der adaptive(minimum:maximum:)-Option erfolgt eine dynamische Ermittlung der Spalten bzw. Reihen.
Dank der adaptive(minimum:maximum:)-Option erfolgt eine dynamische Ermittlung der Spalten bzw. Reihen.

Fazit

Herzlichen Glückwunsch, ihr kennt nun die grundlegende Funktionsweise von Grids in SwiftUI. 🙂 Grids sind eine großartige Ergänzung, die nun deutlich komplexere Layouts in SwiftUI ermöglichen. Grids eignen sich hierbei sowohl für tabellarische Inhalte als auch die Umsetzung von Galerien.

Euer Thomas

Weiterführende Links zum Artikel

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Impressum

Thomas Sillmann
Kettererstraße 6
D-63739 Aschaffenburg
E-Mail: contact@thomassillmann.de
Mobil: +49 (0) 151 65125650
Web: https://www.thomassillmann.de/

Inhaltlich Verantwortlicher gemäß §55 Abs. 2 RStV: Thomas Sillmann (Anschrift siehe oben)

Haftungshinweis: Trotz sorgfältiger inhaltlicher Kontrolle übernehme ich keine Haftung für die Inhalte externer Links. Für die Inhalte der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.

Kontakt und soziale Netzwerke

Copyright © 2020 · Thomas Sillmann