카운팅 앱 만들기

카운팅 앱 만들기 - 2

papayetoo 2021. 10. 30. 20:29

1. 라벨에 카운팅 하는 숫자 데이터를 연결시켜 보겠습니다.

Main 스토리 보드를 선택하고 어시스턴트 에디터를 켜보겠습니다. 어시스턴트 에디터는 Xcode 상단 메뉴에서 Editor -> Assistant 를 누르면 보이거나 control + option + command + Enter 를 누르면 보입니다. 화면 좌측에 보이는 코드는 현재 보이는 Main 스토리 보드에 연결된 UIViewController 파일의 내용입니다.

ViewController.swift를 아래 코드와 같이 변경해 주세요. 아래 코드에서 Main 스토리보드에서 Counter 라벨에 표시하기 위한 데이터인 counter를 추가했습니다. 정수를 세기 위한 용도여서 타입은 Int 입니다.

//
//  ViewController.swift
//  CoutingApp
//

import UIKit

class ViewController: UIViewController {

    var counter: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

Main 스토리보드에 있는 Counter 라벨과 -, + 버튼에 대해서 ViewController는 참조할 수가 없습니다. 현재 상태로는 접근할 수 없다는 말이죠. 그러면 이제 참조할 수 있도록 만들어 봐야죠.

Main 스토리보드와 ViewController 화면이 모두 보이는 상태에서 Counter 라벨이나 - 버튼, + 버튼을 선택해 주세요. 그리고 control 버튼을 누른 채 ViewController 화면으로 드래그 하세요.

아래 동영상을 참조해서 Counter 라벨과 - 버튼, + 버튼에 대한 참조를 만들어 보세요.

//
//  ViewController.swift
//  CoutingApp
import UIKit

class ViewController: UIViewController {
    
    var counter: Int = 0
    
    @IBOutlet weak var counterLabel: UILabel!
    @IBOutlet weak var minusButton: UIButton!
    @IBOutlet weak var plusButton: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

ViewController 코드는 위처럼 보일 거에요. 그리고 Main 스토리보드의 UI 컴포넌트(Counter 라벨, + 버튼, - 버튼)과 ViewController 사이에 연결이 이루어졌는지 확인하려면 아래 스크린 샷 처럼 @IBOutlet 옆에 동그라미 흰 색점이 차있는지 확인하면 알 수 있습니다.

흰 색점이 차있지 않다면 연결이 이루어져 있지 않다는 것을 의미해요.

카운팅 앱이 실행되면 Counter 라벨에는 0 이 보여야 지금 상태로는 실행시켜도 0 이 보이지 않습니다. (시뮬레이터 실행 방법은 이후에 다룰게요.)

Counter 라벨에 숫자를 넣기 위해서 아래 코드와 같이 작성해 주세요. 방법 1 과 방법 2 중 어느 하나를 사용해도 Counter 라벨에 0이라는 숫자가 나와요.

//
//  ViewController.swift
//  CoutingApp

import UIKit

class ViewController: UIViewController {
    
    var counter: Int = 0
    
    @IBOutlet weak var counterLabel: UILabel!
    @IBOutlet weak var minusButton: UIButton!
    @IBOutlet weak var plusButton: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // 방법 1: String Interpolation
        counterLabel.text = "\(counter)"
        // 방법 2: String format 이용
        counterLabel.text = String(format: "%d", counter)
    }


}

2. + 버튼 , - 버튼에 기능 추가

Counter 라벨에 숫자가 표시되도록 했어요. 그러면 다음에는 Counter 라벨에 있는 숫자를 - 버튼을 눌렀을 때는 감소시키고, + 버튼을 눌렀을 때는 증가시켜야겠죠. 아래와 같이 코드를 작성해 주세요.

//
//  ViewController.swift
//  CoutingApp

import UIKit

class ViewController: UIViewController {
    
    var counter: Int = 0
    
    @IBOutlet weak var counterLabel: UILabel!
    @IBOutlet weak var minusButton: UIButton!
    @IBOutlet weak var plusButton: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // 방법 1: String Interpolation
        counterLabel.text = "\(counter)"
        // 방법 2: String format 이용
        counterLabel.text = String(format: "%d", counter)
        
        // + 버튼에 1 더하기 기능 추가
        plusButton.addTarget(self, action: #selector(addOne(_:)), for: .touchUpInside)
        
        // - 버튼에 1 빼기 기능 추가
        minusButton.addTarget(self, action: #selector(minusOne(_:)), for: .touchUpInside)
        
    }
    
    @objc func addOne(_ sender: UIButton) {
   	    // counter 를 1 증가시킵니다.
        counter += 1
        // counter 를 증가시켜도 counterLabel.text에 증가한 counter 값을 넣어줘야 합니다.
        counterLabel.text = "\(counter)"
    }
    
    @objc func minusOne(_ sender: UIButton) {
       	// counter 를 1 감소시킵니다.
        counter -= 1
        counterLabel.text = "\(counter)"
    }


}

카운팅 앱 실행

3. 강의 정리

이번 강의에서는 Counter 라벨에 정수형 데이터를 연결하고, 각 버튼에 1 증가 및 감소 기능을 추가해 보았어요.

다음 강의에서는 오토 레이아웃을 설정해 보겠어요.