23. 스파르타 코딩 클럽 - iOS 앱 개발 입문 카운터 앱 만들기

 🧑‍💻 코드베이스 UI로 카운터 앱 만들기

---

 📝 앱 요구사항

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
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)"
    }
}

---

 📝 추가 요구사항

[ 초기화 버튼 만들기 ]

🧑‍💻 응용 - 초기화 버튼 만들기
50까지 올려놨는데 다시 감소 버튼을 눌러서 0으로 내리려면 너무 귀찮겠죠.
숫자를 0으로 초기화하는 초기화 버튼을 구현해 봅시다. 

---

 🛠️ 코드 작성

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.setTitleColor(.white, for: .normal)
        minusButton.backgroundColor = .red
        minusButton.layer.cornerRadius = 8
        minusButton.addTarget(self, action: #selector(minusButtonTapped), for: .touchDown)
        
        plusButton.setTitle("증가", for: .normal)
        plusButton.setTitleColor(.white, for: .normal)
        plusButton.backgroundColor = .blue
        plusButton.layer.cornerRadius = 8
        plusButton.addTarget(self, action: #selector(plusButtonTapped), for: .touchDown)
        
        resetButton.setTitle("초기화", for: .normal)
        resetButton.setTitleColor(.white, for: .normal)
        resetButton.backgroundColor = .lightGray
        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.equalToSuperview()
            $0.width.equalTo(60)
            $0.height.equalTo(30)
            $0.trailing.equalTo(label.snp.leading).offset(-32)
        }
        
        plusButton.snp.makeConstraints{
            $0.centerY.equalToSuperview()
            $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(100)
            $0.height.equalTo(30)
            $0.top.equalTo(label.snp.bottom).offset(50)
        }
        
    }

    @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)"
    }
}

---

 📱 Simulator 동작