[WatchOS] Complication Family & Templates

Watch Complications HIG 랑 개발문서랑 왔다갔다 보기 힘들어서 정리 ✍️

Complication Family와 Templates가 UI와 코드로 어떻게 표현되는 지 살펴보겠습니다. 

 

[1] Circular Small 

 

이 Family는 코드 상으로 CLKComplicationFamily enum 중, circularSmall 에 해당됩니다. 

 

# Template

 

이 Family에 해당하는 templates들은 아래와 같습니다. 

 

 

위 템플릿들이 코드상으로 어떻게 표현되는 지는 Circular Small 에 나와있습니다. 

 

 

[2] Modular Small

 

 

이 Family는 코드 상으로 CLKComplicationFamily.modularSmall 에 해당됩니다. 

 

# Template

 

이 Family에 들어갈 수 있는 templates들은 아래와 같습니다.

 

 

위 템플릿들이 코드상으로 어떻게 표현되는 지는 Modular Small 에 나와있습니다. 

 

 

[3] Modular Large

이 Family는 코드상으로 CLKComplicationFamily.modularLarge 에 해당됩니다.

 

 

# Template

 

해당되는 템플릿은 아래와 같습니다. 

 

 

코드 상으로는 Modular Large 를 보면 됩니다. 

 

 

[4] Utilitarian Small / UtilitarianSmallFlat

 

Utilitarian Small은 

코드 상으로 CLKComplicationFamily.utilitarianSmall 입니다. 

 

 

Utilitarian Small Flat은 

 

코드 상으로 CLKComplicationFamily.utilitarianSmallFlat 에 해당됩니다.

 

 

 

# Template

 

Utilitarian Small이랑 Utilitarian SmallFlat이랑 각각 다른 Family이지만

HIG에는 두 패밀리에 해당하는 템플릿이 Utilitarian Small이라는 이름으로 같이 묶여있더라구요!

 

 

Utilitarian Small에서 가능한 템플릿은 저기서 Flat을 뺀 나머지 친구들이고 

코드 상으로는 Utilitarian 에서 Utilitarian Small 카테고리에 있는 것을 봐주면 됩니다. 

 

 

Utilitarian Small Flat에서 가능한 템플릿은 오직 하나 CLKComplicationTemplateUtilitarianSmallFlat 입니다. 

 

 

[5] Utilitarian Large

 

 

코드 상으로 CLKComplicationFamily.utilitarianLarge 에 해당됩니다. 

 

# Template 

 

해당되는 템플릿은 하나밖에 없네요

 

 

코드 상으로 Utilitarian 에서 Utilitarian Large 카테고리에 있는 것을 봐주면 됩니다. 

 

 

[6] Extra Large

 

 

코드 상으로는 CLKComplicationFamily.extraLarge 에 해당됩니다.

 

 

# Template

 

해당되는 템플릿은 아래와 같으며

 

 

코드 상으로 Extra Large 를 봐주시면 됩니다. 

 

[7] Graphic Corner

 

CLKComplicationFamily.graphicCorner 로 표현됩니다.

 

# Template

 

해당 템플릿은 아래와 같으며

 

 

코드 상으로 Corner Complication Templates 를 봐주시면 됩니다. 

 

 

[8] Graphic Circular

 

 

코드 상으로 CLKComplicationFamily.graphicCircular 에 해당됩니다.

 

# Template 

 

이 패밀리에 해당하는 템플릿들입니다. 

 

 

코드 상으로 Circular Complication Templates 를 봐주시면 됩니다. 

 

[9] Graphic Bezel

 

 

코드 상으로 CLKComplicationFamily.graphicBezel 에 해당됩니다.

 

# Template 

 

해당 템플릿은 하나밖에 없네요

 

 

코드 상으로 CLKComplicationTemplateGraphicBezelCircularText 에 해당됩니다. 

 

 

[10] Graphic Rectangular

 

 

코드 상으로 CLKComplicationFamily.graphicRectangular 에 해당됩니다.

 

# Template

 

해당되는 템플릿은 아래와 같으며 

 

 

코드 상으로 Rectangular Complication Templates 를 보면 됩니다. 

 

 

[11] Graphic Extra Large

 

 

코드 상으로 CLKComplicationFamily.extraLarge 에 해당됩니다. 

 

 

# Template

 

해당되는 템플릿은 아래와 같으며 

 

 

코드 상으로 Extra Large Circular Templates 를 보면 됩니다.