Chapters
Chapters

Chapters

Hide chapters

Catalyst by Tutorials

First Edition · iOS 13 · Swift 5.1 · Xcode 11

Before You Begin

Section 0: 3 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 Nick Bonatsakis

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 will have learned how to:

  • Add a Mac-specific icon.
  • Take advantage of system colors and support dark mode.
  • 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 its rounded rectangle icon looks out of place in the macOS dock. Mac icons tend to lack uniformity, but even the ones that adhere to a formula of sorts are circular, including most of Apple’s Catalyst apps.

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, then open Assets.xcassets. Click on 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, tick the All checkbox next to Mac.

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 up.

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, complete with a circular icon.

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

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.raywenderlich.Journalyst.WindowSizeChanged")
}

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

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:

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

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