Need help with SwiftClockUI?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

renaudjenny
176 Stars 13 Forks MIT License 263 Commits 2 Opened issues

Description

SwiftUI library to display a clock. You can move the arms to change the time, change the style of the clock and customise some configurations.

Services available

!
?

Need anything else?

Contributors list

# 320,458
Swift
templat...
iOS
macOS
255 commits

SwiftClockUI

Xcode Unit Test

Clock UI for SwiftUI

This library has been tested * ✅💻 macOS Catalina 10.15.3 * ✅💻 macOS Big Sur 11.6 * ✅📱 iOS 13 * ✅📱 iOS 14 * ✅📱 iOS 15

Bind a date

struct ContentView: View {
    @State private var date = Date()

var body: some View {
    ClockView().environment(\.clockDate, $date)
}

}

Simply set

.environment(\.clockDate, $date)
$date
has to be a binding. If you want something constant (just for showing the time), you could pass
.constant(yourDate)
  • Arms move when date are set (take hour and minute in account)
  • Move the Arms change the date (hour and minute depending on which arm you've moved)

Change Clock style

There is 4 different clock style:

Style

Picture
Classic Clock View with Classic style
Art Nouveau Clock View with Art Nouveau style
Drawing Clock View with Drawing style
Steampunk Clock View with Steampunk style

To set the style:

.environment(\.clockStyle, .steampunk)
for Steampunk style for instance.
struct ContentView: View {
    @State private var clockStyle: ClockStyle = .classic

var body: some View {
    ClockView().environment(\.clockStyle, clockStyle)
}

}

\.clockStyle
is typed as
enum ClockStyle
which is
Identifiable
,
CaseIterable
, and has a convenient method to get the description (in English):
public var description: String

It's very useful when you want to iterate over this

enum
to let the user choose the clock style, for instance you can easily do something like this:
struct StylePicker: View {
    @Binding var clockStyle: ClockStyle

var body: some View {
    Picker("Style", selection: clockStyle) {
        ForEach(ClockStyle.allCases) { style in
            Text(style.description).tag(style)
        }
    }
    .pickerStyle(SegmentedPickerStyle())
}

}

Change elements color

You can also change the color of Clock elements. Again with changing some

.environment
keys.
ClockView()
    .environment(\.clockArmColors, ClockArmColors(
        minute: .red,
        hour: .blue
    ))
    .environment(\.clockBorderColor, .orange)
    .environment(\.clockIndicatorsColor, .green)

In light mode, you could expect a result like this:

Clock View with Classic style and some colors changed

Installation

Xcode

You can add SwiftToTen to an Xcode project by adding it as a package dependency.

  1. From the File menu, select Swift Packages › Add Package Dependency...
  2. Enter "https://github.com/renaudjenny/SwiftClockUI" into the package repository URL test field

As package dependency

Edit your

Package.swift
to add this library.
let package = Package(
    ...
    dependencies: [
        .package(url: "https://github.com/renaudjenny/SwiftClockUI", from: "1.4.0"),
        ...
    ],
    targets: [
        .target(
            name: "",
            dependencies: ["SwiftClockUI"]),
        ...
    ]
)

App using this library

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.