renaudjenny/swiftclockui

Clock UI for SwiftUI

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.

From the File menu, select Swift Packages › Add Package Dependency...
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: "2.0.0"),
        ...
    ],
    targets: [
        .target(
            name: "<Your project name>",
            dependencies: ["SwiftClockUI"]),
        ...
    ]
)

App using this library

📲 Tell Time UK: https://github.com/renaudjenny/telltime

For maintainers

If you want to help maintaining this library, I would suggest to add this git hooks on pre-commit

In a terminal opened in the repo folder, executes these commands

echo '#!/bin/sh' > .git/hooks/pre-commit
echo '' >> .git/hooks/pre-commit
echo 'swiftlint' >> .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit

Package Metadata

Repository: renaudjenny/swiftclockui

Default branch: main

README: README.md