[Swift] 아날로그 시계 어플을 만들어보자!

이번 글에서는 무엇을 만들어볼까 생각을 하다가 디자인도 같이 공부할 수 있는 것으로 생각하다가 아날로그시계를 생각해내게 되었습니다. 아날로그시계의 좋은 점은 디자인도 공부할 수 있고 수학적인 계산 그리고 애니메이션도 만져볼 수 있어 여러 가지 방면에서 공부가 될 것 같습니다. 

크게 어렵지 않기 때문에 하나하나씩 따라하시면서 만들어 보시면 됩니다.

(사용한 이미지는 무료 템플릿을 다운 받아 직접 웹 용 포토샵으로 수정하였습니다.)

---

1. 디자인

이번 프로젝트에서는 좀 더 확실한 공부를 하기 위해서 다양한 단말에도 맞춘 레이아웃을 구성해 보았습니다. 앱 개발 디자인에 있어서 다양한 단말에 맞추는 것이 중요하기 때문에 어떻게 구성할지 생각하면서 하나하나씩 만들어 나아가면 됩니다.

저와 같은 경우는 아래와 같이 구성하였습니다.

constraint 구성

각 단말의 Preview

 

2. 베이스 작성

어떠한 기능이 필요할 지 간단히 베이스를 작성하는 과정입니다. 저는 크게 3가지를 생각하였습니다.

1. 매초 시간별로 처리하는 타이머 (화면 표시 시)

2. 표시 기능, 애니메이션 (매 타이머에 맞추어)

3. 시계침 중심 디자인 (화면 생성 시)

class ViewController: UIViewController {

    @IBOutlet weak var hourView: UIView!
    @IBOutlet weak var minuteView: UIView!
    @IBOutlet weak var secondView: UIView!
    @IBOutlet weak var centerView: UIView!
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        // TODO: 타이머
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.initView()
    }
    
    private func initView() {
        // TODO: 시계침 중심 디자인
    }
    
    @objc
    private func secondTimerProcess(_ sender: Timer) {
        // TODO: 디자인, 애니메이션 설정
    }
}

3. 코드 작성

이제 내부를 작성해보겠습니다.

class ViewController: UIViewController {

    @IBOutlet weak var hourView: UIView!
    @IBOutlet weak var minuteView: UIView!
    @IBOutlet weak var secondView: UIView!
    @IBOutlet weak var centerView: UIView!
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(self.secondTimerProcess(_:)), userInfo: nil, repeats: true)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.initView()
    }
    
    private func initView() {
        self.centerView.layer.cornerRadius = self.centerView.frame.width / 2
    }
    
    @objc
    private func secondTimerProcess(_ sender: Timer) {
        // 현재 시간
        let date = Date()
        
        // Calendar를 사용하여 현재 시간의 시, 분, 초 단위로 취득
        let calendar = Calendar(identifier: .gregorian)
        let dateComponets = calendar.dateComponents([.year, .month, .day, .hour, .minute, .second], from: date)

        // 시침, 분침, 초침의 각도를 계산
        // 시침에 대해서는 분침에 따라서 조금씩 변화하기 때문에 분침 단위와 현재의 분침을 더하여 각도 계산
        let hourChangeValue = (60 * dateComponets.hour!) + dateComponets.minute!
        let hourAngle = CGAffineTransform(rotationAngle: CGFloat(2.0 * .pi * Double(hourChangeValue) / (60 * 12)))
        let minuteAngle = CGAffineTransform(rotationAngle: CGFloat(2.0 * .pi * Double(dateComponets.minute!) / 60))
        let secondAngle = CGAffineTransform(rotationAngle: CGFloat(2.0 * .pi * Double(dateComponets.second!) / 60))

        // 애니메이션으로 움직임을 표시 딱딱함 0.1 부드럽게 2
        UIView.animate(withDuration: 0.1) {
            self.hourView.transform = hourAngle
            self.minuteView.transform = minuteAngle
            self.secondView.transform = secondAngle
        }
    }
}

4. 실행

잘 움직이는지 확인해 봅시다. 

5. 마무리

이번 글을 통해서 앱에 대한 흥미가 한 층 더 업그레이드되었으면 좋겠습니다.

많은 도움이 되었으면 좋겠습니다.

궁금한 사항이나 지적 사항이 있으신 분은 댓글에 부탁드립니다.

감사합니다.

---

환경 

Xcode 11.3.1

Swift 5