Die List in Swift UI - Teil 9 - Badges

Seit iOS15 ist es mit geringem Aufwand möglich, Listenelemente um sogenannte Badges zu erweitern. Dabei handelt es sich um kurze Texte, die für gewöhnlich am rechten Rand des Elements angezeigt werden. Im aktuellen Beispiel wollen wir das Alter der Person in einer Badge anzeigen. Dafür ist es sinnvoll, die Klasse Person zunächst um eine Methode zu erweitern, die das Alter liefert. Es soll die Anzahl der Jahre ausgegeben werden. Die Methode soll getAge heißen. Das Geburtsdatum der Person liegt in der Klasse schon vor. Es ist die Eigenschaft birthday vom Typ Date. Was noch fehlt, ist das aktuelle Datum, um anschließend zwischen den beiden Daten die Differenz zu berechnen. Die Klasse Calendar kann diese Aufgabe erfüllen.

import Foundation

public class Person {

    let id = UUID()

    var firstName : String = ""

    var lastName : String = ""

    var birthday : Date = Date()

    var company : String = ""

    public func getAge() -> String {

        let today = Date()

        let differenceComponents = Calendar.current.dateComponents([.year], from: self.birthday, to: today)

        let yearDifference = differenceComponents.year

        return "\(yearDifference!) Years"

    }

}

Das Alter anschließend mit einem Listenelement anzuzeigen, ist leicht. Es muss lediglich der Modifier badge an das Element angehängt werden. Aufgerufen wird dort die neue Methode getAge der Klasse Person.

NavigationLink (destination: PersonDetailView(person: person))

{

    PersonListCell(person: person)

        .badge(person.getAge())

}

Obwohl Xcode eine Warnung ausgibt, und behauptet, es würde nicht funktionieren, kann auch angepasster Text als Badge angezeigt werden. Ob dies in zukünftigen Version der Entwicklungsumgebung so bleibt, oder ob die Warnung verschwindet, bleibt abzuwarten.

NavigationLink (destination: PersonDetailView(person: person))

{

    PersonListCell(person: person)

       .badge(Text(person.getAge())

           .foregroundColor(Color.blue)

           .font(.subheadline )

    )

}

Falls erforderlich, können in dem Badge nicht nur Texte angezeigt werden. Bilder aus der Systembibliothek funktionieren ebenfalls.

NavigationLink (destination: PersonDetailView(person: person))

{

    PersonListCell(person: person)

        .badge(Text("\(Image(systemName: "hand.thumbsup"))")

            .foregroundColor(Color.blue)

            .font(.subheadline)

     )

}

Geschrieben am: 29.08.2021
Technologien: SwiftUI, List