[Swift] StopWatch 만들어보기 - Step 1

오늘은 간단한 프로젝트를 하나 진행해보겠습니다. 

주제는 타임 워치입니다. 간단하면서도 뭔가 만들었다는 성취감을 느낄 수 있는 프로젝트가 될 것 같습니다.

이번 글에서의 스톱 워치는 기능으로는 아래와 같습니다.

 

1. 시작

2. 기록 (버튼으로는 Stop)

3. 리셋 (한 번 누를 시 모든 기록 삭제, 모든 기록이 삭제되어 있는 상태에서 한 번 더 누르면 종료)

 

그러면 Step 1으로서 디자인 과정부터 시작해보겠습니다. 

---

1. 프로젝트 생성

가장 처음에 진행하는 작업인 프로젝트 생성입니다.

자유롭게 프로젝트 명 설정을 해주시면 됩니다.

2. 디자인 구성

제가 이번 과정에서 쓴 컨트롤은 라벨, 버튼, 테이블 뷰, 테이블 뷰 셀입니다.

그리고 라벨과 버튼 같은 경우는 여러 개를 나열해서 사용하기 때문에 스택 뷰를 이용해서 간편하게 관리할 수 있도록 했습니다.

디자인도 자신의 감각을 살려면 만드시면 될 것 같습니다.

3. Slider설정

테이블 뷰와 셀이 사용이 되었다는 것은 셀의 id를 지정해 주어야 한 다는 것!

4. 베이스 작성

이제 스토리보드에서의 작업은 완료되었습니다. 그렇다면 이제는 스토리보드와 ViewController를 연결해주면서 베이스를 작성해 보겠습니다. 테이블 뷰가 사용되기 때문에 Delegate와 DataSource는 필수!

저는 확장 기능을 사용해서 테이블 뷰를 연결했습니다.

5. 임의의 데이터로 시험해 보기

만든 코드가 잘 동작을 하는지 확인해보기 위해 배열을 하나 만들어 임의의 데이터를 넣어 실행해보았습니다. 

후에 뭔가 디자인 적으로 추가하고 싶은 것도 추가하면서 디자인 작업을 완료합니다.

 

6. 전체 코드

class ViewController: UIViewController {

    /// 기록 표시 테이블
    @IBOutlet weak var timeTableView: UITableView!

    /// 타임 표시 라벨
    @IBOutlet weak var hourLabel: UILabel!
    @IBOutlet weak var minuteLabel: UILabel!
    @IBOutlet weak var secondLabel: UILabel!
    @IBOutlet weak var milliSecondLabel: UILabel!

    /// 조작 버튼
    @IBOutlet weak var startButton: UIButton!
    @IBOutlet weak var resetButton: UIButton!

    /// 기록을 보존 하는 리스트
    var recordList: [String] = ["first item", "second item", "third item"]

    override func viewDidLoad() {
        super.viewDidLoad()
        self.timeTableView.delegate = self
        self.timeTableView.dataSource = self
        self.timeTableView.backgroundColor = .green
        self.timeTableView.separatorStyle = .none
    }

    @IBAction func didTappedStartButton(_ sender: UIButton) {
        // TODO: 시작 / 기록 기능 추가
    }

    @IBAction func didTappedResetButton(_ sender: UIButton) {
        // TODO: 한 번 누르면 테이블 삭제 / 테이블 삭제 상태에서 한 번 더 누르면 스톱워치 중지
    }
}

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return recordList.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = self.recordList[indexPath.row]
        cell.textLabel?.textAlignment = .center
        cell.backgroundColor = .clear
        return cell
    }
}

이번 글에서는 간단히 디자인 작업을 해보았습니다.

다음 글에서 바로 실질 적인 처리들을 작성해 타임워치를 완성해 보겠습니다.

지적이나 추가사항은 댓글로 알려주시면 감사하겠습니다.

---

환경 

Xcode 11.3.1

swift 5