Butterfly XML
  • Home
  • Privacy Policy
  • Contact Us
  • Guest Post – Write For Us
  • Sitemap
Butterfly XML

Navigation Styles for Multiplatform Apps

  • Zaraki Kenpachi
  • September 22, 2021

As the world becomes more digital and people spend more time on their phones, developers are finding new ways to present information in order to keep users engaged. This article discusses how navigation styles can be used in multi-platform apps to make them feel like they belong on each platform.

The doublecolumnnavigationviewstyle is a navigation style that allows for apps to be displayed with two columns.

In a multiplatform project, show how to utilize the Sidebar, SplitView, TabView, and Navigation styles.

The following is the fundamental type of navigation utilizing a NavigationView, List, and NavigationLink:

var colors: import SwiftUI struct ContentView: View import SwiftUI struct ContentView: View import SwiftUI struct ContentView: View import SwiftUI struct Content [Color] = [.red,.green,.blue,.yellow,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, .purple] body variable: some View NavigationView List ForEach NavigationView List ForEach NavigationView List ForEach NavigationView List ForEach NavigationView List ForEach Navigation (1…5, id: .self) val in NavigationLink(destination: ViewLevel2(linkText: String(val), color: colors[val-1]), val in NavigationLink(destination: ViewLevel2(linkText: String(val), color: colors[val-1]) .font(.largeTitle).foregroundColor(colors[val-1]).padding() Text(“Link(val)”).font(.largeTitle).foregroundColor(colors[val-1]) View var link struct ViewLevel2: “Test” is the text. color: var .black color body variable: some View VStack is an acronym for Virtual Stack. .font(.largeTitle).padding Text(“ViewLevel2”) () .font(.title).foreground Text(“Text: (linkText)”) COLOR(COLOR) COLOR(COLOR) COLOR(COLOR) COLOR(COLOR

The.navigationViewStyle() modification may be used to change the default behavior of NavigationView. You may choose from the following options:

  • Only one view is shown at a time using StackNavigationViewStyle().
  • The DoubleColumnNavigationViewStyle() method shows two views in a “split view” format.

It’s worth noting that SwiftUI lacks a direct counterpart of UIKit’s UISplitViewController. NavigationView, on the other hand, enables you to accomplish a similar result.

NavigationView.navigationViewStyle(Stack) NavigationView.navigationViewStyle(Stack) NavigationView.navigationViewStyle(Stack) NavigationView. “Single View” (NavigationViewStyle()) .navigationViewStyle(DoubleColumn) NavigationView.navigationViewStyle(DoubleColumn) NavigationView.navigationViewStyle(DoubleColumn “Split View” is the NavigationViewStyle() method.

The app’s appearance on different devices and orientations is as follows:

Portrait mode on iOS (iPhone 12 Pro Max)

Default settings (StackNavigationViewStyle) DoubleColumnNavigationViewStyle StackNavigationViewStyle
Navigation-Styles-for-Multiplatform-Apps The default style is the same. The default style is the same.

Landscape (iOS) (iPhone 12 Pro Max)

Default settings (DoubleColumnNavigationViewStyle) DoubleColumnNavigationViewStyle StackNavigationViewStyle
1632047976_280_Navigation-Styles-for-Multiplatform-Apps The default style is the same. 1632047977_619_Navigation-Styles-for-Multiplatform-Apps

Portrait mode for iPadOS (iPad Pro 12.9′′)

Default settings (DoubleColumnNavigationViewStyle) DoubleColumnNavigationViewStyle StackNavigationViewStyle
1632047978_618_Navigation-Styles-for-Multiplatform-Apps The default style is the same. 1632047979_404_Navigation-Styles-for-Multiplatform-Apps

iPadOS (iPad Pro 12.9′′) in landscape mode

Default settings (DoubleColumnNavigationViewStyle) DoubleColumnNavigationViewStyle StackNavigationViewStyle
1632047980_205_Navigation-Styles-for-Multiplatform-Apps The default style is the same. 1632047981_619_Navigation-Styles-for-Multiplatform-Apps
Note the button that hides the navigation.    

macOS, tvOS, and watchOS are Apple’s operating systems.


For bigger devices, sidebars are an essential element of the UI design (available for iOS, iPadOS and macOS). Check out https://developer.apple.com/design/human-interface-guidelines/ios/bars/sidebars/ for more information.

The.listStyle(SidebarListStyle()) modification on a List may be used to quickly create a sidebar:

var body: some struct SidebarView: View Check out the list { “What’s New,” systemImage: “wand.and.stars”) Label(“What’s New,” systemImage: “wand.and.stars”) Labeling (“Messages”, systemImage: “message”) Labeling (“List”, systemImage: “list.bullet.rectangle”) Text(“Personal”)) section(header) Labeling (“Settings”, systemImage: “gearshape”) Labeling (“Account”, systemImage: “person.crop.circle”) Section(header: Text(“Very Personal SubMenu”)) section(header: Text(“Very Personal SubMenu”)) section(header: Text( Labeling (“Secret Stuff”, systemImage: “text.badge.plus”) Label(“Very Secret Stuff”, systemImage: “lasso.sparkles”),.listStyle(SidebarListStyle()),.navigationTitle(“My Sidebar”),.listStyle(SidebarListStyle()),.navigationTitle(“My Sidebar”),.navigationTitle(“My Sidebar”),.navigationTitle(“My Sidebar”),.navigationTitle(“

You may add section headers to a sidebar so that the user can collapse and extend parts using disclosure indicators.

1632047981_482_Navigation-Styles-for-Multiplatform-Apps

To make our app function with a sidebar, we just need to make a few minor modifications. To begin, set SidebarView as the default view:

SwiftUI SplitViewNavDemoApp: App @main struct SwiftUI SplitViewNavDemoApp: var body: some Scene WindowGroup / ContentView() SidebarView() var body: some var body: some var body: some var body: some var body: some var body: some var body: some var body: some var body: some var

Now we’ll change SidebarView to specify the app’s NavigationView. Take note of how we transition from ListView to NavigationView using a NavigationView:

SidebarView is a struct that represents a view in a sidebar. var body: a few View NavViewList is a navigation view that displays a list of items. (destination: Text(“What’s New”)) NavigationLink(destination: Text(“What’s New”)) label(“What’s New”, systemImage: “wand.and.stars”) label(“What’s New”, systemImage: “wand.and.stars”) label(“What’s New”, system destination: Text(“Messages”)) NavigationLink(destination: Text(“Messages”)) NavigationLink(destination: Text(“Messages Label(“Messages”, systemImage: “message”) Label(“Messages”, systemImage: “message”) Label(“Messages”, systemImage: “message”) Label (destination: ListView()) NavigationLink Label(“List”, systemImage: “list.bullet.rectangle”) Label(“List”, systemImage: “list.bullet.rectangle”) Label(“List”, systemImage: “list.bullet.rect Text(“Personal”)) section(header) Labeling (“Settings”, systemImage: “gearshape”) Labeling (“Account”, systemImage: “person.crop.circle”) Section(header: Text(“Very Personal SubMenu”)) section(header: Text(“Very Personal SubMenu”)) section(header: Text( .listStyle(SidebarListStyle()).navigationTitle(“My Sidebar”) Label(“Secret Stuff”, systemImage: “text.badge.plus”) Label(“Very Secret Stuff”, systemImage: “lasso.sparkles”) ListView is a struct that allows you to see a list of items. var colors: [Color] = [.red,.green,.blue,.yellow,.green,.blue,.yellow,.yellow,.yellow,.yellow,.yellow,.yellow,.yellow .purple] body variable: some View ForEach in a List (1…5, id: .self) val in NavigationLink(destination: ViewLevel2(linkText: String(val), color: colors[val-1]) Text(“Link(val)”).font(.largeTitle).foregroundColor(colors[val-1]).padding() val in NavigationLink(destination: ViewLevel2(linkText: String(val), color: colors[val-1]) val in NavigationLink(destination: ViewLevel2(linkTex

ViewLevel2 is the destination of all navigation links in ListView.

As a result, we have the following logical arrangement:

Navigation-Styles-for-Multiplatform-Apps

The following is the appearance of our app with a sidebar:

Portrait mode on iOS (iPhone 12 Pro Max)

1632047983_992_Navigation-Styles-for-Multiplatform-Apps

Landscape (iOS) (iPhone 12 Pro Max)

1632047985_846_Navigation-Styles-for-Multiplatform-Apps

Portrait mode for iPadOS (iPad Pro 12.9′′)

1632047985_99_Navigation-Styles-for-Multiplatform-Apps

iPadOS (iPad Pro 12.9′′) in landscape mode

1632047986_956_Navigation-Styles-for-Multiplatform-Apps

We may use a TabbedPageView to provide the user with a set of pages (or tabs):

var body: some struct TabbedPageView: View View Text(“Hello, world!”).font TabView VStack (.largeTitle). Image(systemName: “face.smiling.fill”) padding() resizable() is a function that allows you to resize your window. frame(150 x 150 px, 150 px, 150 px, 150 px, 150 px, 150 p foregroundColor(.yellow) is the color of the foreground. tabItem Text(“Tab1”) Text(“Hello, world2!”).tabItem Text(“Tab2”) Text(“Hello, world3!”).tabItem Text(“Tab3”) Text(“Hello, world4″!”).tabItem Text(“Tab4”).tabViewStyle(DefaultTabViewStyle()) / To show tabs, use PageTabViewStyle() or DefaultTa indexViewStyle(PageIndexViewStyle(backgroundDisplayMode:.always)) indexViewStyle(PageIndexViewStyle(backgroundDisplayMode:.always)) indexViewStyle(PageIndexViewStyle(backgroundDisplayMode

Pages:

1632047987_483_Navigation-Styles-for-Multiplatform-Apps

Tabs:

1632047988_97_Navigation-Styles-for-Multiplatform-Apps

Use the following code to integrate it with our sidebar app:

var body: some struct SidebarView: View : : : : : : : : : : : : : : : (destination: TabbedPageView()) NavigationLink Label(“Messages”, systemImage: “message”):::::::::::::::::::::::::::::::::

When you run the program, you get the following results:

Portrait mode on iOS (iPhone 12 Pro Max)

1632047989_128_Navigation-Styles-for-Multiplatform-Apps

Landscape (iOS) (iPhone 12 Pro Max)

1632047989_959_Navigation-Styles-for-Multiplatform-Apps

macOS

TabView on macOS does not support any of these features. DefaultTabViewStyle() or tabViewStyle(DefaultTabViewStyle()) such that just tabs are displayed: indexViewStyle(PageIndexViewStyle(backgroundDisplayMode:.always))

1632047990_191_Navigation-Styles-for-Multiplatform-Apps

GitHub

https://github.com/russell-archer/SwiftUI-SplitViewNavDemo

The parts of an app design are the different styles that can be used when developing a multi-platform app. The most common styles are the iOS style and the Android style.

Related Tags

  • cross platform design system
  • material design cross platform
  • google material design
  • material design navigation
  • material design bottom navigation
Zaraki Kenpachi

Previous Article

Lazy and fluent syntactic sugar of Kotlin for initializing Android lifecycle-aware property

  • Zaraki Kenpachi
  • September 21, 2021
View Post
Next Article

How to Install BetterDiscord Theme and Plugin?

  • Zaraki Kenpachi
  • September 28, 2021
View Post
Table of Contents
  1. Portrait mode on iOS (iPhone 12 Pro Max)
  2. Landscape (iOS) (iPhone 12 Pro Max)
  3. Portrait mode for iPadOS (iPad Pro 12.9′′)
  4. iPadOS (iPad Pro 12.9′′) in landscape mode
  5. macOS, tvOS, and watchOS are Apple’s operating systems.
  6. Portrait mode on iOS (iPhone 12 Pro Max)
  7. Landscape (iOS) (iPhone 12 Pro Max)
  8. Portrait mode for iPadOS (iPad Pro 12.9′′)
  9. iPadOS (iPad Pro 12.9′′) in landscape mode
  10. Portrait mode on iOS (iPhone 12 Pro Max)
  11. Landscape (iOS) (iPhone 12 Pro Max)
  12. macOS
  13. GitHub
Featured
  • 1
    The Best Ways to Increase Income in Your HVAC Business
    • January 17, 2023
  • 2
    How Modern Tech Is Impacting the Casino Industry and Games?
    • December 2, 2022
  • 3
    5 Mistakes to Avoid When Buying Research Chemicals Online
    • October 17, 2022
  • 4
    5 Cheapest Countries in the World to Mine Bitcoin 2023
    • October 17, 2022
  • 5
    Does Chiptuning Reduce Fuel Consumption – 2023 Guide
    • October 17, 2022
Must Read
  • 1
    How To Change Boot Order In Windows 10
  • 2
    How to Host a Limo Party: 4 Things to Remember
  • 3
    Best Screen Mirroring Apps for Android [Latest 2023]
Butterfly XML
  • Home
  • Privacy Policy
  • Contact Us
  • Guest Post – Write For Us
  • Sitemap

Input your search keywords and press Enter.