Build for macOS Big Sur

Build for macOS Big Sur

Platform conditions and sidebar layout for macOS Big Sur app

The sidebar looks good on iOS, to ensure that it’d also work well on macOS, we’ll need Big Sur. In this section, we’ll configure the app in such a way that it works just as well in macOS. This will be done by adding platform conditions. This allows one to show, hide or cusotmize elements based on the OS.

Downloads

To follow this course, you can download the source file, which will help you compare your progress.

Getting Started

To test whether or not what we’ve built so far would work for the Mac app, we’ll need Big Sur. Let’s start by switching from iOS to macOS. Make sure to select MyMac.

Conditionals

After switching, you’ll notice some errors showing up. Let’s fix these!
  • Add in an if statement as follows:

#if os(iOS)
List(0 ..< 20) {item in
 CourseRow()
}
.listStyle(InsetGroupedListStyle())
.navigationTitle("Courses")
#else
content
#endif
  • To be able to use the condition, add the following at the top
@ViewBuilder
var body: some View {
 // Condition
}

Mini Components

Since, we’d like to avoid repeating code in the condition, we’ll be using mini components. To create one, do the following:
  • Right after body, copy the list, delete it from body and paste it in content as follows:

@ViewBuilder
var body: some View {
    // Condition
}
var content: some View {
		// List
		.listStyle(InsetGroupedListStyle())
		.navigationTitle("Courses")
}
  • Then, add in content to the condition like below
#if os(iOS)
content
#else
content
#endif
  • Since, we only want the listStyle to be applied to iOS, remove it from content and place it in the if condition
#if os(iOS)
content
	.listStyle(InsetGroupedListStyle())

Mac App

Resume the preview to take a look at how it looks. If you’d like to interact with the Mac app, click play and then, Bring Forward. Two windows open up, the first one is the preview and the second one is the app.

Frame

Here, we’ll set a minimum size for the content to make it unable to go smaller than that size. In the else block, below content, add in:
.frame(minWidth: 800, minHeight: 600)

Sidebar

Let’s also set a minimum size for the sidebar.
  • Head to Sidebar.swift. Here, we’ll create a mini component in the same manner we did before

@ViewBuilder
var body: some View {
    //remove the list and paste it in content
}
var content: some View {
		// List
		.listStyle(SidebarListStyle())
}
  • Next, let's add in the condition
#if os(iOS)
content
	.navigationTitle("Learn")
#else
content
	.frame(minWidth: 200, idealWidth: 250, maxWidth: 300)
#endif