Я видел много путаницы вокруг панели навигации на онлайн-форумах и в обсуждениях. Панель навигации является важной частью многих приложений iOS, а в iOS 13 и более поздних версиях доступно несколько параметров для настройки ее внешнего вида. В этой статье мы рассмотрим, как изменить цвет фона, текст заголовка, несколько панелей навигации в стеке навигации и цвет текста заголовка панели навигации, а также обсудим функцию UINavigationBarAppearance, упрощающую применять пользовательские стили внешнего вида к различным частям панели навигации.
Настроить единую панель навигации
Чтобы настроить внешний вид панели навигации, вы можете изменить внешний вид контроллера представления, содержащего панель навигации, в StoryBoard или программно, сегодня мы коснемся только программного метода. Вот пример того, как вы можете изменить фон NavigationBar:
class MainViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Providing title for navigation bar
title = "Main View"
//initiate navbar, using this because, even though the view has been loaded, doesn't mean that the navigation is inserted into the view
guard let navBar = navigationController?.navigationBar else {fatalError("Nav bar doesn't exit or has not been inserted yet")}
let appearance = UINavigationBarAppearance()
// set the Background color to color of your choice here
appearance.backgroundColor = UIColor.systemIndigo
// the appearance of the navigation bar when it is in its standard (non-scrolling) state.
navBar.standardAppearance = appearance
// specifies the appearance of the navigation bar when it is scrolled under the top edge of the screen.
navBar.scrollEdgeAppearance = appearance
}
}
Этот код настраивает внешний вид панели навигации при отображении контроллера представления. Метод viewDidLoad() вызывается, когда представление контроллера представления загружается в память, как правило, именно здесь мы настраиваем внешний вид панели навигации.
с приведенным выше кодом вы получите следующее:
Если вы хотите использовать большой заголовок на панели навигации, вы можете настроить его внешний вид, используя свойство largeTitleTextAttributes объекта UINavigationBar. Например:
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemIndigo.withAlphaComponent(0.3)
title = "Main View"
guard let navBar = navigationController?.navigationBar else {fatalError("Nav bar doesn't exit or has not been inserted yet")}
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = .systemIndigo
// make the title larger and extends the nav bar
navBar.prefersLargeTitles = true
// change the text color to your color of choice here
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.green]
navBar.standardAppearance = appearance
// appearance of the navigation bar when it is in a compact size,
navBar.compactAppearance = appearance
navBar.scrollEdgeAppearance = appearance
}
Примечание.порядок кода имеет значение, appearance.backgroundColor = .systemIndigo должен предшествовать другому коду модификации, иначе он не будет работать.
В iOS 14 и более поздних версиях вы можете использовать свойство compactAppearance объекта UINavigationBar, чтобы указать внешний вид панели навигации, когда она имеет компактный размер, вы также можете использовать свойство scrollEdgeAppearance объекта UINavigationBar, чтобы указать внешний вид навигации. полоса, когда она отображается в виде края прокрутки. Представление края прокрутки — это тонкая полоска панели навигации, которая отображается вверху или внизу области прокручиваемого содержимого, когда пользователь прокручивает край содержимого. Чтобы использовать свойство scrollEdgeAppearance, создайте объект UINavigationBarAppearance и настройте его свойства, такие как backgroundColor и titleTextAttributes, чтобы задать нужные стили внешнего вида. Затем установите scrollEdgeAppearance для нашего объекта navBar вот так: navBar.scrollEdgeAppearance = appearance
с приведенным выше кодом вы получите следующее:
Настройте несколько NavBar в одном стеке навигации
Вы также можете настроить внешний вид панели навигации в методе viewWillAppear(_:), если хотите, чтобы внешний вид обновлялся каждый раз перед отображением контроллера представления, например,вы находитесь в Main Viewи хотите для навигации/performSegue к Second View и вы хотите показать внешний вид динамической панели навигации на Second View, вы измените внешний вид панели навигации в методе viewWillAppear(_:), если вы изменяете в viewDidLoad() внешний вид панели навигации Main View будет следовать любой настройке для Second View, вы может быть в состоянии выполнить ту же задачу в методе viewDidLoad(), но вы не можете быть уверены, что Second View уже загружен/вставлен в стек навигации до вызова viewDidLoad(). если он не был загружен, приложение вылетит. следовательно, наш код navBar . Поэтому, чтобы этого не произошло, вы должны выполнить эту модификацию в viewWillAppear(_:).
guard let navBar = navigationController?.navigationBar else {fatalError("Nav bar doesn't exit or has not been inserted yet")}
override func viewWillAppear(_ animated: Bool) {
// put the same code when we Customize Single NavBar here
// do this for MainViewController and SecondViewController
}
Предполагая, что push Segue настроен правильно, при нажатии на кнопку следующего экрана вы должны получить другой вид панели навигации на каждом View
Заключение
В этой статье мы рассмотрели, как настроить внешний вид панели навигации в iOS 13 и выше. Мы увидели, как изменить цвет фона, цвет и размер текста заголовка, а также настроить несколько панелей навигации с помощью UINavigationBarAppearance , а также обсудили, как настроить внешний вид панели навигации, когда она имеет компактный размер или размер. отображается как вид с прокручиваемым краем. Благодаря этим методам у вас теперь должны быть инструменты, необходимые для создания безупречного и профессионально выглядящего навигационного интерфейса в ваших приложениях для iOS.
Примечание автора: на сегодня это все, если эта статья вам чем-то поможет, подпишитесь на меня в LinkedIn, и аплодисменты будут для меня очень важны.
Кроме того, оставляйте комментарии, если что-то непонятно или отсутствует
Спасибо за прочтение!
