Chapters
Chapters

Chapters

Hide chapters

Catalyst by Tutorials

Third Edition · iOS 15 · Swift 5.6 · Xcode 13.3

Before You Begin

Section 0: 6 chapters
Show chapters Hide chapters

Section I: Making a Great iPad App

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Making a Great Mac App

Section 2: 5 chapters
Show chapters Hide chapters

Section III: Distributing Your App

Section 3: 3 chapters
Show chapters Hide chapters

8. Making Your App Feel at Home on macOS
Written by Andy Pereira

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous section, you learned how to turn your iPhone-only app into a great iPad app. As you now know, this is the first step in making a great Mac app.

In this chapter, you’re going to take things to the next level by making some adjustments that will really make your app shine when running on macOS via Catalyst. Throughout the rest of this section, you’ll go deeper on several other Mac-specific features. When you’re done, you’ll have the makings of a world-class Mac app.

By the end of this chapter, you’ll learn how to:

  • Add a Mac-specific icon.
  • Take advantage of system colors.
  • Enable window-resizing.
  • Enhance your Settings bundle for running on Mac.
  • Make a handful of other minor Mac-related improvements.

Until now, you’ve been test running your app on Mac, but have been focused on iPad. That all changes right now. Ready to finally get your hands dirty with macOS? Fantastic, onward and upward!

It Starts With an App Icon

One of the first things you might have noticed about running Journalyst on macOS in previous chapters is that it uses the same icon on the Mac as it does on iPhone and iPad. While the icon style as of macOS Big Sur has skewed more towards the rounded rectangle style found on iOS, you still may want to tweak your app icon for macOS. Many of Apple’s stock apps now have rounded rectangle icons on macOS, but they are slightly different and distinctly Mac.

Apple has accounted for this fact and given you the ability to include a Mac-specific icon in your app’s bundle. And, it’s a pretty straight-forward task to do just that.

Open the starter project for this chapter, then open Assets.xcassets. Click AppIcon in the assets list, expand the right panel in Xcode if not already visible, then go to the Attributes inspector tab (right-most tab). Finally, check the checkbox next to Mac.

Mac checkbox in the Attributes inspector.
Mac checkbox in the Attributes inspector.

You’ll now see several new slots for Mac icon size variants within the main editor. Inside the starter directory for this chapter, you’ll find a Mac App Icon folder that contains a spiffy new Mac icon in all the required sizes. Drag the appropriately sized icon into each slot to finish.

Set the target device to My Mac, then build and run and you’ll find that your app now looks much more at home on the Mac, with an icon that has a larger book glyph.

AppIcon changed for Mac.
AppIcon changed for Mac.

Adding a Touch of Color

Another thing you may have noticed when running Journalyst on the Mac is that some of the colors seem off. That’s because how iOS uses color differs in some key ways from how it’s used on macOS.

#if targetEnvironment(macCatalyst)
view.backgroundColor = .secondarySystemBackground
#endif

private func setupForMac() {
  // 1
  dateLabel.textColor = .label
  // 2
  dateLabel.highlightedTextColor = .white
  // 3
  timeLabel.textColor = .secondaryLabel
  // 4
  timeLabel.highlightedTextColor = .white
}

#if targetEnvironment(macCatalyst)
setupForMac()
#endif
Colors changed in Mac.
Bofipw kpuljiy id Sox.

A Word on Typography

While there is nothing you need to change to make your app’s text readable on the Mac, it’s worth noting UI content will be scaled down when running on macOS. According to Apple’s guidelines.

Sizing Down Window Resizing

When running on an iPad, you have a few options for how a secondary window is sized. On Mac, freeform window sizing has been a platform feature since Apple borrowed multi-windowing from Xerox PARC in the 1980s. It would be a shame to let that historical bit of borrowing go to waste, so let’s make sure your app supports window resizing properly.

if let scene = scene as? UIWindowScene {
  scene.sizeRestrictions?.minimumSize =
    CGSize(width: 768.0, height: 768.0)
  scene.sizeRestrictions?.maximumSize =
    CGSize(
      width: CGFloat.greatestFiniteMagnitude,
      height: CGFloat.greatestFiniteMagnitude
    )
}

extension Notification.Name {
  static var WindowSizeChanged = Notification.Name(
    "com.yourcompany.Journalyst.WindowSizeChanged"
  )
}

func windowScene(_ windowScene: UIWindowScene,
  didUpdate previousCoordinateSpace: UICoordinateSpace,
  interfaceOrientation previousInterfaceOrientation:
  UIInterfaceOrientation,
  traitCollection previousTraitCollection: UITraitCollection) {
    NotificationCenter.default.post(
      name: .WindowSizeChanged, object: nil
    )
}
Mac window resizes.
Har kugwez pocavis.

Preferential Treatment

In the previous section, you learned how to add a Settings bundle to expose app preferences to the iOS Settings app. By doing so, you also enabled a default Preferences window for your app when running on the Mac, accessible via the Journalyst ▸ Preferences menu item. The out-of-the-box screen looks like this:

Basic preferences window on the Mac.
Buyul rrehesacbep zumdiy uj rku Kat.

Final preferences window on the Mac.
Kakod wkapirosvus jatyid op ntu Qej.

A Few More Odds and Ends

Another thing that may be nagging your better Mac sensibilities is the look of the sidebar. On Mac, sidebars for split views tend to be styled in such a way that they let the content beneath bleed through, applying a blur.

splitViewController.primaryBackgroundStyle = .sidebar

#if targetEnvironment(macCatalyst)
view.backgroundColor = .secondarySystemBackground
collectionView.showsHorizontalScrollIndicator = true
#endif

NotificationCenter.default.addObserver(
  self,
  selector: #selector(handleWindowSizeChanged),
  name: .WindowSizeChanged,
  object: nil
)

@objc func handleWindowSizeChanged() {
  collectionView.reloadData()
}

#if targetEnvironment(macCatalyst)
summaryLabel.isHidden = true
#endif
Finally, a Mac-like app.
Moduzbz, o Liy-huvu udn.

Key Points

  • Including a Mac-specific icon for your Catalyst app is easy and helps make the app feel more at home on the Mac.
  • There are many ways to leverage system colors to improve the styling of your iOS app when it runs on the Mac.
  • You need to consider window resizing when your app runs on the Mac.
  • Mac preferences panels get lots of functionality for free for Catalyst apps, but you can go further with some extra effort.

Where to Go From Here?

In this chapter, you took the first steps towards really making your iOS app shine when running macOS, taking advantage of various styling methods, window resizing, preferences, and more. But there are still some glaring omissions, things you’d expect to see in a great Mac app.

7. Preferences & Settings Bundle
9. The Mouse
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now