Search code examples
swiftuinavigationbarswift5

Editor nav bar between option in swift 5

I'd like to create an editor regarding musical sheet app and i've seen the navigation bar used from microsoft word to navigate between different nav - Home - Insert - Draw ... I'd like to know how can I implement something like it, if I need to use UINavigationBar and then style it or exist something already implemented; i've already checked on iOS Human Interface Guidelines but I haven't found it, so before I start to create personal object, i'd like to know if it already exists. After this, I'd like to know how create the sub navigation bar and the if exist some component included in the popover tabs or it's just a set of UIView. Here is two screen of what i'm talking about, please pay attention on navigation bar used to change the subheader view: enter image description here

enter image description here

Solution

  • Custom UIView Subclasses

    The navigation bar, sub navigation bar, and view in popover are likely all custom UIView subclasses.

    Navigation Bar:

    Left aligning and right aligning bar button items (e.g. undo, redo buttons) are easy with UINavigationItem because of the rightBarButtonItems and leftBarButtonItems setters. It is not however easy to center buttons and have very custom color enabled logic (e.g. white background that goes to bottom of bar when "Home" is selected".

    The custom UIView subclass could be a horizontal stack view with many UIButton. Some with icons and some with text. There are other ways to lay this out.

    Sub Navigation Bar

    The "sub navigation bar" is very custom and is a subclass of UIView. It has dynamic content. Many of the views inside here are native to UIKit (e.g. UISwitch for "Draw with Touch").

    Popover View

    The view inside the popover is also a custom UIView subclass, but the popover itself is included in UIKit. This is done using a UIPopoverPresentationController