Screen · Health

Workout SwiftUI Screen

Concentric activity rings that fill on appear, over a week strip you can scrub.

A workout summary: concentric rings that animate from zero with a trailing cap and an overlap past 100%, a week strip that re-animates the day on scrub, and splits as blocks below.

  • SwiftUI
  • iOS 17.0+
  • activity-rings
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • Concentric rings that fill on appear, with an over-100% overlap
  • Scrub the week strip to re-animate another day
  • Light figures and thin arcs, with real VoiceOver values
  • The Workout screen from the preview: splits, heart rate and totals

In the Build Kit

Frost (style), Health and Fitness (brief), Daily Health (recipe). Your agent builds around this screen in the same design.

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

Every ring starts empty and sweeps clockwise from twelve o'clock to its share of its goal, each one a beat behind the one outside it, with a round trailing cap leading the fill. A ring that passes its goal carries on onto a second lap drawn over the first, its cap in shadow so the overlap reads as depth instead of a full ring. Scrubbing the week strip changes the day under the finger, and the rings, the figure in the opening and the split rows all move to that day's values.

Notes

  • Rings are ordered outside in, so the first value is the outer ring. Any count works; three is the usual number.
  • Fractions are never clamped. ActivityRingValue.fraction returns 1.19 for 712 of 600, and only the drawing decides what a second lap looks like.
  • Stroke widths and gaps are absolute points, so the opening inside the innermost ring is too. The same component draws a 240pt hero and a 24pt thumbnail in the week strip with nothing but different numbers.
  • The strip is one gesture: a DragGesture with no minimum distance picks the column under the touch, so a tap and a scrub are the same code path, with a selection haptic on each change.
  • The rings are an accessibility container with one child per ring, each reading its own name and value ("Move, 412 of 600 calories, 69 percent"). The strip is a single adjustable element.
  • Reduce Motion replaces the staggered spring with a short ease and drops the stagger; at accessibility text sizes the legend stacks and the split bars give their width back to the figures.
  • ActivityRingsExample at the end of ActivityRings.swift is the screen shown in the preview; copy it as a starting point.