[26일차] [LED 전광판 앱] 기능 구현하기 part.2

커피처럼 생긴 저것은 다름아닌 흑염소즙이다

오늘은 LED 전광판 앱의 기능 구현을 마무리할 것이다. 어제는 설정 화면에 있는 컴포넌트에 대해 클래스에 인스턴스를 만들어주고, 관련된 함수를 정의했었는데, 오늘은 설정 화면에서 선택한 값들이 메인 화면에 반영되도록 하는 기능을 완성하려고 한다.

 

설정 화면에서 선택한 값들을 메인 화면으로 보내주려면, 지난번에 공부했던 Delegate 패턴을 사용해야 한다.

SettingViewController에 LEDSetting이라는 프로토콜부터 선언해주자.

protocol LEDBoardSettingDelegate: AnyObject {
  func changedSetting(text: String?, textColor: UIColor, backgroudColor: UIColor)
}

changedSetting 함수는 전광판의 text값, text 색상, 배경 색상 데이터를 파라미터로 받아서 넘겨줄 것이다.

추가로 delegate 변수 및 text, 배경의 색상값을 저장하는 변수도 선언해주자.

var textColor: UIColor = .yellow
var backgroudColor: UIColor = .black

그 다음으로는 어제 구현했던 tap~~ColorButton 함수에서, 선택한 색상값을 내부 프로퍼티에 저장하는 코드도 각각 추가해주자.

@IBAction func tapTextColorButton(_ sender: UIButton) {
    if sender == yellowButton {
      self.textColor = .yellow
      self.changeTextColorButton(color: .yellow)
    } else if sender == purpleButton {
      self.textColor = .purple
      self.changeTextColorButton(color: .purple)
    } else {
      self.textColor = .green
      self.changeTextColorButton(color: .green)
    }
  }

  @IBAction func tapBackgroundColorButton(_ sender: UIButton) {
    if sender == blackButton {
      self.backgroudColor = .black
      self.changeBackgroundColorButton(color: .black)
    } else if sender == blueButton {
      self.backgroudColor = .blue
      self.changeBackgroundColorButton(color: .blue)
    } else {
      self.backgroudColor = .orange
      self.changeBackgroundColorButton(color: .orange)
    }

이제 마지막으로 남은건 저장 버튼을 눌렀을 때 호출되는 Action 함수를 구현하는 것 뿐이다.

어제 tapSaveButton()이라는 이름으로 선언만 해두었는데, 내부에 다음과 같은 코드를 작성해보자.

@IBAction func tapSaveButton(_ sender: Any) {
    self.delegate?.changedSetting(
      text: self.textField.text,
      textColor: self.textColor,
      backgroudColor: self.backgroudColor
    )
    self.navigationController?.popViewController(animated: true)
}

프로토콜에서 정의했던 함수 changedSetting()에 현재 클래스 내부 프로퍼티에 저장된 값들을 넘겨주고, 저장 버튼을 누르면 메인 화면으로 돌아가야하니까 popVC 함수를 호출해준다.

 

이제 SettingVC에서 보낸 데이터를 받는 코드를 작성하러 가보자.

일단 메인 화면에서 설정 화면으로 전환되는 방식은 Segueway 방식이었으므로, 메인 화면의 VC에서 prepare 메소드를 override 해주자.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
      if let settingViewController = segue.destination as? SettingViewController {
        settingViewController.delegate = self
      }
    }

자 그런데 SettingVC의 delegate를 위임받는 코드를 작성하면 다음과 같이 오류가 발생한다.

이건 알다시피 이 VC에서 프로토콜 준수 선언을 해주지 않았기 때문에 발생하는 에러이다.

따라서 준수 선언을 해주고, 프로토콜 준수를 위한 메소드를 차례로 구현해주면 된다.

func changedSetting(text: String?, textColor: UIColor, backgroudColor: UIColor) {
        if let text = text {
          self.contentLabel.text = text
        }
        self.contentLabel.textColor = textColor
        self.view.backgroundColor = backgroudColor
      }

delegate을 위임받아 SettingVC에서 파라미터를 넘겨받고, 해당 파라미터의 데이터를 내부 프로퍼티에 저장하는 코드를 작성하면 된다.

 

이제 실행을 통해 설정값들이 화면에 잘 반영되는지 확인해보자.

초기에는 이렇게 검은색 바탕에 노란 텍스트지만,

텍스트와 색상, 배경 색상을 선택한 후 저장 버튼을 누르면...

이렇게 잘 반영되는 것을 볼 수 있다!

그런데 이런 저런 색상을 테스트 해보는데, 문제점이 하나 보인다.

우리가 이렇게 색상을 지정해두고 다시 설정화면으로 넘어가면, 지정된 색상이 설정 화면에서 선택된 채로 남는게 아니라, 마치 초기화된 화면을 보듯 아무것도 선택되지 않은 화면을 보게 된다는 것이다!

 

이 문제를 해결하려면 메인 화면에 반영되어있는 설정값을 다시 설정 화면으로 넘겨줘야한다!

다시 코드로 돌아가보자.

 

우선 SettingViewController에서 메인 화면으로부터 받은 텍스트 값을 저장하기 위한 변수를 하나 선언해줘야한다.

var ledText: String?

그리고 메인 화면으로부터 받은 값들로 설정 화면의 View를 초기화시켜주는 함수를 하나 구현해줘야한다.

private func configureView() {
    if let ledText = self.ledText {
      self.textField.text = ledText
    }
    self.changeTextColorButton(color: self.textColor)
    self.changeBackgroundColorButton(color: self.backgroudColor)
  }

그리고 다시 메인 VC로 돌아가 override 했던 prepare 메소드에서 다음과 같이 설정 화면의 프로퍼티에 메인 화면의 값들을 할당해주는 코드를 작성한다.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
  if let settingViewController = segue.destination as? SettingViewController {
        settingViewController.delegate = self
        settingViewController.ledText = self.contentLabel.text
        settingViewController.textColor = self.contentLabel.textColor
        settingViewController.backgroudColor = self.view.backgroundColor ?? .black
  }
}

마지막으로, configureView()는 viewDidLoad()가 호출될 때마다 호출되어야하므로, SettingVC의 메소드를 다음과 같이 수정해준다.

override func viewDidLoad() {
    super.viewDidLoad()
    self.configureView()
}

이제 완성했다. 최종 시연을 해보자.

 

 

코드로 구현한 기능이 잘 적용되었음을 확인할 수 있다.

 

 

 

패스트캠퍼스 바로가기 : http://bit.ly/3Y34pE0

> 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.