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

概要

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

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

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

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

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

iPadイディオムで開始

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

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

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

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

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

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

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

アプリがMacイディオムで実行されているかどうか判断するには、userInterfaceIdiomプロパティの値をUIUserInterfaceIdiom.macと比較します。比較の結果がtrueなら、異なる子ビューを表示するなど、アプリの動作を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で同じ機能を持つコントロールと同じように表示されます。しかし、アプリでMacイディオムを活用しながら、iPadのコントロールの外観と動作は保持したい場合があるかもしれません。例として、iPadアプリでカスタムのサムネール画像を使ってスライダを表示する場合を考えます。Mac CatalystでビルドしたMacバージョンのアプリは、ユーザーインターフェイスイディオムがUIUserInterfaceIdiom.macの場合、デフォルトで標準のmacOSスライダを表示します。

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

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

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

たとえば、iPadアプリでは削除ボタンの次にアイテムの削除を確認するポップオーバーを表示し、Macアプリではこの確認ステップをアラートとして表示したい場合は、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)