카운터 앱 개발

앱 요구사항

---

카운터 앱 개발하기

앱의 요구사항
1. 숫자를 띄울 라벨

속성	요구사항
숫자라벨	Int 형.0 부터 시작
textColor	white
font	boldSystem 폰트. size = 45
textAlignment	center
width	80
constraint	superView와 center가 갖게 설정.

2. 감소, 증가 버튼

속성	요구사항
backgroundColor	감소 버튼은 red, 증가 버튼은 blue.
textColor	white
width	80
height	30
cornerRadius	8
constraint	centerY 는 모두 숫자 라벨과 같게 설정. 감소 버튼은 라벨로부터 왼쪽으로 32 떨어지게 설정. 증가 버튼은 라벨로부터 오른쪽으로 32 떨어지게 설정.

3. 증가 버튼을 누르면 숫자가 +1 , 감소 버튼을 누르면 숫자가 -1 되어 보이도록 구현.

스토리보드로 카운터 앱 개발

---

import UIKit

class ViewController: UIViewController {

    private var number: Int = 0
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var minusButton: UIButton!
    @IBOutlet weak var plusButton: UIButton!
    @IBAction func minusButtonTapped(_ sender: Any) {
        self.number -= 1
        label.text = "\(self.number)"
    }
    @IBAction func plusButtonTapped(_ sender: Any) {
        self.number += 1
        label.text = "\(self.number)"
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

코드베이스로 카운터 앱 개발

---

SnapKit 활용

import UIKit
import SnapKit

class ViewController: UIViewController {

    private var number: Int = 0
    let label = UILabel()
    let minusButton = UIButton()
    let plusButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        view.backgroundColor = .black
        label.text = "\(number)"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 45)
        label.textAlignment = .center
        minusButton.setTitle("감소", for: .normal)
        minusButton.backgroundColor = .red
        minusButton.setTitleColor(.white, for: .normal)
        minusButton.layer.cornerRadius = 8
        minusButton.addTarget(self, action: #selector(minusButtonTapped), for: .touchDown)
        plusButton.setTitle("증가", for: .normal)
        plusButton.backgroundColor = .blue
        plusButton.setTitleColor(.white, for: .normal)
        plusButton.layer.cornerRadius = 8
        plusButton.addTarget(self, action: #selector(plusButtonTapped), for: .touchDown)
        
        [label, minusButton, plusButton]
            .forEach { view.addSubview($0) }
        
        label.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.center.equalToSuperview()
        }
        
        minusButton.snp.makeConstraints {
            $0.centerY.equalTo(label.snp.centerY)
            $0.width.equalTo(60)
            $0.height.equalTo(30)
            $0.trailing.equalTo(label.snp.leading).offset(-32)
        }
        
        plusButton.snp.makeConstraints {
            $0.centerY.equalTo(label.snp.centerY)
            $0.width.equalTo(60)
            $0.height.equalTo(30)
            $0.leading.equalTo(label.snp.trailing).offset(32)
        }
    }
    
    @objc
    private func minusButtonTapped() {
        self.number -= 1
        label.text = "\(number)"
    }
    
    @objc
    private func plusButtonTapped() {
        self.number += 1
        label.text = "\(number)"
    }
}

---

응용 - 초기화 버튼 만들기

import UIKit
import SnapKit

class ViewController: UIViewController {

    private var number: Int = 0
    let label = UILabel()
    let minusButton = UIButton()
    let plusButton = UIButton()
    let resetButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    private func configureUI() {
        view.backgroundColor = .black
        label.text = "\(number)"
        label.textColor = .white
        label.font = .boldSystemFont(ofSize: 45)
        label.textAlignment = .center
        minusButton.setTitle("감소", for: .normal)
        minusButton.backgroundColor = .red
        minusButton.setTitleColor(.white, for: .normal)
        minusButton.layer.cornerRadius = 8
        minusButton.addTarget(self, action: #selector(minusButtonTapped), for: .touchDown)
        plusButton.setTitle("증가", for: .normal)
        plusButton.backgroundColor = .blue
        plusButton.setTitleColor(.white, for: .normal)
        plusButton.layer.cornerRadius = 8
        plusButton.addTarget(self, action: #selector(plusButtonTapped), for: .touchDown)
        resetButton.setTitle("초기화", for: .normal)
        resetButton.backgroundColor = .gray
        resetButton.setTitleColor(.white, for: .normal)
        resetButton.layer.cornerRadius = 8
        resetButton.addTarget(self, action: #selector(resetButtonTapped), for: .touchDown)
        
        [label, minusButton, plusButton, resetButton]
            .forEach { view.addSubview($0) }
        
        label.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.center.equalToSuperview()
        }
        
        minusButton.snp.makeConstraints {
            $0.centerY.equalTo(label.snp.centerY)
            $0.width.equalTo(60)
            $0.height.equalTo(30)
            $0.trailing.equalTo(label.snp.leading).offset(-32)
        }
        
        plusButton.snp.makeConstraints {
            $0.centerY.equalTo(label.snp.centerY)
            $0.width.equalTo(60)
            $0.height.equalTo(30)
            $0.leading.equalTo(label.snp.trailing).offset(32)
        }
        
        resetButton.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.width.equalTo(80)
            $0.height.equalTo(30)
            $0.top.equalTo(label.snp.bottom).offset(100)
        }
    }
    
    @objc
    private func minusButtonTapped() {
        self.number -= 1
        label.text = "\(number)"
    }
    
    @objc
    private func plusButtonTapped() {
        self.number += 1
        label.text = "\(number)"
    }
    
    @objc
    private func resetButtonTapped() {
        self.number = 0
        label.text = "\(number)"
    }
}