Use SwiftUI to add graphical complexity to the Apple Watch. We’ll teach you how to use custom SwiftUI views on complex features like Meridian and Graphics, see the best ways to create complex features, and demonstrate a preview of the results in Xcode 12.

BluesJiang, iOS developer, currently working in Alibaba, iOS Architecture group. Making, blogs,

The Session: developer.apple.com/videos/play…

An overview of the

This topic focuses on how to use SwiftUI to write widgets on watch faces, demonstrating the power and convenience of using SwiftUI for developers.

Complex components

Complications is a component that displays App details on the Apple Watch dial. The following diagram illustrates some of the complexity of the components. SwiftUI now offers an easier set of apis to build the complex components of the Watch App. SwiftUI also offers a variety of dial templates to help quickly check how complex components behave in different dial configurations.

The new API

Text component

The default font varies with the size of the component. The Text component provides different formatting methods for dates, especially for relative times, as shown in the figure below.

Sample code:

Text(date, style: .relative)
Text("Time remaining: \(timer.startDate, style: .timer)")
Copy the code

Progress view and meter

ProgressView Progress bar View is the style on the left, which is used to display Progress related information. The corresponding style in SwiftUI is ProgressView. Progress bar View provides circular style and linear style.

ProgressView(value: 0.7) {
    Image(systemName: "music.note")
}
.progressViewStyle(CircularProgressViewStyle(tint: .red))
//.progressViewStyle(LinearProgressViewStyle(tint: .red))
Copy the code

Gague is the style on the right, which provides a chart showing the current value. You can customize parameters such as minimum and maximum value, current value, icon, gradient, etc. Use the following example code:

Gauge(value: acidity, in: 3.10) {
    Image(systemName: "drop.fill")
        .foregroundColor(.green)
} currentValueLabel: {
    Text("\(acidity, specifier: "%.1f")")
} minimumValueLabel: {
    Text("3")
} maximumValueLabel: {
    Text("10")
}
.gaugeStyle(
    // LinearGaugeStyle(// Also provides linear styles
    CircularGaugeStyle(
        tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple])
    )
)
Copy the code

The dial surface is colored

This section introduces the theme color of the Watch dial. Because Apple Watch dial provides many theme colors, such as full color, orange and so on, when writing your own complex components, you should pay attention to the performance of the complex components when the theme color changes. There are several processing methods for complex components when the theme Color changes, Full Color, complex components are displayed in this mode. Desaturated to desaturate the color so that the theme color of the component is consistent with the dial. Color opacity is described in detail below.

Go to the saturated

Desaturation is the system’s default treatment. When the dial uses theme colors, the system grays the components and then renders them with theme colors. Due to grayscale processing, it is important not to use colors with similar brightness. Otherwise, after grayscale processing, the colors of elements are too similar to be distinguished. Finally, when writing complex components, it is recommended to check that the content is correct in desaturated mode.

Color opacity

This is another way of dealing with theme colors that the system provides, which requires different view layers to be built so that when the theme colors change, the system will give different colors to each layer. Because the view layer of a complex component generally has two types: background and content, you need to use.complicationforeground () to specify a particular view as the master view. The usage is as follows:

var body: some View {
    ZStack {
        Circle()
            .fill()
        Image("apple")
            .foregroundColor(.yellow)
            .complicationForeground()
    }
}
Copy the code

Advanced Customization

With further SwiftUI provides ComplicationRenderingMode for further customization. This value can be taken from the environment and can be used to achieve different performance in different modes.

The following code implements the gradient background color in theme color mode:

preview

With SwiftUI Preview, the following series of previews are provided to examine the performance of complex components:

The following code shows how to preview using the above API:

Best practices

  1. Clicking on a complex component will definitely launch the App
  2. Use Text, Image, Paints using basic components such as Shapes, Paths, Paints
  3. SwiftUI animations are not supported
  4. Each time a view is presented, the associated performance is tested, and pay attention to performance
  5. Use pictures of the right size
  6. Limit expensive drawing, such as blurring and formatting strings
  7. Note the Runtime warning from Xcode
  8. Use the default font size to guide your layout
  9. Rectangular Full View uses a Safe Area layout.edgesIgnoreingSafeArea()Ignore safe area.

conclusion

Complex components exist so that users can see what they care about at a glance on the dial, which in itself is not very complex. The addition of SwiftUI can also significantly reduce the cost of writing such components. Now watchOS 7 has added the ability to share the watch face to your APP. It will be downloaded automatically when users accept the watch face and do not have an APP installed on the watch. It also provides a new way to distribute apps.

Related video

  • Build Complications in SwiftUI
  • Create Complications for Apple Watch
  • Keep Your Complications Up to Date

Recommended reading

  • WWDC 2020 Session 10041 – What’s new in SwiftUI

  • Explain the major changes and core strengths of WWDC 20 SwiftUI

Limited welfare

This article is from WWDC20 Inside Reference. I recommend this column here.

The “WWDC Insider reference” series was initiated by the veteran Driver Weekly, Knowledge Collection and SwiftGG technology organizations. We’ve been doing it for a couple of years, and it’s been good. It is mainly for the annual WWDC content, do a selection, and call on a group of front-line Internet iOS developers, combined with their actual development experience, Apple documents and video content to do a second creation.

There are 213 sessions this year. WWDC20 Insider selected 135 of these sessions, and the column has now produced 97 articles. It is on sale now, only 29.9 yuan, very discount.

See article also not enough friends, to subscribe to the WWDC20 inside ~ https://xiaozhuanlan.com/wwdc20 to continue reading

Pay attention to our

We launched LSJCoiding, a weekly newsletter for veteran drivers, which is called a welcome update to each issue.