ios 16일차

회고

문법 기본 주차를 완료하고 오늘부터 UI를 이용한 앱 개발 입문에 들어갔다. 강의를 통해 들은 내용과 실습을 짧게 정리하고자 한다.

공부에 관한 기록

Chapter 1.6 코드베이스 UI

스토리보드를 이용하여 UI를 정의할 수 있지만, 코드를 통해 적용하는 것을 중점으로 공부하는 것이 좋을 것이라 생각한다.

• 스토리보드를 제거하기 위해 Info와 프로젝트 파일 Build Settings에서 StoryBoard와 연관되어있는 항목들을 제거 한 후 SceneDelegate.swift에 아래와 같은 내용을 추가한다.

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else {return}
        let window = UIWindow(windowScene: windowScene)
        
        window.rootViewController = ViewController()
        window.makeKeyAndVisible()
        
        self.window = window
    }

• 스토리보드가 사라졌으므로, 앱이 실행되면 처음에 나타날 뷰를 설정해주는 역할을 한다.

Chapter 1.7 간단한 앱 실습

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    private var number = 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 = .gray
        resetButton.layer.cornerRadius = 8
        resetButton.addTarget(self, action: #selector(ressetButtonTapped), for: .touchDown)
        
        [label, minusButton, plusButton, resetButton]
            .forEach { view.addSubview($0) }
        
        label.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.center.equalToSuperview()
        }
        
        minusButton.snp.makeConstraints {
            $0.width.equalTo(60)
            $0.height.equalTo(30)
            $0.centerY.equalToSuperview()
            $0.trailing.equalTo(label.snp.leading).offset(-32)
        }
        plusButton.snp.makeConstraints {
            $0.width.equalTo(60)
            $0.height.equalTo(30)
            $0.centerY.equalToSuperview()
            $0.leading.equalTo(label.snp.trailing).offset(32)
        }
        
        resetButton.snp.makeConstraints{
            $0.width.equalTo(100)
            $0.height.equalTo(30)
            $0.centerX.equalToSuperview()
            $0.top.equalTo(label.snp.bottom).offset(20)
        }
        
    }
    
    @objc
    private func minusButtonTapped(){
        self.number -= 1
        label.text = "\(number)"
        
    }
    @objc
    private func plusButtonTapped(){
        self.number += 1
        label.text = "\(number)"
    }
    @objc
    private func ressetButtonTapped(){
        self.number = 0
        label.text = "\(number)"
    }

}

• 기본적인 구성은 강의를 통해 들은 내용과 유사하며, 개인실습을 위해 초기화 버튼을 추가해보았다. 또한, 현재 코드에는 첨부되어있지 않지만 여러 속성들을 추가해보기도 했다. 이번 과제도 마찬가지로, 문제를 모두 구현하는 것을 목표로 하지만 성급하게 접근하지 않을 것이다. 개념의 정리가 되고 기능들을 확인해본 뒤 과제를 시작하도록 하자.