https://github.com/renaudjenny/swiftclockui

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.
https://github.com/renaudjenny/swiftclockui

clock ios macos swift swiftui

Last synced: 3 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/renaudjenny/swiftclockui
• Owner: renaudjenny
• License: mit
• Created: 2020-02-22T15:30:21.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-03-05T10:09:20.000Z (almost 2 years ago)
• Last Synced: 2024-12-06T20:04:34.568Z (about 1 month ago)
• Topics: clock, ios, macos, swift, swiftui
• Language: Swift
• Homepage:
• Size: 8.73 MB
• Stars: 301
• Watchers: 8
• Forks: 20
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SwiftClockUI

![Xcode Unit Test](https://github.com/renaudjenny/SwiftClockUI/workflows/Xcode%20Unit%20Test/badge.svg)

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

*For compatibility with Xcode version older than 13.3, I would recommend to checkout the 1.4.x tag, it should compile with Xcode 11 and greater*

## Bind a date

```swift

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](docs/assets/ClockViewClassic.png)

Art Nouveau | ![Clock View with Art Nouveau style](docs/assets/ClockViewArtNouveau.png)

Drawing | ![Clock View with Drawing style](docs/assets/ClockViewDrawing.png)

Steampunk | ![Clock View with Steampunk style](docs/assets/ClockViewSteampunk.png)

To set the style: `.environment(\.clockStyle, .steampunk)` for Steampunk style for instance.

```swift

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:

```swift

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.

```swift

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](docs/assets/ClockViewClassicAndColors.png)

## 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.

```swift

let package = Package(

    ...

    dependencies: [

        .package(url: "https://github.com/renaudjenny/SwiftClockUI", from: "2.0.0"),

        ...

    ],

    targets: [

        .target(

            name: "",

            dependencies: ["SwiftClockUI"]),

        ...

    ]

)

```

## App using this library

* [📲 Tell Time UK](https://apps.apple.com/gb/app/tell-time-uk/id1496541173): 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

```bash

echo '#!/bin/sh' > .git/hooks/pre-commit

echo '' >> .git/hooks/pre-commit

echo 'swiftlint' >> .git/hooks/pre-commit

chmod +x .git/hooks/pre-commit

```