Every screen, flow, block and app template in SwiftPieces Pro, for good.All of Pro, $199 once.$199 once.Get Pro

Screen · Finance

Budget SwiftUI Screen

A budget overview around a ring you can scrub, with category limits and period switching.

A budget ring whose segments sweep in and morph between periods, with a counting center, drag-to-inspect with boundary ticks, a highlighting legend and an outer overshoot arc past budget.

  • SwiftUI
  • iOS 17.0+
  • spending-ring
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.

  • Segments sweep in and morph between periods
  • Drag around the ring to inspect a category, with boundary ticks
  • A counting center and an overshoot arc past budget
  • A legend that highlights with the ring
  • The Budget screen from the preview: periods, limits and Adjust budget

In the Build Kit

Graphic (style), Personal Finance (brief). Your agent builds around this screen in the same design.

Used in

Finance App (template)

02

Implementation notes

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

Segments sweep in on first appearance while the remaining amount counts up in the center. Drag around the ring to inspect: the segment under the finger lifts, the others dim, the center swaps to that category's amount and the matching legend chip highlights, with a tick at every boundary. Once spending passes the budget the ring shows the mix of spend and the excess is drawn as a thinner arc outside the ring in the warning tint. Switching periods morphs every segment to the new dataset.

Notes

  • Segments are keyed by category id, so a category present in both periods animates between its two arcs; one that disappears fades out. Arcs are a Shape with an animatable start and end.
  • Inspection is one DragGesture(minimumDistance: 0): movement over the band scrubs, a release without movement toggles the tapped segment, and a tap in the center clears. The ring is also an adjustable VoiceOver element that steps through categories and reads their amounts.
  • The center amount is an Animatable view, so it counts rather than jumps, and uses numericText for the digit roll.
  • Haptics: selection at each category boundary and on period change.
  • Reduce Motion skips the sweep-in and replaces the morph springs with short ease-outs.
  • SpendingRingExample at the end of SpendingRing.swift is the screen shown in the preview; copy it as a starting point.

03

Keep building

Pieces that work well next to this one.