Home iOS & Swift Books Catalyst by Tutorials

8
Making Your App Feel at Home on macOS Written by Nick Bonatsakis

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

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.
  • 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, 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, check the 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, with an icon that has a larger book glyph.

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.

9. The Mouse 7. Preferences & Settings Bundle

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.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99