There is still no UIView and the UI components in WatchKit don’t give us enough customization. But the good news is Core Graphic and UIBizerPath are coming which gives us ability to draw what we want. To present our drawing, we need a WKInterfaceImage because there is no canvas like UIView or CALayer.

If you aren’t familiar with Core Graphic and UIBezierPath, please refer to Quartz 2D Programming Guide and Drawing Shapes Using Bézier Paths

Let’s get started.

As usual, create iOS app project with a single view for simplicity and add new target for watchOS application.

First, drag the WKInterfaceImage in Object Library to the main Interface in storyboard and connect it to the IBOutlet in your code. We set both the width and height to Relative to Container to make the image cover full watch screen.

image

Then let’s begin to draw a circle and string with simple Core Graphic.

The result is here.

image

Then we will use UIBezierPath to do the same thing.

I open sourced my project NKWatchChart which highly uses drawing.

gif

So it brings the possibility to draw beautiful charts and other things as we need.