What would the sample code for developing the Apple Watch Complication look like? There are two directions, top-down or bottom-up.
For the top-down sample code, it is like some omniscience who knows all and provide the sample code in full coverage and in detail. Not a surprise these kinds of source code come from Apple and Ray Wenderlich (guru).
- https://developer.apple.com/documentation/clockkit/keeping_your_complications_up_to_date
- https://www.raywenderlich.com/17749320-complications-for-watchos-with-swiftui
In their source code, you will find how to implement each Complication Family and how to preview in the Xcode. (Same mechanism as previewing a SwiftUI View. )
But what if you want to tinkering around on a real device or on the simulator? Or to see the different kinds of combination with Watch Face and multiple Complications? (Yes you could design multiple complications and show them together on the Watch Face. See example below. ) You need some kind of sample code like the mockup which has the flexibility to quickly play around.
I call this MVP(minimum viable product) sample code. It is not complete in the detailed implementation. But it works. It shows up. And you could quickly get a sense of how it works by playing around. This is the bottom-up pathway.
Here is the sample code to start tinkering: https://github.com/luomein/Apple_Watch_Complication_Lookbook/blob/main/Swift/ComplicationController.swift
You could use this file to replace the one in your project and now you get the simplest Complication up and running. Or you could cut into code snippets with only the Complication Family you want to test. Here is an example gist for the graphicCircular Complication Family. There are only 3 functions you need to care about:
- getComplicationDescriptors
- getTimelineEntries
- getLocalizableSampleTemplate
To test it on a device or simulator, you need to know which Watch Face has graphicCircular. Look it up on my app and find out the Watch Faces are:
- California
- Infograph
- Infograph Modular
Then you just change the Watch Face accordingly and edit the Complication on that Watch Face, you will find your Complication showing up.
Then you could start tinkering. For each Complication Family, there are several Complication Templates to use. Look it up on my app and find out the Complication Templates:
If you want to present multiple looks of Complications on the same Watch Face, just give different "identifier" for each Complication.
So, you have tools ready for designing and building the Complication now!
