Mac Appのユーザーインターフェイスイディオムの選択

概要

Mac CatalystでビルドしたMac Appは、UIUserInterfaceIdiom.padまたはUIUserInterfaceIdiom.macのユーザーインターフェイスイディオムで実行できます。Appを実行するイディオムを選択するには、XcodeプロジェクトでMac Catalystをオンにした後、以下のオプションから選択します。

Scale Interface to Match iPad（iPadに合わせてインターフェイスのスケールを調整）

UIUserInterfaceIdiom.padイディオムでAppを実行します。このオプションを選択すると、iPad Appを迅速にMac向けに調整できます。

Optimize Interface for Mac（Mac用にインターフェイスを最適化）

UIUserInterfaceIdiom.macイディオムでAppを実行します。AppKitで利用可能なコントロールと同様の外観および動作にするには、このオプションを選択します。

iPadイディオムで開始

XcodeでMac Catalystをオンにすると、デフォルトで「Scale Interface to Match iPad（iPadに合わせてインターフェイスのスケールを調整）」が選択されます。このオプションを利用すれば、シンプルな方法でiPad AppをMac向けに提供できます。Mac AppはUIUserInterfaceIdiom.padイディオムで実行されます。このイディオムはmacOSに対し、iPadと同様の外観と表示メトリクスを保持したまま、Macのディスプレイ環境に合わせてAppのユーザーインターフェイスのスケールを調整するよう指示します。

Appをテストして、AppKitのコントロールのような外観と動作、およびよりシャープなテキストの表示がAppのユーザー体験を向上させていることを確認できる場合は、「Optimize Interface for Mac（Mac用にインターフェイスを最適化）」を選択してUIUserInterfaceIdiom.macに変更します。ただし、このオプションを選択する際、Appに追加の変更を加える必要がある場合があります。

Macイディオムを利用するためのAppアップデート

「Optimize Interface for Mac（Mac用にインターフェイスを最適化）」を選択することで、Mac AppがUIUserInterfaceIdiom.macユーザーインターフェイスイディオムで実行され、Appのインターフェイスが変わります。一部のコントロールはサイズと外観が変わり、AppKitのコントロールと同じ感覚で操作できるようになります。たとえば、UIButtonはNSButtonと同じ表示になります。

ユーザーインターフェイスイディオムがUIUserInterfaceIdiom.macの場合はシステムによってコントロールのサイズが適切に設定されるので、システムがMacのサイズに合うようにAppのインターフェイスのサイズをさらに調整する必要はありません。スクリーン座標は、AppKitベースのAppのものと同じサイズです。ただし、Appにハードコーディングされたサイズが含まれている場合や、iPad向けにサイズ指定された画像を使っている場合は、Appをアップデートしてサイズを調整する必要がある可能性があります。また、自動レイアウトの制約も調整しなければならないことがあります。

一部のコントロールは、さらにMacとの外観の整合性を高めるための追加設定を提供しています。たとえば、イディオムがUIUserInterfaceIdiom.macの場合、UISwitchをチェックボックスとして表示することができます。そのためには、preferredStyleをUISwitch.Style.checkboxに設定し、titleをチェックボックスのテキストに設定します。

let showFavoritesAtTop = UISwitch()
showFavoritesAtTop.preferredStyle = .checkbox
if traitCollection.userInterfaceIdiom == .mac {
    showFavoritesAtTop.title = "Always show favorite recipes at the top"
}

UIPageControl、UIRefreshControl、およびUIStepperは、Macイディオムで実行されているAppでは利用できません。ビューでこれらのコントロールを表示しようとすると、例外が発生します。ユーザーインターフェイスイディオムがUIUserInterfaceIdiom.macの場合は、これらのコントロールを同様の機能に置き換えます。たとえば、UIRefreshControlは「Refresh」メニュー項目に置き換えます。そのためには、タイトルが「Refresh」のUIKeyCommandオブジェクトとキーボードショートカット「Command + R」を作成し、このコマンドをAppのメニューシステムに追加します。詳しくは、「メニューバーおよびユーザーインターフェイスへのメニューとショートカットの追加」を参照してください。

現在のユーザーインターフェイスイディオムの判断

AppがMacイディオムで実行されているかどうか判断するには、userInterfaceIdiomプロパティの値をUIUserInterfaceIdiom.macと比較します。比較の結果がtrueなら、異なる子ビューを表示するなど、Appの動作をMac向けに調整できます。

let childViewController: UIViewController
if traitCollection.userInterfaceIdiom == .mac {
    childViewController = MacOptimizedChildViewController()
} else {
    childViewController = ChildViewController()
}
addChild(childViewController)
childViewController.view.frame = view.bounds
view.addSubview(childViewController.view)
childViewController.didMove(toParent: self)

優先動作スタイルの設定

Macイディオムを採用する場合、UIButtonやUISliderなどの一部コントロールは、AppKitで同じ機能を持つコントロールと同じように表示されます。しかし、AppでMacイディオムを活用しながら、iPadのコントロールの外観と動作は保持したい場合があるかもしれません。例として、iPad Appでカスタムのサムネール画像を使ってスライダを表示する場合を考えます。Mac CatalystでビルドしたMacバージョンのAppは、ユーザーインターフェイスイディオムがUIUserInterfaceIdiom.macの場合、デフォルトで標準のmacOSスライダを表示します。

iPadバージョンとMacバージョンの両方のAppでスライダの外観を統一したい場合は、スライダのpreferredBehavioralStyleをUIBehavioralStyle.padに設定します。この動作スタイル設定を使用すると、AppがMacイディオムを使用していても、スライダはユーザーインターフェイスイディオムがUIUserInterfaceIdiom.padであるかのように動作します。

ただし、Macイディオムを使用しているAppのインターフェイスサイズはmacOSによって調整されないため、優先される動作スタイルがUIBehavioralStyle.padであっても、サイズの違いに適応させるため、Appをアップデートする必要がある場合があります。たとえば、カスタムのサムネール画像を使ってスライダを表示する場合、Mac Appでは、iPad Appで使用されるスライダとは異なるサイズのスライダ画像が必要になることがあります。

let slider = UISlider()
slider.minimumValue = 0
slider.maximumValue = 1
slider.value = 0.5
slider.preferredBehavioralStyle = .pad


if slider.traitCollection.userInterfaceIdiom == .mac {
    slider.setThumbImage(#imageLiteral(resourceName: "customSliderThumbMac"), for: .normal)
} else {
    slider.setThumbImage(#imageLiteral(resourceName: "customSliderThumb"), for: .normal)
}

UIButtonおよびUISliderの一部のプロパティおよびメソッドは、動作スタイルがUIBehavioralStyle.macの場合にMacイディオムでサポートされず、これらを呼び出すと例外が発生します。たとえば、コントロール要素の状態がnormal以外のボタンにタイトルや画像を設定することや、スライダのサムネール画像、最小／最大トラック画像、色遣い、値画像の設定がこれに該当します。ただし、コントロールの動作スタイルがUIBehavioralStyle.padであれば、Macイディオムでこれらのプロパティおよびメソッドを使用できます。

異なるコードパスの提供

Mac AppがUIUserInterfaceIdiom.padイディオムで実行されている場合でも、Mac Appの外観や動作の変更が必要になることがあります。targetEnvironment()コンパイル条件を使って、ターゲット環境に応じて異なるコードパスを選択します。

たとえば、iPad Appでは削除ボタンの次にアイテムの削除を確認するポップオーバーを表示し、Mac Appではこの確認ステップをアラートとして表示したい場合は、targetEnvironment()条件を追加して、アラートコントローラの優先スタイルを決定します。

let deleteAction = UIAlertAction(title: "Delete", style: .destructive) { (action) in
    if dataStore.delete(recipe) {
        self.recipe = nil
    }
}


let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)


#if targetEnvironment(macCatalyst)
let preferredStyle = UIAlertController.Style.alert
#else
let preferredStyle = UIAlertController.Style.actionSheet
#endif


let alert = UIAlertController(title: "Are you sure you want to delete \(recipe.title)?", message: nil, preferredStyle: preferredStyle)
alert.addAction(deleteAction)
alert.addAction(cancelAction)


if let popoverPresentationController = alert.popoverPresentationController {
    popoverPresentationController.barButtonItem = sender as? UIBarButtonItem
}


present(alert, animated: true, completion: nil)