In iOS Settings > Music > Apple Music and Privacy, there is a modal that I've mostly successfully duplicated except in two ways (a brief demo of Apple's modal is here). First, I don't know how to duplicate the bullet points seen in the beginning of the text. Second, I don't know how to hide the nav bar title until scrolling past the logo and modal title. That behavior matches the .inline nav title style and suggests the logo and title are actually part of the nav bar title.
The answer here was really helpful in actually getting the nav bar to show up. I also tried using ToolbarItem
and .principal
from here to add an image to the toolbar, but that doesn't give the desired result. I tried adding padding because the image was squished into the nav bar but that didn't work. Lastly, I tried a VStack
in the .principal
placement to add the image and text below it, but that didn't work either.
Here's the code in the parent view:
struct ModalNavBar: View {
@State private var showApplePolicy = false
var body: some View {
Button() {
showApplePolicy = true
} label: {
Text("Apple Music and Privacy")
}.sheet(isPresented: $showApplePolicy, content: {
NavigationView {
TermsAndPrivacyView()
.navigationTitle("Apple Music & Privacy")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
VStack {
Image("privacy")
.resizable()
.frame(width: 80, height: 65)
.padding()
.padding(.vertical, 20)
Text("Apple Music & Privacy")
}
}
ToolbarItem(placement: .navigationBarTrailing) {
Button(action: {
self.showApplePolicy = false
}) {
Text("Done").bold()
}
}
}
}
})
}
}
and the modal view:
struct TermsAndPrivacyView: View {
var body: some View {
ScrollView {
VStack(alignment: .center, spacing: 20) {
Group {
Image("privacy")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 80, height: 65)
.padding()
.padding(.top, 20)
.padding(.bottom, 5)
Text("Apple Music & Privacy")
.font(.title).bold().padding(.top, -20)
VStack(alignment: .center) {
Text("Apple Music is designed to protect your information and enable you to choose what you share.")
}
}
}.padding(.horizontal, 30)
}
}
}
Any help with the nav bar would be appreciated.