見出し画像

Optimize the interface of your Mac Catalyst appをみた #WWDC20

こちらの記事には非公開の情報が含まれているのでApple Developer Programに登録しNDAに合意している方のみ閲覧してください

#WWDC20 4日目です。日本では金曜日なのに明日もセッションがあるのをどうキャッチアップしていこうか悩んでいます。

Mac Catalystアプリを最適化させる前にコンテキストメニューの対応など昨年のセッションを振り返っておきましょう。

画像1

最適化させるとはどういうことか。これまでのCatalystアプリではiPadの時の表示とCatalystの時で77%表示サイズが縮小されていた。

画像2

これかMacに最適化させることで100%表示になる。

画像3

UIButton, UISlider, UISwitch, UIActivityIndicatorなどを利用している場合iOSらしいUIだったがMacに最適化させることでmacOSらしい見た目になる。

画像4

フォントサイズについてもメトリクスを利用していた場合はiPadとはサイズが異なる。例えば.bodyではiPadは17ptだがmacOSでは13ptとなる。

画像5

フォントサイズを直接指定している場合は変わらない。

画像6

Auto Layoutに置いてもSystem spacingサイズがiOSに比べてmacOSの方が広い。

画像7

CatalystアプリをMacに最適化させると変わること一覧。

画像8

サイズ変更だけなら簡単にMacアプリ化可能だが、最適化させた方がよりMacらしいアプリにすることができる。
画像などもMacの大きな画面に対応できるようなスケールに対応させた方が良い。

画像9

Macに最適化する前後の比較。ボタンがよりMacらしくなり、サイズも77%小さかったが100%になり、スペースがより広くなった。画像のサイズも大きく表示し、スライダーが太くなった。

画像10

UIの要素をカスタマイズして利用している場合には中が必要。例えば、最適化によって上記のようにスライダーのカスタマイズが無効化されるケースがある。

デモ


画像11

最適化を実行するにはOptimize Interface for Macを選択する。

画像12

右端のTimersボタンがMacらしいUIになり、お気に入りを示すハートのボタンも大きくなった。

画像13

セルのサイズ100で指定しているとMacでは広すぎるので80に指定する必要がある。

画像14

AssetもMac用の物を用意した方が良い。

画像15

レシピを新規追加する画面だが、Choose PhotoボタンがMacらしくなったがnavigationBarが表示されていることが相応しくない。

画像16

Macの場合にはnavigationBarを非表示にする処理を入れる。

画像17

StoryboardでMac Idiomを選択する。

画像19

直接フォントサイズを指定している場合は

画像18

Text Styleを選択することをお勧めする(今回はBody)

画像20

navigationBarを非表示にするので期表示では非表示にして、Mac Idiomの場合は画面内にボタンを表示する。

画像21

Vertical SpacingではなくOptionキーをクリックしながらVertical Standard Spacingを選択する。

画像22

他の箇所が制約の不整合でエラーが表示されるのでiPad表示用の優先度(Priority)を変更する。

画像23

このようにMacらしい表示になった。

画像24

コードでMacに最適化する場合はこのようにハンドリングする。

// Idiom vs conditional compilation block
if traitCollection.userInterfaceIdiom == .mac {
   // "Optimize Interface for Mac" specific code
}
 #if targetEnvironment(macCatalyst)
   // Mac Catalyst specific code #endif

if traitCollection.userInterfaceIdiom == .mac {
   // "Optimize Interface for Mac" specific code
} else if traitCollection.userInterfaceIdiom == .pad {
   #if targetEnvironment(macCatalyst)
       // Mac Catalyst specific code
   #else
       // iPad specific code
   #endif
}

SwiftUI

SwiftUIを利用している場合でMacに最適化する方法。

画像25

 新たにGroupBoxというUIが追加された。 

画像26

SwitchもMacではチェックボックスになる。

画像27

ボタンもMacらしく表示される。

画像28

Date PickerもMacらしい表示に。初期設定では.compactな表示になるが変更も可能。

画像29

PickerもMacらしい表示に。

画像30

ボタンのカスタマイズも可能。

画像31

SwiftUIで作成したこのような画面も

画像33

このようにMacでも違和感のない表示になった。

画像32

まとめ

Macに最適化させることでより自然なCatalystアプリが作ることができるようになりました。ただ、フォントサイズをシステムが用意した物を利用したり、navigationBarの対応など地味に大変なことが予想されます...カスタムボタンを使っていることも多いのでその辺りがどのように変更されるのか個人アプリで色々試してみたいと思いました。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
🙌🏻
8

こちらでもピックアップされています

WWDC 20
WWDC 20
  • 35本

WWDC 20に関するnoteを発見次第まとめます。 有志で手伝ってくれる方募集。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。