NavigationViewKit is a NavigationView extension library for SwiftUI.
For more detailed documentation and demo, please visit 用NavigationViewKit增强SwiftUI的导航视图
The extension follows several principles.
- Non-disruptive
Any new feature does not affect the native functionality provided by Swiftui, especially if it does not affect the performance of Toolbar, NavigationLink in NavigationView
-
Be as easy to use as possible
Add new features with minimal code
-
SwiftUI native style
Extensions should be called in the same way as the native SwiftUI as much as possible
One of the biggest complaints from developers about NavigationView is that it does not support a convenient means of returning to the root view. There are two commonly used solutions.
-
Repackage the
UINavigationController
A good wrapper can indeed use the many functions provided by
UINavigationController
, but it is very easy to conflict with the native methods in SwiftUI, so you can't have both. -
Use procedural `NavigationLink
Return the programmed
NavigationLink
(usuallyisActive
) by undoing the root view. This means will limit the variety ofNavigationLink
options, plus is not conducive to implementation from non-view code.
NavigationViewManager
is the navigation view manager provided in NavigationViewKit, it provides the following functions.
- Can manage all the NavigationView in the application
- Support to return the root view directly from any view under NavigationView by code
- Jump to a new view via code from any view under NavigationView (no need to describe
NavigationLink
in the view) - Return to the root view via
NotificatiionCenter
for any NavigationView in the specified application - By
NotificatiionCenter
, let any NavigationView in the application jump to the new view - Support transition animation on and off
Since NavigationgViewManager
supports multiple navigation views management, you need to register for each managed navigation view.
import NavigationViewKit
NavigationView {
List(0..<10) { _ in
NavigationLink("abc", destination: DetailView())
}
}
.navigationViewManager(for: "nv1", afterBackDo: {print("back to root") })
navigationViewManager
is a View extension, defined as follows.
extension View {
public func navigationViewManager(for tag: String, afterBackDo cleanAction: @escaping () -> Void = {}) -> some View
}
for
is the name (or tag) of the currently registered NavigationView
, afterBackDo
is the code segment executed when going to the root view.
The tag of each managed NavigationView
in the application needs to be unique.
In any sub-view of a registered NavigationView
, the return to the root view can be achieved with the following code.
@Environment(\.navigationManager) var nvmanager
Button("back to root view") {
nvmanager.wrappedValue.popToRoot(tag:"nv1"){
print("other back")
}
}
popToRoot
is defined as follows.
func popToRoot(tag: String, animated: Bool = true, action: @escaping () -> Void = {})
tag
is the registered Tag of the current NavigationView, animated
sets whether to show the transition animation when returning to the root view, and action
is the further after-back code segment. This code will be executed after the registration code segment (afterBackDo
) and is mainly used to pass the data in the current view.
This can be done via the
@Environment(\.currentNaviationViewName) var tag
Get the registered Tag of the current NavigationView, so that the view can be reused in different NavigtionViews.
struct DetailView: View {
@Environment(\.navigationManager) var nvmanager
@Environment(\.currentNaviationViewName) var tag
var body: some View {
VStack {
Button("back to root view") {
if let tag = tag {
nvmanager.wrappedValue.popToRoot(tag:tag,animated: false) {
print("other back")
}
}
}
}
}
}
Since the main use of NavigationViewManager in my app is to handle Deep Link
, the vast majority of the time it is not called in the view code. So NavigationViewManager provides a similar method based on NotificationCenter
.
In the code using :
let backToRootItem = NavigationViewManager.BackToRootItem(tag: "nv1", animated: false, action: {})
NotificationCenter.default.post(name: .NavigationViewManagerBackToRoot, object: backToRootItem)
Returns the specified NavigationView to the root view.
Use :
@Environment(\.navigationManager) var nvmanager
Button("go to new View"){
nvmanager.wrappedValue.pushView(tag:"nv1",animated: true){
Text("New View")
.navigationTitle("new view")
}
}
The definition of pushView
is as follows.
func pushView<V: View>(tag: String, animated: Bool = true, @ViewBuilder view: () -> V)
tag
is the registered Tag of NavigationView, animation
sets whether to show the transition animation, view
is the new view. The view supports all definitions native to SwiftUI, such as toolbar
, navigationTitle
, etc.
At the moment, when transition animation is enabled, title and toolbar will be shown after the transition animation, so the view is a little bit short. I will try to fix it in the future.
In the code.
let pushViewItem = NavigationViewManager.PushViewItem(tag: "nv1", animated: false) {
AnyView(
Text("New View")
.navigationTitle("第四级视图")
)
}
NotificationCenter.default.post(name:.NavigationViewManagerPushView, object: pushViewItem)
tag
is the registered Tag of NavigationView, animation
sets whether to show the transition animation, view
is the new view. The view supports all definitions native to SwiftUI, such as toolbar
, navigationTitle
, etc.
At the moment, when transition animation is enabled, title and toolbar will be shown after the transition animation, so the view is a little bit short. I will try to fix it in the future.
In the code.
DoubleColoumnJustForPadNavigationViewStyle
is a modified version of DoubleColoumnNavigationViewStyle
, its purpose is to improve the performance of DoubleColoumnNavigationViewStyle
in landscape on iPhone Max when iPhone and iPad use the same set of code, and different from other iPhone models.
When iPhone Max is in landscape, the NavigationView will behave like iPad with double columns, which makes the application behave inconsistently on different iPhones.
When using DoubleColoumnJustForPadNavigationViewStyle
, iPhone Max will still show StackNavigationViewStyle
in landscape.
Usage.
NavigationView{
...
}
.navigationViewStyle(DoubleColoumnJustForPadNavigationViewStyle())
It can be used directly under swift 5.5
.navigationViewStyle(.columnsForPad)
The current DoubleColumnNavigationViewStyle
behaves differently on iPad in both horizontal and vertical screens. When the screen is vertical, the left column is hidden by default, making it easy for new users to get confused.
TipOnceDoubleColumnNavigationViewStyle
will show the left column above the right column to remind the user when the iPad is in vertical screen for the first time. This reminder will only happen once. If you rotate the orientation after the reminder, the reminder will not be triggered again when you enter the vertical screen again.
NavigationView{
...
}
.navigationViewStyle(TipOnceDoubleColumnNavigationViewStyle())
It can be used directly under swift 5.5
.navigationViewStyle(.tipColumns)
In Health Notes, I want the iPad version to always keep two columns displayed no matter in landscape or portrait, and the left column cannot be hidden.
I previously used HStack set of two NavigationView to achieve this effect
Now, the above effect can be easily achieved by FixDoubleColumnNavigationViewStyle
in NavigationViewKit directly.
NavigationView{
...
}
.navigationViewStyle(FixDoubleColumnNavigationViewStyle(widthForLandscape: 350, widthForPortrait:250))
And you can set the left column width separately for both landscape and portrait states.
For more detailed documentation and demo, please visit My Blog