Define Views for Regular and Compact Mode (SwiftUI)

Question

Created Jun ’20

Replies 2

Boosts 0

Views 1.3k

Participants 2

In the session it was recommended to use a TabView for Compact mode only on iPadOS. How do I achieve this easily in SwiftUI ?

Answered by Apple Designer in 615133022

You can check out the Fruta sample code project that does just this.
Sample project: https://developer.apple.com/documentation/swiftui/fruta_building_a_feature-rich_app_with_swiftui

Simplified relevant code:

Code Block struct ContentView: View {
		@Environment(\.horizontalSizeClass) private var horizontalSizeClass
		@ViewBuilder 
		var body: some View {
				if horizontalSizeClass == .compact {
						TabView {
							/* Destination views with `.tabItem` modifiers */
						}
				} else {
						NavigationView {
								List {
										/* List full of navigation links for column-based layout */
								}
						}
				}
		}
}

Note that you may want to ensure your state is preserved in your destinations between your tab-based and list-based navigation views.

Boost

Answer 1

Apple Designer OP

Apple

Jun ’20

Accepted Answer

You can check out the Fruta sample code project that does just this.
Sample project: https://developer.apple.com/documentation/swiftui/fruta_building_a_feature-rich_app_with_swiftui

Simplified relevant code:

Code Block struct ContentView: View {
		@Environment(\.horizontalSizeClass) private var horizontalSizeClass
		@ViewBuilder 
		var body: some View {
				if horizontalSizeClass == .compact {
						TabView {
							/* Destination views with `.tabItem` modifiers */
						}
				} else {
						NavigationView {
								List {
										/* List full of navigation links for column-based layout */
								}
						}
				}
		}
}

Note that you may want to ensure your state is preserved in your destinations between your tab-based and list-based navigation views.

4

Answer 2

Apple_Kevin OP

Jun ’20

Thank you :)

0