SwiftUI/UIKit — выделяйте кнопки и текст панели навигации
В приложении, над которым я сейчас работаю, у меня есть представление, в котором вверху отображается связанное изображение. В настоящее время у меня установлено изображение, игнорирующее безопасную область в верхней части экрана, потому что я думаю, что это придает приложению более современный вид. Проблема в том, что все кнопки или текст на панели навигации нечитабельны в зависимости от того, какое изображение отображается. Есть ли способ придать тексту тень или полупрозрачный фон, чтобы он выделялся на изображении? Или, может быть, я мог бы использовать другой дизайн, который также выглядел бы очень современно и позволял избежать этих проблем?
Я экспериментировал с изменением внешнего вида в UINavigationBarAppearance и UIBarButtonItemAppearance, но безуспешно. Мне удалось изменить цвет текста, но пока ничего больше.
Вот пример моей проблемы:
Вот пара примеров того, что я надеюсь сделать (извиняюсь за плохое качество):
Я знаю, что могу вручную оформить любую кнопку, которую добавляю на панель навигации, поэтому мне больше всего хочется, чтобы кнопка «Назад» была видна независимо от того, какое изображение выбрано. Я мог бы пойти по пути скрытия кнопки «Назад» на панели навигации и добавления собственной кнопки, но на самом деле я не хочу терять жест смахивания, чтобы вернуться на предыдущий экран.
Ответы 1
Просто удалите кнопку «Назад» по умолчанию с помощью NavigationBarBackButtonHidden и замените ее своим собственным дизайном, добавив на панель инструментов.
Здесь я создал нечто похожее на один из дизайнов на скриншоте. Кнопка имеет материальный фон.
struct ContentView: View {
var body: some View {
NavigationStack {
NavigationLink("Navigate") {
AnotherView()
}
}
}
}
struct AnotherView: View {
@Environment(\.dismiss) var dismiss
var body: some View {
Image("your image here...")
.resizable()
.scaledToFill()
.ignoresSafeArea()
.navigationBarBackButtonHidden()
.toolbar {
// back button
ToolbarItem(placement: .topBarLeading) {
Button {
dismiss()
} label: {
Image(systemName: "arrow.backward")
.foregroundStyle(.black)
.padding(7)
.background(.regularMaterial, in: Circle())
}
}
// as an additional example, here is a button with a title
ToolbarItem(placement: .topBarTrailing) {
Button {
// do something else
} label: {
Text("Press Me!")
.foregroundStyle(.black)
.padding(.vertical, 7)
.padding(.horizontal, 10)
.background(.regularMaterial, in: Capsule())
}
}
}
}
}
Вывод: (Я использовал изображение своего профиля в качестве фона, потому что у меня нет изображений получше)