SwiftUIの勉強がてらデジタルウォッチのUIを実装してみることにした。
チープな白黒液晶が懐かしくなり８０〜９０年代を席巻したカ⚪︎オデータバ⚪︎クなど所謂チープカシ⚪︎と呼ばれる腕時計のUIを参考に幾つかそのコンポーネントを再現することにした。

最終的にはそれをwatchOS上で動かせるようにしたいと思ったが、物理ボタンでの操作を想定したUIのはずなのでむずかしそう。
一種のアート作品として生暖かく見守っていただきたい。

📋 概要

どのようなアウトプットにすべきか考えたところ、懐かしいデジタルウォッチのUIコンポーネントを提供するレトロフューチャーなOSSにすることにした。需要はないだろうけど

現状のリポジトリは以下（まだPackage化は半端な状態）
https://github.com/JikeLab/DigitalClockKit

幾つか example として実装してみた画面はこの通り。

🔎 コンポーネントの説明

数字と一部のアルファベット

7セグメントディスプレイというらしい。
主に日付や時刻を表現する部分を表現するためのコンポーネントでデジタル時計によっては曜日を表す際に一部のアルファベットもこれを使って表現されている。

まずは描画パスを指定するためのOptionSetを定義する。

DigitView.swift#L87-L98

struct PathFlags: OptionSet {
    let rawValue: Int16
    static let top = PathFlags(rawValue: 1 << 0)    // 上辺
    static let rightTop = PathFlags(rawValue: 1 << 1)    // 右辺の上部
    static let rightBottom = PathFlags(rawValue: 1 << 2)    // 右辺の下部
    static let bottom = PathFlags(rawValue: 1 << 3)    // 下辺
    static let leftTop = PathFlags(rawValue: 1 << 4)    // 左辺の上部
    static let leftBottom = PathFlags(rawValue: 1 << 5)    // 左辺の下部
    static let middle = PathFlags(rawValue: 1 << 6)    // 真ん中の辺
    static let center = PathFlags(rawValue: 1 << 7)    // アルファベットのMやWを表現するための中央線
    static let outsideLeftTop = PathFlags(rawValue: 1 << 8)    // アルファベットのRを表現するためのパス
}

描画部分はこのOptionSetに従って指定されているPathを書く実装にする。
componentSize は数字一つの大きさ。

DigitView.swift#L111-L231

private struct DigitContentView: View {
    let type: DigitType
    let componentSize: CGSize
    let color: Color

    var body: some View {
        ZStack {
            let inset = componentSize.width / 18
            let margin = componentSize.width / 18
            let lineWidth = componentSize.width / 3.5
            if type.paths.contains(.top) {
                // top
                Path { path in
                    path.move(to: CGPoint(x: (inset + margin), y: inset))
                    path.addLine(to: CGPoint(x: (componentSize.width - inset - margin), y: inset))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth - margin), y: lineWidth))
                    path.addLine(to: CGPoint(x: (lineWidth + margin), y: lineWidth))
                }
                .fill(color)
            }
            if type.paths.contains(.rightTop) {
                // rightTop
                Path { path in
                    path.move(to: CGPoint(x: (componentSize.width - lineWidth), y: (lineWidth + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width - inset), y: (inset + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width - inset), y: (componentSize.height / 2 - margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth / 2), y: (componentSize.height / 2 - margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth), y: (componentSize.height / 2 - lineWidth / 2 - margin)))
                }
                .fill(color)
            }
            if type.paths.contains(.rightBottom) {
                // rightBottom
                Path { path in
                    path.move(to: CGPoint(x: (componentSize.width - lineWidth), y: (componentSize.height / 2 + lineWidth / 2 + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth / 2), y: (componentSize.height / 2 + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width - inset), y: (componentSize.height / 2 + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width - inset), y: (componentSize.height - inset - margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth), y: (componentSize.height - lineWidth - margin)))
                }
                .fill(color)
            }
            if type.paths.contains(.bottom) {
                // bottom
                Path { path in
                    path.move(to: CGPoint(x: (lineWidth + margin), y: (componentSize.height - lineWidth)))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth - margin), y: (componentSize.height - lineWidth)))
                    path.addLine(to: CGPoint(x: (componentSize.width - inset - margin), y: (componentSize.height - inset)))
                    path.addLine(to: CGPoint(x: (inset + margin), y: (componentSize.height - inset)))
                }
                .fill(color)
            }
            if type.paths.contains(.leftTop) {
                // leftTop
                Path { path in
                    path.move(to: CGPoint(x: inset, y: (inset + margin)))
                    path.addLine(to: CGPoint(x: lineWidth, y: (lineWidth + margin)))
                    path.addLine(to: CGPoint(x: lineWidth, y: (componentSize.height / 2 - lineWidth / 2 - margin)))
                    path.addLine(to: CGPoint(x: (lineWidth / 2), y: (componentSize.height / 2 - margin)))
                    path.addLine(to: CGPoint(x: inset, y: (componentSize.height / 2 - margin)))
                }
                .fill(color)
            }
            if type.paths.contains(.leftBottom) {
                // leftBottom
                Path { path in
                    path.move(to: CGPoint(x: inset, y: (componentSize.height / 2 + margin)))
                    path.addLine(to: CGPoint(x: (lineWidth / 2), y: (componentSize.height / 2 + margin)))
                    path.addLine(to: CGPoint(x: lineWidth, y: (componentSize.height / 2 + lineWidth / 2 + margin)))
                    path.addLine(to: CGPoint(x: lineWidth, y: (componentSize.height - lineWidth - margin)))
                    path.addLine(to: CGPoint(x: inset, y: (componentSize.height - inset - margin)))
                }
                .fill(color)
            }
            if type.paths.contains(.middle) {
                // middle
                Path { path in
                    path.move(to: CGPoint(x: (lineWidth / 2 + margin), y: (componentSize.height / 2)))
                    path.addLine(to: CGPoint(x: (lineWidth + margin), y: (componentSize.height / 2 - lineWidth / 2)))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth - margin), y: (componentSize.height / 2 - lineWidth / 2)))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth / 2 - margin), y: (componentSize.height / 2)))
                    path.addLine(to: CGPoint(x: (componentSize.width - lineWidth - margin), y: (componentSize.height / 2 + lineWidth / 2)))
                    path.addLine(to: CGPoint(x: (lineWidth + margin), y: (componentSize.height / 2 + lineWidth / 2)))
                }
                .fill(color)
            }
            if type.paths.contains(.center) {
                // center
                Path { path in
                    path.move(to: CGPoint(x: (componentSize.width / 2 - lineWidth / 2), y: (lineWidth + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width / 2 + lineWidth / 2), y: (lineWidth + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width / 2 + lineWidth / 2), y: (componentSize.height / 2 - lineWidth / 2)))
                    path.addLine(to: CGPoint(x: (componentSize.width / 2 - lineWidth / 2), y: (componentSize.height / 2 - lineWidth / 2)))
                    path.addLine(to: CGPoint(x: (componentSize.width / 2 - lineWidth / 2), y: (lineWidth + margin)))
                    
                }
                .fill(color)
                Path { path in
                    path.move(to: CGPoint(x: (componentSize.width / 2 - lineWidth / 2), y: (componentSize.height / 2 + lineWidth / 2 + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width / 2 + lineWidth / 2), y: (componentSize.height / 2 + lineWidth / 2 + margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width / 2 + lineWidth / 2), y: (componentSize.height - lineWidth - margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width / 2 - lineWidth / 2), y: (componentSize.height - lineWidth - margin)))
                    path.addLine(to: CGPoint(x: (componentSize.width / 2 - lineWidth / 2), y: (componentSize.height / 2 + lineWidth / 2 + margin)))
                    
                }
                .fill(color)
            }
            if type.paths.contains(.outsideLeftTop) {
                // outsideLeftTop
                Path { path in
                    path.move(to: CGPoint(x: 0, y: inset))
                    path.addLine(to: CGPoint(x: -(componentSize.width / 2), y: inset))
                    path.addLine(to: CGPoint(x: -(componentSize.width / 2 - lineWidth), y: (lineWidth + inset)))
                    path.addLine(to: CGPoint(x: 0, y: (lineWidth + inset)))
                }
                .fill(color)
            }
        }
        .frame(width: componentSize.width, height: componentSize.height)
    }
}

それぞれの描画結果はこんな感じ。描画結果は大体Previewに定義したつもり。

DigitView.swift#233-269

#Preview {
    VStack {
        HStack {
            DigitView(type: .zero, componentSize: defaultComponentSize)
            DigitView(type: .one, componentSize: defaultComponentSize)
            DigitView(type: .two, componentSize: defaultComponentSize)
            DigitView(type: .three, componentSize: defaultComponentSize)
            DigitView(type: .four, componentSize: defaultComponentSize)
        }
        HStack {
            DigitView(type: .five, componentSize: defaultComponentSize)
            DigitView(type: .six, componentSize: defaultComponentSize)
            DigitView(type: .seven, componentSize: defaultComponentSize)
            DigitView(type: .eight, componentSize: defaultComponentSize)
            DigitView(type: .nine, componentSize: defaultComponentSize)
        }
        HStack {
            DigitView(type: .hyphn, componentSize: defaultComponentSize)
            DigitView(type: .space, componentSize: defaultComponentSize)
        }
        HStack {
            DigitView(type: .a, componentSize: defaultComponentSize)
            DigitView(type: .e, componentSize: defaultComponentSize)
            DigitView(type: .f, componentSize: defaultComponentSize)
            DigitView(type: .h, componentSize: defaultComponentSize)
            DigitView(type: .m, componentSize: defaultComponentSize)
        }
        HStack {
            DigitView(type: .o, componentSize: defaultComponentSize)
            DigitView(type: .r, componentSize: defaultComponentSize)
            DigitView(type: .s, componentSize: defaultComponentSize)
            DigitView(type: .t, componentSize: defaultComponentSize)
            DigitView(type: .u, componentSize: defaultComponentSize)
            DigitView(type: .w, componentSize: defaultComponentSize)
        }
    }
}

アルファベット・絵文字

7セグメントディスプレイで表現できないものに関しては MatrixView という 5 x 5 のタイルで表現するようにした。所謂ドット絵みたいな形。

表現するViewはこんな感じ。

Coordinate.swift#16-23

struct Coordinate: Equatable {
    let x: Int
    let y: Int

    static func == (ldh: Coordinate, rdh: Coordinate) -> Bool {
        ldh.x == rdh.x && ldh.y == rdh.y
    }
}

MatrixView.swift#10-43

struct MatrixView: View {
    let coordinates: [Coordinate]
    let maxMatrix: Coordinate?
    let componentSize: CGSize
    let color: Color
    var matrix: Coordinate {
        let maxX = maxMatrix?.x ?? coordinates.max { $0.x < $1.x }.map { $0.x } ?? 0
        let maxY = maxMatrix?.y ?? coordinates.max { $0.y < $1.y }.map { $0.y } ?? 0
        return .init(x: maxX + 1, y: maxY + 1)
    }
    let margin: CGFloat

    var body: some View {
        ZStack {
            let blockSize: (CGFloat, CGFloat) = (componentSize.width / CGFloat(matrix.x), componentSize.height / CGFloat(matrix.y))
            ForEach(0..<matrix.x, id: \.self) { x in
                ForEach(0..<matrix.y, id: \.self) { y in
                    if coordinates.contains(Coordinate(x: x, y: y)) {
                        Path { path in
                            path.move(to: CGPoint(x: (CGFloat(x) * blockSize.0 + margin / 2), y: (CGFloat(y) * blockSize.1 + margin / 2)))
                            path.addLine(to: CGPoint(x: (CGFloat(x + 1) * blockSize.0 - margin / 2), y: (CGFloat(y) * blockSize.1 + margin / 2)))
                            path.addLine(to: CGPoint(x: (CGFloat(x + 1) * blockSize.0 - margin / 2), y: (CGFloat(y + 1) * blockSize.1 - margin / 2)))
                            path.addLine(to: CGPoint(x: (CGFloat(x) * blockSize.0 + margin / 2), y: (CGFloat(y + 1) * blockSize.1 - margin / 2)))
                            path.addLine(to: CGPoint(x: (CGFloat(x) * blockSize.0 + margin / 2), y: (CGFloat(y) * blockSize.1 + margin / 2)))
                        }
                        .fill(color)
                    }
                    
                }
            }
        }
        .frame(width: componentSize.width, height: componentSize.height)
    }
}

例えば、↑に以下のようなCoodinateの定義を与えると

WeekdayView.swift#19-85

    var coordinateGrid: [[Coordinate]] {
        switch self {
        case .sunday:
            return [
                // S
                [.init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 0), .init(x: 0, y: 1), .init(x: 1, y: 2), .init(x: 2, y: 2), .init(x: 3, y: 2), .init(x: 4, y: 3), .init(x: 3, y: 4), .init(x: 2, y: 4), .init(x: 1, y: 4), .init(x: 0, y: 4)],
                // U
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 1, y: 4), .init(x: 2, y: 4), .init(x: 3, y: 4), .init(x: 4, y: 3), .init(x: 4, y: 2), .init(x: 4, y: 1), .init(x: 4, y: 0)],
                // N
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 1), .init(x: 2, y: 2), .init(x: 3, y: 3), .init(x: 4, y: 4), .init(x: 4, y: 3), .init(x: 4, y: 2), .init(x: 4, y: 1), .init(x: 4, y: 0)],
            ]
        case .monday:
            return [
                // M
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 1), .init(x: 2, y: 2), .init(x: 3, y: 1), .init(x: 4, y: 0), .init(x: 4, y: 1), .init(x: 4, y: 2), .init(x: 4, y: 3), .init(x: 4, y: 4)],
                // O
                [.init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 1, y: 4), .init(x: 2, y: 4), .init(x: 3, y: 4), .init(x: 4, y: 3), .init(x: 4, y: 2), .init(x: 4, y: 1)],
                // N
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 1), .init(x: 2, y: 2), .init(x: 3, y: 3), .init(x: 4, y: 4), .init(x: 4, y: 3), .init(x: 4, y: 2), .init(x: 4, y: 1), .init(x: 4, y: 0)],
            ]
        case .tuesday:
            return [
                // T
                [.init(x: 0, y: 0), .init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 0), .init(x: 2, y: 1), .init(x: 2, y: 2), .init(x: 2, y: 3), .init(x: 2, y: 4)],
                // U
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 1, y: 4), .init(x: 2, y: 4), .init(x: 3, y: 4), .init(x: 4, y: 3), .init(x: 4, y: 2), .init(x: 4, y: 1), .init(x: 4, y: 0)],
                // E
                [.init(x: 0, y: 0), .init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 2), .init(x: 2, y: 2), .init(x: 3, y: 2), .init(x: 1, y: 4), .init(x: 2, y: 4), .init(x: 3, y: 4), .init(x: 4, y: 4)],
            ]
        case .wednesday:
            return [
                // W
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 1, y: 4), .init(x: 2, y: 1), .init(x: 2, y: 2), .init(x: 2, y: 3), .init(x: 3, y: 4), .init(x: 4, y: 0), .init(x: 4, y: 1), .init(x: 4, y: 2), .init(x: 4, y: 3)],
                // E
                [.init(x: 0, y: 0), .init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 2), .init(x: 2, y: 2), .init(x: 3, y: 2), .init(x: 1, y: 4), .init(x: 2, y: 4), .init(x: 3, y: 4), .init(x: 4, y: 4)],
                // D
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 1), .init(x: 4, y: 2), .init(x: 4, y: 3), .init(x: 3, y: 4), .init(x: 2, y: 4), .init(x: 1, y: 4)],
            ]
        case .thursday:
            return [
                // T
                [.init(x: 0, y: 0), .init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 0), .init(x: 2, y: 1), .init(x: 2, y: 2), .init(x: 2, y: 3), .init(x: 2, y: 4)],
                // H
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 2), .init(x: 2, y: 2), .init(x: 3, y: 2), .init(x: 4, y: 0), .init(x: 4, y: 1), .init(x: 4, y: 2), .init(x: 4, y: 3), .init(x: 4, y: 4)],
                // U
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 1, y: 4), .init(x: 2, y: 4), .init(x: 3, y: 4), .init(x: 4, y: 3), .init(x: 4, y: 2), .init(x: 4, y: 1), .init(x: 4, y: 0)],
            ]
        case .friday:
            return [
                // F
                [.init(x: 0, y: 0), .init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 2), .init(x: 2, y: 2), .init(x: 3, y: 2)],
                // R
                [.init(x: 0, y: 0), .init(x: 0, y: 1), .init(x: 0, y: 2), .init(x: 0, y: 3), .init(x: 0, y: 4), .init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 1), .init(x: 3, y: 2), .init(x: 2, y: 2), .init(x: 1, y: 2), .init(x: 4, y: 3), .init(x: 4, y: 4)],
                // I
                [.init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 2, y: 1), .init(x: 2, y: 2), .init(x: 2, y: 3), .init(x: 1, y: 4), .init(x: 2, y: 4), .init(x: 3, y: 4)],
            ]
        case .saturday:
            return [
                // S
                [.init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 0), .init(x: 0, y: 1), .init(x: 1, y: 2), .init(x: 2, y: 2), .init(x: 3, y: 2), .init(x: 4, y: 3), .init(x: 3, y: 4), .init(x: 2, y: 4), .init(x: 1, y: 4), .init(x: 0, y: 4)],
                // A
                [.init(x: 2, y: 0), .init(x: 1, y: 1), .init(x: 3, y: 1), .init(x: 1, y: 2), .init(x: 3, y: 2), .init(x: 0, y: 3), .init(x: 4, y: 3), .init(x: 2, y: 2), .init(x: 0, y: 4), .init(x: 4, y: 4)],
                // T
                [.init(x: 0, y: 0), .init(x: 1, y: 0), .init(x: 2, y: 0), .init(x: 3, y: 0), .init(x: 4, y: 0), .init(x: 2, y: 1), .init(x: 2, y: 2), .init(x: 2, y: 3), .init(x: 2, y: 4)],
            ]
        }
    }

このように描画される。

絵文字だとこのようになる。

    VStack {
        MatrixView(
            coordinates: Mode.dataBank.iconCoordinates,
            maxMatrix: .init(x: 5, y: 5),
            componentSize: CGSize(width: 24, height: 24), color: Color.black, margin: 1
        )
        MatrixView(
            coordinates: Mode.calculator.iconCoordinates,
            maxMatrix: .init(x: 5, y: 5),
            componentSize: CGSize(width: 24, height: 24), color: Color.black, margin: 1
        )
        MatrixView(
            coordinates: Mode.alarm.iconCoordinates,
            maxMatrix: .init(x: 5, y: 5),
            componentSize: CGSize(width: 24, height: 24), color: Color.black, margin: 1
        )
        MatrixView(
            coordinates: Mode.stopWatch.iconCoordinates,
            maxMatrix: .init(x: 5, y: 5),
            componentSize: CGSize(width: 24, height: 24), color: Color.black, margin: 1
        )
        MatrixView(
            coordinates: Mode.dualTime.iconCoordinates,
            maxMatrix: .init(x: 5, y: 5),
            componentSize: CGSize(width: 24, height: 24), color: Color.black, margin: 1
        )
    }

使い方

リポジトリの DigitalClockKitDemoApp 以下にある。

ContentView.swift#10-115

struct ContentView: View {
    let timer = Timer.publish(every: 0.01, on: .current, in: .common).autoconnect()
    @State var currentDate:Date = Date()

    var body: some View {
        NavigationView {
            List {
                let year = Calendar.current.component(.year, from: currentDate)
                let month = Calendar.current.component(.month, from: currentDate)
                let day = Calendar.current.component(.day, from: currentDate)
                let weekday = Calendar.current.component(.weekday, from: currentDate)
                let hour = Calendar.current.component(.hour, from: currentDate)
                let minute = Calendar.current.component(.minute, from: currentDate)
                let second = Calendar.current.component(.second, from: currentDate)
                let miliSecond = Calendar.current.component(.nanosecond, from: currentDate) / 10000000

                // TODO: Components のプレゼン方法を変える
                Section {
                    HStack {
                        Text("Year")
                        Spacer()
                        AgeView(componentSize: mediumComponentSize, year: year)
                    }
                    HStack {
                        Text("Day")
                        Spacer()
                        DayView(componentSize: mediumComponentSize, month: month, day: day)
                    }
                    HStack {
                        Text("Time")
                        Spacer()
                        TimeView(componentSize: mediumComponentSize, timeComponentSize: nil, hasSecondDivider: true, hasSecond: true, hasMiliSecond: true, hour: hour, minute: minute, second: second, miliSecond: miliSecond, is24Hour: false)
                    }
                    HStack {
                        Text("Weekday")
                        Spacer()
                        HStack {
                            WeekdayView(edition: .matrix, componentSize: mediumComponentSize, weekday: weekday)
                                .padding(.trailing, 10)
                            WeekdayView(edition: .digit, componentSize: mediumComponentSize, weekday: weekday)
                        }
                    }
                    HStack {
                        Text("Telephone")
                        Spacer()
                        DigitContainerView(value: "012-3456-7890", componentSize: mediumComponentSize, spacing: 0.4)
                    }
                    HStack {
                        Text("Number")
                        Spacer()
                        DigitContainerView(value: "123.45", componentSize: defaultComponentSize, spacing: 1)
                    }
                    HStack {
                        Text("Icons")
                        Spacer()
                        HStack {
                            MatrixView(coordinates: Mode.dataBank.iconCoordinates, maxMatrix: nil, componentSize: CGSize(width:18, height: 18), color: Color.black, margin: 0)
                            MatrixView(coordinates: Mode.calculator.iconCoordinates, maxMatrix: nil, componentSize: CGSize(width:18, height: 18), color: Color.black, margin: 0)
                            MatrixView(coordinates: Mode.alarm.iconCoordinates, maxMatrix: nil, componentSize: CGSize(width:18, height: 18), color: Color.black, margin: 0)
                            MatrixView(coordinates: Mode.stopWatch.iconCoordinates, maxMatrix: nil, componentSize: CGSize(width:18, height: 18), color: Color.black, margin: 0)
                            MatrixView(coordinates: Mode.dualTime.iconCoordinates, maxMatrix: nil, componentSize: CGSize(width:18, height: 18), color: Color.black, margin: 0)
                        }
                    }
                } header: {
                    Text("COMPONENTS")
                }
                Section {
                    HStack {
                        Spacer()
                        ScrollView(.horizontal) {
                            LazyHStack(spacing: 0) {
                                ForEach(Mode.allCases, id: \.self) { mode in
                                    Watch1View(date: $currentDate, mode: mode, is24Hour: false)
                                        .frame(width: 220)
                                }
                            }
                            .scrollTargetLayout()
                        }
                        .scrollTargetBehavior(.paging)
                        .frame(width: 220)
                        Spacer()
                    }
                    HStack {
                        Spacer()
                        ScrollView(.horizontal) {
                            LazyHStack(spacing: 0) {
                                Watch2View(date: $currentDate, is24Hour: true)
                                    .frame(width: 250)
                            }
                            .scrollTargetLayout()
                        }
                        .scrollTargetBehavior(.paging)
                        .frame(width: 250)
                        Spacer()
                    }
                } header: {
                    Text("SAMPLES")
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationTitle("DigitalClockKit")
        }.onReceive(timer){ value in
            currentDate = value
        }
    }
}

↑は画像だが本当は時計部分やストップウォッチが動いている

📝 あとがき

SwiftUIの勉強というよりただPath使った描画集になってしまった感。。
パッケージ公開についても中途半端なので時間作ってちゃんとやりたい