Источник: Nuances of Programming
Зададим собственное навигационное представление с помощью двух generic-типов. Первый тип — Content, который применяется для передачи представлений внутри кастомного навигационного представления. Второй тип — Destination, который используется для передачи любого целевого представления.
struct CustomNavigationView<Content: View, Destination : View>: View {
}
- Content — универсальный тип, соответствующий представлению View. Он позволяет добавить закрытие, что дает несколько дочерних представлений.
- Destination — универсальный тип, соответствующий представлению View. Он применяется для передачи целевой ссылки.
Константы и переменные
Добавьте в навигационное представление переменные и константы, приведенные ниже. Воспользуйтесь init(), чтобы дополнить содержимое атрибутом @ViewBuilder.
- destination необходимо для передачи целевого представления в кастомное навигационное представление. Если целевое представление отсутствует, задайте ему EmptyView().
- isRoot — логическое значение для создания корневого представления. Оно понадобится для управления прозрачностью кнопки со стрелкой назад.
- isLast — логическое значение для определения последнего представления. В данном руководстве это значение понадобится для управления прозрачностью кнопки с навигационной ссылкой.
- color необходим для настройки цвета панели навигации.
- content обеспечивает закрытие для передачи дочерних представлений в кастомное навигационное представление.
- active — переменная состояния для управления навигационной ссылкой.
- mode — обработчик переменных окружения для отклонения представлений.
Облик навигационной панели
Для панели навигации вы можете воспользоваться HStack с указанием цвета фона или создать пользовательскую форму и разместить поверх элементы панели навигации. В этом руководстве мы создадим форму с очертаниями волны и поместим ее в ZStack, а затем добавим HStack с навигационными элементами.
Тело кастомного представления навигации
В переменную body добавьте GeometryReader внутри NavigationView. GeometryReader понадобится, чтобы поправить размеры элементов пользовательского интерфейса. В GeometryReader добавьте параметр color, который расширит размер представления до размера экрана. Под color добавьте VStack, который будет содержать WaveShape(), созданный нами выше. Вставьте его в ZStack и отрегулируйте рамку. Чтобы удалить безопасную область в верхней части экрана, воспользуйтесь модификатором .edgesIgnoringSafeArea(.top).
В том же VStack разместите константу content с теми модификаторами по вашему выбору. Между всеми элементами в VStack вставьте Spacer(). Это должно переместить кастомную навигационную панель в верхнюю часть экрана, а содержимое — в центр экрана.
NavigationView нужно только для того, чтобы заработала навигационная ссылка. Нам не понадобится панель навигации по умолчанию, которая поставляется вместе с NavigationView. Чтобы удалить ее, добавьте модификатор .navigationBarHidden(true).
Панель навигации
Последнее, что нам нужно, — добавить элементы в навигационную панель. Для этого руководства мы воспользуемся центрированным изображением, которое можно применить в качестве логотипа, и двумя изображениями со стрелками “влево” и “вправо” с жестами касания для навигации между представлениями. Убедитесь, что изображения одной ширины, и добавьте между ними Spacer().
Внутри жеста касания первой стрелки разместите переменную mode, чтобы закрыть текущее представление. Внутри жеста касания второй стрелки подключите переменную active, которую мы определили в начале этого руководства.
Добавьте NavigationLink и передайте его переменным active и destination. Задайте представлению destination модификатор .navigationBarHidden(true).
Содержимое
Создайте несколько представлений для навигации между ними. Внутри каждого создаваемого представления задействуйте CustomNavigationView. В закрытии добавьте содержимое, которое должно отображаться в пользовательском интерфейсе.
Взгляните на пример ниже, чтобы понять, как заполнить параметры.
Чтобы ознакомиться с кодом целиком, нажмите сюда.
Читайте также:
Перевод статьи Sarah: Create a Custom Navigation View in SwiftUI
