Essential Preparations for Embracing Mac Catalyst: A Must-Read Guide

Imagine Mac Catalyst as a technological wormhole, a direct pathway that effortlessly traverses galaxies, allowing iOS and iPadOS applications to seamlessly run on Mac systems. The process of crafting a native macOS application can be an intricate and time-consuming , demanding substantial research and effort. However, Mac Catalyst serves as a game-changing tool that considerably streamlines this journey.

In this blog, we’ll be looking at the little things that might cause problems while using Mac Catalyst and, most importantly, figuring out how to deal with them.

ToolBar:

Customising the toolbar can be a bit tricky in Mac Catalyst. But don’t worry, there are two ways to tackle this issue.

First, you can ditch the regular toolbar and create a custom version right in the main interface file (xib) of your app. This might involve a bit of creative tinkering, but it gives you more control over how the toolbar looks and behaves.

On the other hand, you can opt for the built-in toolbar that comes with Mac Catalyst. It’s not super flexible in terms of customisation, but it gets the job done without too much hassle.

Ultimately, the choice depends on your preferences and how much control you want over the toolbar’s appearance. Both methods have their pros and cons, so you can pick the one that fits your needs best.

Menu bar :

When it comes to Mac Catalyst, the menu bar might pose a challenge. This is because only a limited number of NSElements can be utilized within a UIKit project. Therefore, if your aim is to develop a menu bar app, it’s advisable to consider working with macOS instead.

Font:

Working with custom fonts in Mac Catalyst can bring about its own set of challenges. When scaling comes into play, you might encounter some unexpected font size variations.

For instance, if you choose the “scaled from iPad” option, the fonts could appear smaller than what you’ve originally set. On the other hand, if you go for the “optimised version,” the fonts might end up looking larger than what you’ve intended.

This font scaling issue can impact the visual consistency of your app. It’s important to be aware of this behaviour when utilising custom fonts in Mac Catalyst and to thoroughly test and adjust your font choices to ensure they appear as intended on various devices and scaling settings.

NSElements we will be able to use in Mac Catalyst:

In Mac Catalyst, the range of NSElements available for use is limited. According to Apple’s guidelines, you can only work with NSElements that are specifically marked as “available in Mac Catalyst.”

Tool tip :

Tool tips play a significant role in providing your app with a native touch. Thankfully, UIKit comes to the rescue here. Many UI elements come with built-in support for tool tips, enhancing the user experience by offering helpful hints or descriptions when users hover over or interact with specific elements.

 let button = UIButton()
 button.toolTip = "Click to add the item to your cart. Your cart is empty.

While many UIViews benefit from built-in tooltip support, some may lack this feature. One such example is UILabel, which doesn’t inherently offer tooltip functionality. However, you can manually introduce tooltips to these elements using a handy tool called UIToolTipInteraction.

let label = UILabel()
label.text = "Label with a tooltip"

let tooltipInteraction = UIToolTipInteraction(defaultToolTip: "The label's tooltip.")
label.addInteraction(tooltipInteraction)

Adding options under File menu:

We can add useful actions by adding menus. New actions can be added under “File” menu or new menu can be created using UIMenuSystem.
To know more about how to add menus, refer here.

Hiding the default title:

By default, Mac apps built with Mac Catalyst display a title top of their windows.
By default, Mac apps built with Mac Catalyst display a title bar across the top of their windows. A horizontal line separates the title bar from the content of the window.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    
    guard let windowScene = (scene as? UIWindowScene) else { return }

    #if targetEnvironment(macCatalyst)
    if let titlebar = windowScene.titlebar {
        titlebar.titleVisibility = .hidden
        titlebar.toolbar = nil
    }
    #endif
}

Run a file only for iOS:

When dealing with files that you specifically want to run exclusively on iOS or iPadOS, there’s a straightforward method to ensure this distinction. While one approach involves repeatedly checking the device type to avoid running the file on macOS, it can indeed become cumbersome.

A more efficient way to achieve this goal is through the “Build phases” section within your project settings. By utilising this feature, you can easily configure your project to execute the file solely on iOS and iPadOS, while automatically excluding it from the Mac Catalyst environment.

Usage of PopSheet:

When it comes to presenting controllers in your app, what works seamlessly on iOS and iPadOS might not translate well to the macOS environment. The user experience could feel cumbersome or out of place due to the distinct design principles. To ensure a native and harmonious look, the concept of “PopSheet” comes into play.

PopSheet proves invaluable when you’re aiming to display views in a way that aligns with the Mac’s user interface expectations. Rather than directly presenting controllers, PopSheet offers a solution that enhances the visual appeal and user experience on macOS.

 let popSheet = NSPopover()
        let viewController = PopSheetViewController()
        popSheet.contentViewController = viewController
        popSheet.behavior = .transient
        popSheet.show(relativeTo: sender.bounds, of: sender, preferredEdge: .maxY)

Smart way to handle constraints, colour between the platforms: As we are building a mac catalyst app, the main motive is to reuse the code as much as we can and also able to run that code in all the 3 platforms(iphone, ipad, mac). Apparently there will be few edge cases in the UI to be handled separately for mac, and this might be tiring and lengthy process as you would be forced to handle constraints to adapt for mac because of the screen size. Few pages might need this because of the design requirement. Hence to ease this process, xcode provides a brilliant multi-handling contsraint in all the xibs.

Inside the attribute inspector, there is a + icon and when you click it, you can a option called “Idiom”. When you select mac catalyst, you will be provided with a separate textbox to add constraint separately for mac build.

After adding the idiom, you can enter the value to be handled for mac
In the below picture , constant value 68 runs for ios and ipadOS and value 50 runs for mac catalyst.

Similarly, colours can also be specifically needed for mac, or ipad. In xcode, colour assets provides support to handle colour for each platform.
Select the colour asset which you want to add unique colour for each platform and on the right side under Attribute inspector, you can see the Devices option available.

By default Universal is selected. When you select ipad and mac, you will get separate colour asset for those and unique colour can be added. This way much of the time is saved.

When you’re creating an app for three different platforms using the same code, it’s important to stick to the standard views and elements. Avoid customising things too much, as this could lead to problems in other platforms or cause extra work later on.

Instead, focus on using the built-in views and following the natural design and behavior that users expect on each platform. This way, your app will smoothly adjust to work well on iOS, iPadOS, and Mac Catalyst. By keeping things native, you reduce the chances of running into issues and save time on fixing things that might break in different platforms.

In a nutshell, using the regular views and design guidelines specific to each platform is a smart way to create an app that works seamlessly across all of them. It ensures a smoother development process and a consistent experience for users.

Hope this article was helpful 😄.

Follow me on twitter : https://twitter.com/iamafsana_
Buy me coffee

Sayonara!! 😃