Обзор

Контроллер навигации - это контейнерное представление, которое может управлять навигацией по иерархическому содержимому. Контроллер навигации управляет текущим отображаемым экраном с помощью стека навигации. Стек навигации может иметь n контроллеров представления. Самый нижний контроллер представления в этом стеке является контроллером корневого представления, а остальные - контроллерами дочернего представления. Одновременно виден только один дочерний контроллер представления, который является самым верхним контроллером представления в иерархии навигации. Контроллер представления может добавлять или удалять из стека, используя операции push и pop.

В этом уроке мы узнаем

  1. Как встроить контроллеры представления в контроллер навигации?
  2. Способы нажимать, выталкивать из стека навигации?
  3. Как использовать стек навигации как массив?
  4. Настроить панель навигации? Итак, приступим

Это руководство написано с использованием Swift 5, Xcode 11.2, iOS 13 и интерфейса раскадровки.

1. Начните с навигационного контроллера.

Создайте приложение с одним представлением в Xcode. Добавьте два контроллера представления в свою раскадровку. Создайте два разных файла swift для этих контроллеров представления и установите для них идентификаторы. Возьмите кнопку в каждом контроллере представления, установите для них ограничение и настройте по своему усмотрению. Добавьте выходы действий для этих кнопок в соответствующий контроллер представления. В моем случае я назвал контроллеры представления «FirstVC» и «SecondVC», а кнопки - «Push SecondVC» и «Pop To First».

Теперь вставьте свой «FirstVC» в контроллер навигации с помощью раскадровки.

Если ваш файл раскадровки выглядит примерно так, вы готовы к работе.

Вы также можете быстро встроить свой «FirstVC» в контроллер навигации программно. Но в этом уроке мы сделали это простым и понятным, используя раскадровку.

Вставьте и вставьте в стек навигации

Мы увидим, как нажимать, выталкивать и выталкивать контроллер корневого представления в стек навигации.

  • На верх

Когда вы нажимаете контроллер представления, он помещается в верхнюю часть стека навигации и до контроллера представления, откуда вы нажимаете. Это означает, что если вы нажмете « SecondVC» из «FirstVC», «SecondVC» переместится до «FirstVC». Если вы снова нажмете на «SecondVC», он перенаправит вас на «FirstVC».

В нашем примере эта операция нажатия выполняется путем нажатия кнопки «Push SecondVC» в «FirstVC».

let storyboard = UIStoryboard(name: "Main", bundle: nil)
let vc = storyboard.instantiateViewController(identifier: "SecondVC")
self.navigationController?.pushViewController(vc, animated: true)
  • Показывать сверху

Теперь, если мы хотим удалить самый верхний контроллер представления из стека навигации, мы должны удалить этот контроллер представления. В нашем примере теперь «SecondVC» является самым верхним контроллером представления, и если мы хотим удалить его из стека навигации, мы напишем этот блок кода в действии кнопки «popToFirstVC».

self.navigationController?.popViewController(animated: true)
  • Контроллер Pop To Root View

Мы можем поместить n контроллеров представления в стек навигации. Иногда нам нужно перейти к корневому контроллеру представления из любого из контроллеров представления, тогда мы можем использовать этот блок кода для его выполнения.

navigationController?.popToRootViewController(animated: true)

Вы можете проверить это, заменив коды в действии кнопки «popToFirstVC» в «SecondVC».

Стек навигации как массив

В контроллере навигации дочерние контроллеры представления хранятся в виде массива заказов. Мы также можем получить доступ к контроллерам представлений из этого массива. Теперь мы увидим различные варианты использования этого массива.

  • Удалить контроллер представления из массива

Мы можем удалить контроллеры представления из разных позиций массива стека навигации. Прежде всего, мы получим все доступные контроллеры представления, а затем выполним операцию удаления

var navVCArray = self.navigationController?.viewControllers
navVCArray?.removeLast() //Remove the last view controller
navVCArray?.removeFirst() // Remove the first view controller
navVCArray?.removeAll() //Remove all view controllers
navVCArray?.remove(at: 0) //Remove at specific position
  • Контроллер Push View

Как и в случае удаления контроллера представления, мы также можем вставить новый контроллер представления в стек навигации с помощью append (). Предположим, мы хотим удалить последний контроллер представления и добавить новый контроллер представления в стек, тогда мы сделаем что-то вроде этого

var navVCArray = self.navigationController?.viewControllers
navVCArray?.removeLast()
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let vc = storyboard.instantiateViewController(identifier: "SecondVC")
navVCArray?.append(vc)

2. Настроить панель навигации

Когда мы встраиваем контроллер представления в контроллер навигации из раскадровки или нажимаем контроллер представления, в верхней части контроллера представления появляется белая область. Это панель навигации. Мы можем добавить заголовок, кнопку на панели и выполнить множество настроек.

  • Измените «barTintColor», «tintColor»
self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.barTintColor = .cyan
self.navigationController?.navigationBar.tintColor = .brown
  • Установить setBackgroundImage, shadowImage
navigationController?.navigationBar.setBackgroundImage(UIImage(named: "Banner2"), for: .default)
navigationController?.navigationBar.shadowImage = UIImage(named: "Banner")
  • Установить заголовок и настроить цвет заголовка
self.navigationItem.title = "First VC"
let textAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
navigationController?.navigationBar.titleTextAttributes = textAttributes
  • Установить изображение в качестве заголовка панели навигации
let logo = UIImage(named: "edit")
let imageView = UIImageView(image:logo)
self.navigationItem.titleView = imageView
  • Очистите фон панели навигации
self.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true
self.view.backgroundColor = UIColor.clear
  • Удалите границу навигационной панели
self.navigationBar.setBackgroundImage(UIImage(), for:.default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.layoutIfNeeded()
  • Настройте кнопку возврата. Удалите заголовок кнопки возврата и установите цвет.
navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
navigationItem.backBarButtonItem?.tintColor = UIColor.cgLightBlue
  • Добавление элемента кнопки панели: мы можем добавить leftBarButtonItem и rightBarButtonItem, используя системный значок, текст или настраиваемое изображение. Добавьте leftBarButtonItem с помощью barButtonSystemItem add
navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addTapped))
  • Добавьте rightBarButtonItem с заголовком «Добавить»
navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Add", style: .plain, target: self, action: #selector(addTapped))
  • Создайте кнопку панели с собственной настройкой
let playButton = UIButton(type: .custom)
playButton.setImage(UIImage(named: "plus"), for: .normal)
playButton.addTarget(self, action: #selector(playTapped), for: .touchUpInside)
playButton.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
let barButton = UIBarButtonItem(customView: playButton)
  • Добавить несколько rightBarButtonItem
let add = UIBarButtonItem(barButtonSystemItem: .camera, target: self, action: #selector(addTapped))
let playButton = UIButton(type: .custom)
playButton.setImage(UIImage(named: "plus"), for: .normal)
playButton.addTarget(self, action: #selector(playTapped), for: .touchUpInside)
playButton.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
let barButton = UIBarButtonItem(customView: playButton)
navigationItem.rightBarButtonItems = [add, barButton]

Это все на сегодня. Пожалуйста, проверьте в документации Apple UINavigationController и NavigationBar, чтобы сделать с ними много хаков.

Если вы нашли эту статью полезной, поделитесь ею и похлопайте 👏👏👏
Просмотрите другие мои статьи на Medium и подключите меня к LinkedIn.

Спасибо за чтение и удачного кодирования 🙂