Code Monkey home page Code Monkey logo

swiftclockui's Introduction

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

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

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: "2.0.0"),
        ...
    ],
    targets: [
        .target(
            name: "<Your project name>",
            dependencies: ["SwiftClockUI"]),
        ...
    ]
)

App using this library

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

swiftclockui's People

Contributors

renaudjenny avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.