Swift PiecesPro
  • Library
    Screens48Finished, designed screens for real apps.Templates10Complete apps built from the screens.Build Kit24Styles, briefs and recipes for your coding agentEverything58The whole library, with search
  • Docs
  • Pro

Library

  • Screens48
  • Templates10
  • Build Kit24
  • Everything58
  • Docs
  • Pro
  • Account
Get Swift Pieces ProFree library ↗
Swift PiecesPro

Production-ready SwiftUI screens and app templates for iOS. The pieces to build the whole app.

Library

  • Screens
  • Templates
  • Build Kit
  • Everything

Product

  • Pro
  • Your account
  • Sign in

Resources

  • Docs
  • CLI
  • MCP and agents
  • Free library

Social

  • X / Twitter
  • GitHub

SWIFTPIECES PRO

© 2026 Swift Pieces. One payment, lifetime access, per-developer commercial license.

Curated withby Saivion

LibraryScreensForecast

Screen · Weather

Forecast

A giant tabular reading you scrub hour by hour on a ruled tape, over a ten-day range table.

A forecast screen set like a printed almanac: a giant tabular temperature, a tape of hairline ticks for the next 24 hours you drag to scrub, with rolling figures, conditions and a sun or moon that travels its arc, and a ten-day table of capsule range bars below.

SwiftUIiOS 17.0+forecast-scrubber

Get Swift Pieces 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.

  • A ruled hour tape with a detent and haptic per hour
  • Rolling tabular figures and a sun or moon that travels its arc
  • A ten-day table with capsule range bars on one shared scale
  • Adjustable for VoiceOver, hour by hour
  • The Forecast screen from the preview, ready to adapt

In the Build Kit

Press (style). Your agent builds around this screen in the same design.

Used in

Weather App (template)

02

Implementation notes

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

The page is set like a printed almanac. A masthead with an issue rule sits over the hour under the indicator, shown as a giant tabular figure with a ruled sidebar for feels like, high, low and rain. Below it the next 24 hours run on a tape of hairline ticks under one fixed spot-colour indicator, like the rim of a measuring dial. Drag it and the tape follows your finger, snapping to each hour with a selection tick while the figures roll and the sun (or, after sunset, a crescent moon) travels a ruled half-dial between the rise and set times. Hours likely to rain ink their ticks, so the showers read off the ruler before you scrub to them.

Under the instrument, a ten-day table draws each day's low to high as a capsule on one shared scale, with a ring on today's bar for the hour you have scrubbed to, and the day's details close the page as ruled cells: a wind compass, UV as a solid block, humidity on a dot grid, sunrise and sunset.

Notes

  • ForecastScrubber is a control, not a readout. It owns the drag, the fling and the snapping; your screen reads selection and puts the figures wherever it likes. Bind position as well when something should follow the drag continuously, such as ForecastSkyArc.
  • The tape and the arc are drawn in Canvas and are animatable in their position, so a fling or a jump back to now glides instead of cutting.
  • VoiceOver reads the tape as one adjustable element ("15:00, 24 degrees, Sunny"); swipe up or down to move an hour. Each table row is one element with its conditions, rain chance, low and high.
  • ForecastRangeBar.span(low:high:in:) is the scaling the bars use, exposed so a widget or a test can place a range the same way.
  • Dynamic Type at accessibility sizes stacks the sidebar under the figure and moves each range bar under its day. Reduce Motion swaps the springs for short ease-outs.
  • Loading draws the ruled page with quiet bars where the figures will land; a failed load keeps the masthead and offers a retry.
  • ForecastScrubberExample at the end of ForecastScrubber.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.

Screen · Weather

Radar

A dot-matrix map that plays the next two hours, with a time slider and legend blocks.

Template · Weather

Weather App

Almanac, a weather app set like a printed page: a complete Xcode project with an hour-by-hour forecast, a dot-matrix radar, saved places, alerts, widgets and three brand presets.

Screen · Media

Podcast Player

An episode player built on a waveform you scrub, with chapters, speed and sleep.