Menu Close

SwiftUI 04 – Städte Kacheln

In diesem Beispiel, geht es um Kacheln, die in UIKit als CollectionView bekannt sind. In SwiftUI gibt es im Moment nichts ähnliches. Man nutzt daher eine Liste und muss diese anpassen. Die Daten kommen aus einem Model mit einem Array mit 6 Bildern und Namen. Damit man wir jenes Array nicht untereinander darstellen, bedient man sich einer Hilfsfunktion. Mit dieser Funktion teilen wir das ursprüngliche Array (bspw.: [0, 1, 2, 3, 4, 5] auf. Das Ergebnis, um zwei Gegenstände nebeneinander zu zeigen, wären dann [[0,1], [2,3],[4,5]] -> d.h. man hat zwei Kacheln und drei Reihen! (es wären auch 3, 4, … Kacheln nebeneinander möglich)


    // *SwiftUI Städte Kacheln*
    // 
    //  Array+Extensions.swift
    //  SwiftUI_CityGrid
                    
    import Foundation

    extension Array {
        func chunked(into size: Int) -> [[Element]] {
            return stride(from: 0, to: count, by: size).map {
                Array(self[$0..<Swift.min($0 + size, count)])
            }
        }
    }

Daher wurde ein Swift Datei erstellt, mit dem Namen Array+Extensions.swift und die enthaltene Funktion, teilt das Array wie oben beschrieben. Die Daten für das View wird aus dem City Model geholt. Das City Model hat ebenfalls eine eigene Swift Datei -> City.swift.


    // *SwiftUI Städte Kacheln*
    // 
    //  City.swift
    //  SwiftUI_CityGrid
                
    import Foundation
    import SwiftUI
    
    struct City : Identifiable {
        let id = UUID() 
          
        let name: String
        let image: String         
    }
    
    extension City {
        static func cityList() -> [City] {
            return [
                City(name: "Berlin", image: "berlin"),
                City(name: "Rostock", image: "rostock"),
                City(name: "München", image: "munich"),
                City(name: "Leipzig", image: "leipzig"),
                City(name: "Hamburg", image: "hamburg"),
                City(name: "Köln", image: "cologne")   
            ]
        }
    }

Das City Model besteht aus einem struct, in der die Konstanten definiert werden. Ebenso ist es wichtig eine ID zu bestimmen, in dem Fall nehmen wir die eindeutige UUID, aber wenn die Daten bspw. von einem Server kommen, wird die ID abweichen.

Das struct muss für das View erkennbar sein, also bestimmbar. Daher unbedingt den Begriff Indentifiable zum struct hinzufügen! In der Erweiterung zum struct City, geben wir in einer Funktion das Array mit den Beispieldaten an.


    // *SwiftUI Städte Kacheln*
    // 
    //  ContentView.swift
    //  SwiftUI_CityGrid
     
    import SwiftUI
    
    struct ContentView : View {
    
    let cities = City.cityList() 
    
    var body: some View {

        let chunkedCities = cities.chunked(into: 2)

        return NavigationView {
            return List {
                // rows - Zeilen
                ForEach(0..<chunkedCities.count) { index in
                    HStack {
                        // grid in rows - Kacheln in Zeilen
                        ForEach(chunkedCities[index]) { city in
                            VStack {
                                Image(city.image)
                                    resizable()
                                    .frame(width: 185, height: 185)
                                    .cornerRadius(10)
                                Text(city.name)
                                    .frame(width: 185)
                                    .foregroundColor(.white)
                                    .background(Color.red)
                                    .cornerRadius(6)
                                }.navigationBarTitle(Text("Deutsche Städte"))
                            }
                        }
                    }   
                }
            }
        }
    }
    
    #if DEBUG
    struct ContentView_Previews : PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    #endif 

        

Das ContentView.swift, wird dann die Kacheln anzeigen. Dafür nutz man die ForEach Schleife. Als erstes werden die Daten aus dem Model City mit einer Konstante angelegt, in dem Fall cities (klein geschrieben). Innerhalb der Variablen body werden die Kacheln in einer Reihe festgelegt. Dafür wird die oben beschriebene Funktion chunked(…) benutzt. In diesem Beispiel werden zwei Kacheln neben einander genutzt, daher die 2.

Innerhalb der Variablen body befinden sich mehrere Zeilen, wegen der Konstanten chunkedCities. Daher werden NavigationView und List mit einem return versehen, damit Xcode weiss, ab welcher Zeile das View ausgeführt werden soll.

Die erste Schleife gibt die Zeilen an, die das Array hat. In dem Fall drei Zeilen. In die zweite Schleife wird der Index, in dem Fall zwei Kacheln, übergeben. Das Bild und die Beschreibung des Bildes (Städtenamen) werden in einem vertikalen Stack dargestellt.

Es macht Sinn die chunked(..) – Funktion auszuprobieren, also man könnte auch die 2, 3, etc. der Konstanten chunkedCities übergeben!!!

Endresultat

Hier ist das komplette Projekt zu finden: https://github.com/DKoenig82/swiftui_swiftyking

Related Posts

Diese Seite verwendet Cookies, um die Nutzerfreundlichkeit zu verbessern. Mit der weiteren Verwendung stimmst du dem zu. Datenschutzerklärung