Quick WKInterfaceImage Tips

Now that users everywhere are firing up their brand-new Apple Watch, I’ve been extremely busy working on updating a few apps. But I wanted to take a moment and share two quick image-related tips with you.

Rounded Corners

I see one question being asked on Stack Overflow again and again. How the heck do I round the corners on a WKInterfaceImage? It’s easy. Like many UI tricks in WatchKit, the secret is WKInterfaceGroup.

Simply nest your image inside a group sized to fit its content and set the cornerRadius on the group as desired. The group will clip your image, giving you the appearance of rounded corners on the image itself.

Why nest a WKInterfaceImage inside the group, instead of setting the group’s backgroundImage? That leads me to my second tip.

Image Placeholders

In many apps, developers opt to lazy-load their images. From a performance standpoint, this is a wise choice. Many apps, however, simply show a large gap in the content until the image loads. This can be confusing to users. At best, they guess something might load there eventually. At worst, your layout appears broken.

The solution, then, is to display some sort of placeholder for the image. In many of the apps I’ve worked on we accomplish this by nesting a WKInterfaceImage inside a WKInterfaceGroup and using the group’s backgroundImage to display a placeholder graphic or animation. Once the image inside the group is set, it completely covers the background image.

It’s an extremely simple technique, but it’s proven to be a huge help for users.