コンプリケーションファミリーとは
Apple Watchのコンプリケーションについてざっくりと紹介で紹介したコンプリケーションには、ファミリーと呼ばれるグループがあります。
たとえば、下のユーティリティ文字盤をご覧ください。
このユーティリティ文字盤の左上にある温度と、右上にあるハートマークは、 utilitarianSmall というグループです。
また、画面下にあるパ・リーグウォークという文字列と画像は utilitarianLarge というグループです。
XcodeのメニューのHelp > Developer Documentationを開いてClockKit > CLKComplication > CLKComplicationFamilyを開くと、コンプリケーションファミリーについての詳しい説明を参照できます。
used in the Utility, Mickey, Chronograph, and Simple clock faces のように、どの文字盤で使用されているのかも、ここで調べることができます。
コンプリケーションファミリーの種類
この記事を書いている2018年05月時点では、コンプリケーションファミリーは以下の7つがあります。
- modularSmall
- modularLarge
- utilitarianSmall
- utilitarianSmallFlat
- utilitarianLarge
- circularSmall
- extraLarge
それぞれのコンプリケーションのサンプルと解説は、XcodeのメニューのHelp > Developer Documentationを開いてClockKit > Templatesで参照できます。
コンプリケーションの画像サイズ
コンプリケーションごとに、以下のように画像サイズが決まっています。
| Family | Template | 38mm | 42mm |
|---|---|---|---|
| Circular small | Ring | 40px × 40px (20pt × 20pt @2x) | 44px × 44px (22pt × 22pt @2x) |
| Circular small | Simple | 32px × 32px (16pt × 16pt @2x) | 36px × 36px (18pt × 18pt @2x) |
| Circular small | Stack | 32px max × 14px (16pt × 7pt @2x) | 34px max × 16px (17pt × 8pt @2x) |
| Extra large | Ring | 126px × 126px (63pt × 63pt @2x) | 133px × 133px (66.5pt × 66.5pt @2x) |
| Extra large | Simple | 182px × 182px (91pt × 91pt @2x) | 203px × 203px (101.5pt × 101.5pt @2x) |
| Extra large | Stack | 156px max × 84px (78pt × 42pt @2x) | 174px max × 90px (87pt × 45pt @2x) |
| Modular large | Columns | 22-64px × 22px (11-32pt × 11pt @2x) | 24-74px × 24px (12-37pt × 12pt @2x) |
| Modular large | Standard body | 22-64px × 22px (11-32pt × 11pt @2x) | 24-74px × 24px (12-37pt × 12pt @2x) |
| Modular large | Table | 22-64px × 22px (11-32pt × 11pt @2x) | 24-74px × 24px (12-37pt × 12pt @2x) |
| Modular small | Ring | 36px × 36px (18pt × 18pt @2x) | 38px × 38px (19pt × 19pt @2x) |
| Modular small | Simple | 52px × 52px (26pt × 26pt @2x) | 58px × 58px (29pt × 29pt @2x) |
| Modular small | Stack | 52px max × 28px (26pt × 14pt @2x) | 58px max × 30px (29pt × 15pt @2x) |
| Utility large | Flat | 18-42px × 18px (9-21pt × 9pt @2x) | 20-44px × 20px (10-22pt × 10pt @2x) |
| Utility small | Flat | 18-42px × 18px (9-21pt × 9pt @2x) | 20-44px × 20px (10-22pt × 10pt @2x) |
| Utility small | Ring | 28px × 28px (14pt × 14pt @2x) | 28px × 28px (14pt × 14pt @2x) |
| Utility small | Square | 40px × 40px (20pt × 20pt @2x) | 44px × 44px (22pt × 22pt @2x) |
（ Complication Images - Icons and Images - watchOS Human Interface Guidelines より引用）
コンプリケーションの画像は、アルファチャンネルだけを使用するので注意してください。
また、ヒューマンインターフェースガイドラインには、線の太さを4ピクセル以上にしてくださいと書かれています。コンプリケーションは小さいので、専用にデザインした画像をつくることがオススメです。