기능 상세

• LED 전광판 화면 표시
• LED 전광판에 표시할 텍스트, 텍스트 색상, 배경 색상을 설정 화면에서 설정

활용 기술

• UINavigationController
• 화면 전환 개념
• ViewController Life Cycle
• 화면 간 데이터 전달하는 방법
• 에셋 카탈로그

Content View Controller

화면을 구성하는 뷰를 직접 구현하고 관련된 이벤트를 처리하는 뷰 컨트롤러

Container View Controller

• 하나 이상의 child view controller 를 가지고 있다.
• child view controller 를 관리하고 레이아웃과 화면 전환을 담당한다.
• 화면 구성과 이벤트 관리는 child view controller 에서 한다.
• container view controller 는 대표적으로 navigation controller 와 tabBar controller 가 있다.

UINavigationController

계층 구조로 구성된 contents를 순차적으로 보여 주는 container view controller
Navigation Stack 사용

화면 전환

화면 전환 방법

• 소스 코드를 통해 전환하는 방식
• Storyboard를 통해 전환하는 방식

세부적으로,

• View Controller의 View 위에 다른 View를 가져와 바꿔치기
  (메모리 누수의 위험이 있어 사용을 권장하지 않는다.)
• View Controller에서 다른 View Controller를 호출하여 전환하기
• Navigation Controller를 사용하여 화면 전환하기
• 화면 전환용 객체 세그웨이(Segueway)를 사용하여 화면 전환하기
  (Storyboard 만으로 화면 전환을 구현할 수 있다.)
  • Action Segueway
    • Show
    • Show Detail
    • Present Modally
    • Present As Popover
    • Custom
  • Manual Segueway

Seguement로 Push

Show seguement 사용
Back Button 구현

@IBAction func tapBackButton(_ sender: UIButton) {
	self.navigationController?.popViewController(animated: true)
}

Seguement로 Present

Present Modally seguement 사용
Back Button 구현

@IBAction func tapBackButton(_ sender: UIButton) {
	self.presentingViewController?.dismiss(animated: true, completion: nil)
}

Code로 Push

@IBAction func tapCodePushButton(_ sender: UIButton) {
	guard let viewController = self.storyboard?.instantiateViewController(identifier: "CodePushViewController") else { return }
    self.navigationController?.pushViewController(viewController, animated: true)
}

다음 화면에 해당하는 View Controller 인스턴스화
Back Button 구현

@IBAction func tapBackButton(_ sender: UIButton) {
    self.navigationController?.popViewController(animated: true)
}

Code로 Present

@IBAction func tapCodePresentButton(_ sender: UIButton) {
    guard let viewController = self.storyboard?.instantiateViewController(identifier: "CodePresentViewController") else { return }
    viewController.modalPresentationStyle = .fullScreen
    self.present(viewController, animated: true, completion: nil)
}

다음 화면에 해당하는 View Controller 인스턴스화
Back Button 구현

@IBAction func tapBackButton(_ sender: UIButton) {
    self.presentingViewController?.dismiss(animated: true, completion: nil)
}

ViewController Life Cycle

• Appearing: 뷰가 화면에 나타나는 중
• Appeared: 뷰가 화면에 나타나는 게 완료된 상태
• Disappearing: 뷰가 화면에서 사라지는 중
• Disappeared: 뷰가 화면에서 사라진 상태

viewDidLoad()

• 뷰 컨트롤러의 모든 뷰들이 메모리에 로드됐을 때 호출
• 메모리에 처음 로드될 때 한 번만 호출
• 보통 딱 한 번 호출될 행위들을 이 메소드 안에 정의
• 뷰와 관련된 추가적인 초기화 작업, 네트워크 호출

viewWillAppear()

• 뷰가 뷰 계층에 추가되고, 화면에 보이기 직전에 매번 호출
• 다른 뷰로 이동했다가 돌아오면 재호출
• 뷰와 관련된 추가적인 초기화 작업

viewDidAppear()

• 뷰 컨트롤러의 뷰가 뷰 계층에 추가된 후, 호출
• 뷰가 나타날 때 필요한 추가 작업
• 애니메이션을 시작하는 작업

viewWillDisappear()

• 뷰 컨트롤러의 뷰가 뷰 계층에서 사라지기 전에 호출
• 뷰가 생성된 후 작업한 내용을 되돌리는 작업
• 최종적으로 데이터를 저장하는 작업

viewDidDisappear()

• 뷰 컨트롤러의 뷰가 뷰 계층에서 사라진 후, 호출
• 뷰가 사라지는 것과 관련된 추가 작업

화면 간 데이터 전달하기

다음 화면으로 데이터 전달

Code로 Push 부분에 구현

@IBAction func tapCodePushButton(_ sender: UIButton) {
	guard let viewController = self.storyboard?.instantiateViewController(identifier: "CodePushViewController") as? CodePushViewController else { return }
    viewController.name = "Park"
    self.navigationController?.pushViewController(viewController, animated: true)
}

다음 화면에 해당하는 View Controller에 접근하기 위해 다운캐스팅 진행

이전 화면으로 데이터 전달

Delegate 패턴 사용

작업을 위임하는 느낌
다음 화면으로 넘어가기 위한 코드에서 아래의

viewController.delegate = self

이런 식으로 선언을 해줘서 다음 화면의 정보를 가지고 현재 컨트롤러에 구현된 코드를 이용해 결국 다시 돌아왔을 때의 화면을 구성하겠다는 느낌

아래 코드 확인

Segueway로 화면 전환할 때 데이터 전달

prepare 메소드 사용

Segueway를 실행하기 직전에 시스템에 의해 자동으로 prepare 메소드가 호출되도록 오버라이딩해서 사용
이를 이용하여 다음 화면에 해당하는 view controller에 데이터 전달

아래 코드 확인
ViewController Code

import UIKit

class ViewController: UIViewController, SendDataDelegate {
    @IBOutlet weak var nameLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func tapCodePushButton(_ sender: UIButton) {
        guard let viewController = self.storyboard?.instantiateViewController(identifier: "CodePushViewController") as? CodePushViewController else { return }
        viewController.name = "Park"
        viewController.delegate = self
        self.navigationController?.pushViewController(viewController, animated: true)
    }
    
    @IBAction func tapCodePresentButton(_ sender: UIButton) {
        guard let viewController = self.storyboard?.instantiateViewController(identifier: "CodePresentViewController") as? CodePresentViewController else { return }
        viewController.modalPresentationStyle = .fullScreen
        viewController.name = "Park"
        self.present(viewController, animated: true, completion: nil)
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let viewController = segue.destination as? SeguePushViewController {
            viewController.name = "Park"
        }
    }
    
    func sendData(name: String) {
        self.nameLabel.text = name
        self.nameLabel.sizeToFit()
    }
}

CodePushViewController Code

import UIKit

protocol SendDataDelegate: AnyObject {
    func sendData(name: String)
}

class CodePushViewController: UIViewController {
    @IBOutlet weak var nameLabel: UILabel!
    var name: String?
    weak var delegate: SendDataDelegate?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        if let name = name {
            self.nameLabel.text = name
            self.nameLabel.sizeToFit()
        }
    }
    
    @IBAction func tapBackButton(_ sender: UIButton) {
        self.delegate?.sendData(name: "Park")
        self.navigationController?.popViewController(animated: true)
    }
}

구현

에셋 카탈로그

이미지 리소스 추가

GitHub

https://github.com/pjs0418/LEDBoard

출처

패스트캠퍼스, 초격차 패키지 : 30개 프로젝트로 배우는 iOS 앱 개발 with Swift