Published on

SwiftUI Watch(Analog)

Authors

SwiftUI Watch(Analog)

SwiftUI Watch is a simple watchOS app that demonstrates some of the core features of SwiftUI on Apple Watch. This project was created by Batınay Ünsel as a learning exercise for SwiftUI development.

Watch Design

Features

  • Displays the current time in a customizable clock face.
  • Lets users change the color of the clock face.
  • Supports both 24-hour and 12-hour time formats.

Requirements

  • Xcode 12 or later
  • A device running watchOS 7 or later (for testing on a physical device)

Installation

  1. Clone or download the project to your local machine.
  2. Open the project in Xcode.
  3. Build and run the app on a simulator or a physical device.

Code

Watch.swift
//
//  Watch.swift
//      Watch
//
//  Created by Batınay Ünsel on 17/08/2022.
//

import SwiftUI

struct Watch: View {
    
    @State var isDark = false
    @State var currentTime = Time(sec: 15, min: 10, hour: 10)
    var receiver = Timer.publish(every: 1, on: .current, in: .default)
        .autoconnect()
    
    var body: some View {
        VStack {
            
            
            Spacer()
            clockFace(isDark: $isDark, currentTime: $currentTime)
            //MARK: Time text: (ex. 11.23 AM)
            /*Text(getTime())
             // .font(.system(size: 15))
                .fontWeight(.bold)
                
                .padding(.bottom,10)
            */
            Text(hiTime())
            //Good Afternoon
            .font(.custom("Poppins Bold", size: 18)).foregroundColor(Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.75))).tracking(0.72)
            .shadow(radius: 12)
            
            Spacer()
        }
        .onAppear(perform: {
            getTimeComponents()
        })
        .onReceive(receiver) { _ in
            getTimeComponents()
        }
    }
    private func getTime() -> String {
        let format = DateFormatter()
        format.dateFormat = "hh:mm a"
        return format.string(from: Date())
    }
    
    private func hiTime() -> String {
        
        let format = DateFormatter()
        format.dateFormat = "hh a"
        let fullTime: String = format.string(from: Date())
        var timeCircle: Int = 0
        let formatArr = fullTime.components(separatedBy: " ")
        
        if formatArr[1] == "PM"{
            timeCircle += 12
        }
        
        timeCircle = ((formatArr[0] as NSString).integerValue) + timeCircle
        
        
        
        
        
        if 5 <= timeCircle && timeCircle <= 11 {
            return "Good Morning!"
        }
        
        if 11 <= timeCircle && timeCircle <= 17 {
            return "Good Afternoon!"
        }
        
        if 17 <= timeCircle && timeCircle <= 23 {
            return "Good Evening!"
        }
        
        else {
            return "Good Night!"
        }
        
        
    }
    
    private func getTimeComponents() {
        let calender = Calendar.current
        let sec = calender.component(.second, from: Date())
        let min = calender.component(.minute, from: Date())
        let hour = calender.component(.hour, from: Date())
        withAnimation(Animation.linear(duration: 0.01)) {
            currentTime = Time(sec: sec, min: min, hour: hour)
        }
    }
}

struct clockFace: View {
    
    @Binding var isDark: Bool
    @Binding var currentTime: Time
    var width = UIScreen.main.bounds.width
    var body: some View {
        ZStack {
            Circle()
                .fill(.ultraThinMaterial)
                
            ForEach(0..<60) { second in
                Rectangle()
                    .fill(Color.primary)
                    .frame(width:  0.6, height: (second % 5) == 0 ? 7 : 2)
                    .offset(y: (width - 313) / 2)
                    .rotationEffect(.init(degrees: Double(second) * 6))
            }
            
            Rectangle()
                .fill(Color.primary)
                .frame(width: 1, height: (width - 300) / 2)
                .cornerRadius(2)
                .offset(y: -(width - 300) / 4)
                .rotationEffect(.init(degrees: Double(currentTime.sec) * 6))
        
            Rectangle()
                .fill(Color.primary)
                .frame(width: 1.8, height: (width - 310) / 2)
                .cornerRadius(2)
                .offset(y: -(width - 310) / 4)
                .rotationEffect(.init(degrees: Double(currentTime.min) * 6))
           
            Rectangle()
                .fill(Color.primary)
                .frame(width: 2.5, height: (width - 340) / 2)
                .cornerRadius(2)
                .offset(y: -(width - 340) / 4)
                .rotationEffect(.init(degrees: Double(currentTime.hour) * 30))
            
            Circle()
                .fill(Color.primary)
                .frame(width: 9, height: 7)
        }
        .frame(width: width - 300, height: width - 300)
        
    }
}

struct Time {
    var sec: Int
    var min: Int
    var hour: Int
}

struct Watch_Previews: PreviewProvider {
    static var previews: some View {
        Watch()
            .frame(width: 200)
            
    }
}


Screenshots

Watch Design

License

This project is licensed under the MIT License.

Acknowledgements

This project was inspired by the SwiftUI Essentials tutorial from Apple.