Die List in Swift UI - Teil 4 - Navigation zur Detailansicht
Um von der Listenansicht zu einer Detailansicht zu navigieren ist es ausreichend, das Listenelement in einen NavigationLink einzukapseln. Als Parameter destination benötigt der NavigationLink eine View zu der navigiert werden soll. Diese Aufgabe könnte sogar ein Text-Steuerelement übernehmen. Der Code sieht dann so aus:
List {
ForEach(self.repo.persons, id: \.id) { person in
NavigationLink (destination: Text("\(person.lastName)"))
{
PersonListCell(person: person)
}
}
}.listStyle(PlainListStyle())
Damit die Navigation funktioniert, muss die komplette List in einen NavigationView eingebettet werden. Diese übernimmt auch die Aufgabe, eine »Zurück« oder »Back« Schaltfläche am oberen Rand anzuzeigen. Mit diesem Button kann anschließend von der Detailansicht zur Liste zurückgekehrt werden. Ohne weitere Anpassungen ist die NavigationView nur eine leere weisse Fläche oberhalb der Liste. Eine gute Vorgehensweise ist es daher, einen navigationTitle zu vergeben, der als Überschrift dient. Über den navigationBarTitleDisplayMode kann das Erscheinungsbild des NavigationView angepasst werden. Der Mode large erzeugt eine große Überschrift die linksbündig angezeigt wird. Der Mode inline sorgt alternativ für eine kleinere Überschrift, die zentriert über der List angezeigt wird. Wichtig ist, das die Modifier navigationTitle und navigationBarTitleDisplayMode nicht an den NavigationView angehängt werden, sondern an die List.
import SwiftUI
struct ContentView: View {
@ObservedObject var repo = PersonsRepository(randomPersonsCount: 10)
var body: some View {
NavigationView {
List {
ForEach(self.repo.persons, id: \.id) { person in
NavigationLink (destination: Text("\(person.lastName)"))
{
PersonListCell(person: person)
}
}
}.listStyle(PlainListStyle())
.navigationTitle("List and People")
.navigationBarTitleDisplayMode(.large)
}
}
}
Die in der NavigationView verwendete Text- und Hintergrundfarbe kann nicht über Modifier beeinflußt werden. Trotzdem ist eine Anpassung möglich, wenn man sich der UINavigationBarAppearance bedient. Sehr gut können die dafür benötigten Anweisungen in einer Init-Methode der View eingefügt werden. Dann geschehen die Zuweisungen automatisch, immer wenn die View initialisiert wird.
init() {
let customAppearance = UINavigationBarAppearance()
// Backgroundcolor
customAppearance.backgroundColor = UIColor.lightGray
// Font color for navigationBarTitleDisplayMode large
customAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
// Font color for navigationBarTitleDisplayMode inline
customAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
UINavigationBar.appearance().standardAppearance = customAppearance
UINavigationBar.appearance().compactAppearance = customAppearance
UINavigationBar.appearance().scrollEdgeAppearance = customAppearance
}
Was dem Programm jetzt noch fehlt, ist eine Detailansicht. Die Vorgehensweise ist dabei mit der View der PersonListCell identisch. Eine neue SwiftUI erzeugen, der eine Person als Parameter übergeben werden muss. Die View soll PersonDetailView heißen.
mport SwiftUI
struct PersonDetailView: View {
var person : Person
var body: some View {
VStack {
HStack {
Text("Hello, my name is")
.font(.title2)
Text("\(person.firstName) \(person.lastName).")
.font(.title2)
}.padding(10)
HStack {
Text("I was born")
.font(.title2)
Text("\(person.birthday.formatted(.dateTime.year().month().day())).")
.font(.title2)
}.padding(10)
Spacer()
}.padding(EdgeInsets(top: 50, leading: 0, bottom: 0, trailing: 0))
}
}
Nur eine Änderung ist jetzt noch erforderlich. In der List muss die destination des NaviagtionLink angepasst werden. Das Text-Steuerelemente wird ersetzt von einer PersonDetailView der eine person übergeben wird. Anschließend kann zwischen List und Detailansicht hin und her navigiert werden.
Geschrieben am: 06.07.2021 Technologien: SwiftUI, List