How to Design a Watch Display Table Using SwiftUI

You’ve probably wondered how to design a watch display table. In this article, you’ll learn how to design a graphic circular complication, create a Utilitarian small template, and use SwiftUI to achieve the same effect. Using SwiftUI to design a watch display table is easy and quick. But you’ll have to learn some new concepts in the process. After all, you’re not just building a watch – you’re creating an experience.

Creating a graphic circular complication

Apple Watch has several new features. One of these is the ability to create graphic circular complications. These complications display graphs of changing values and processes. For example, a graphic circular complication showing heart rate over a 24-hour period would use high-contrast colors with a gray line for the graph. The watch will prepend the image to the left. Here are some examples of the types of graphic circular complications available.

The graphics in the contact complication are typically small, utilitarian templates that occupy a corner of the watch face. These templates usually contain a circular graph or glyph, while the large template shows only text or images. Typically, the text will fill almost 180 degrees of the bezel before becoming truncated. Graphic rectangular templates can also display full-color images, text, a gauge, or an optional title. Some text fields can support multiple colors, enabling them to display a wide-screen image.

The graphics in the Infograph face can combine text and gauges. Whether they’re text or gauges, the Infograph face provides a unique way to display information on the watch face. It also includes a system template that lets the developer add more content to the display face. This template also allows the complication to be updated once per hour. If you are creating a watch display table for a company or a personal use, you can use system templates to define the graphics in the face.

Creating a Utilitarian small template

Whether you want to put up a watch face with a small message or a large display of information, you can use a Utilitarian small template to showcase your content. There are several sizes of Utilitarian templates available, including those used for Utility, Chronograph, Simple, and Character watch faces. Small Utilitarian templates are typically small, and occupy the short, rectangular space in the corner of the face. Small Utilitarian templates are best suited for displaying an icon or glyph, while larger ones will show a string of text or a small image.

Using SwiftUI to create a graphic circular complication

You may have been wondering how to add a graphic complication to your watch face. With the release of watchOS 7 on the Apple Watch, you can easily add multiple complications to your watch face. The new watchOS 7 version of the app makes this possible with the Face Sharing feature and multiple complications. This allows you to make your watch face uniquely tailored to your app user’s preferences.

A complication is a collection of icons arranged in families, each of which is described by a CLKComplicationFamily. Each complication has a specific size and location, and a designer needs to make the most efficient use of the space available. SwiftUI allows designers to create a variety of different complication types, which gives you more graphic freedom. It also allows you to represent Appointment data as a complication, something that is familiar to SwiftUI developers.

Complications are a powerful way to enhance the user experience in a watchOS app. Not only can they provide glanceable displays, they also provide a single-tap entry point for watchOS apps. Apple Watch users can interact with their watch via haptic signals and other interactive features. Depending on the complexity of the interaction, people might have to tap the complication several times to interact with it.