Обзор
Контроллер навигации - это контейнерное представление, которое может управлять навигацией по иерархическому содержимому. Контроллер навигации управляет текущим отображаемым экраном с помощью стека навигации. Стек навигации может иметь n контроллеров представления. Самый нижний контроллер представления в этом стеке является контроллером корневого представления, а остальные - контроллерами дочернего представления. Одновременно виден только один дочерний контроллер представления, который является самым верхним контроллером представления в иерархии навигации. Контроллер представления может добавлять или удалять из стека, используя операции push и pop.
В этом уроке мы узнаем
- Как встроить контроллеры представления в контроллер навигации?
- Способы нажимать, выталкивать из стека навигации?
- Как использовать стек навигации как массив?
- Настроить панель навигации? Итак, приступим
Это руководство написано с использованием 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.
Спасибо за чтение и удачного кодирования 🙂