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

오늘은 드디어 LED 전광판 앱의 기능을 구현해보는 실습을 진행한다.

앱의 기본적인 기능은 글자와 배경의 색을 입혀 보여주는 것이지만, 오늘 구현할 기능은 그것에 앞서 설정화면에서 각 컴포넌트의 색상을 선택했을 때, 그것이 선택되었다고 알려주는 기능이다. 말로만 들으면 별로 중요해보이지 않는 기능이지만 구현이 끝나고나서 생각해보면 또 다를 것이다.

 

우선 설정 화면의 기능을 담당하는 SettingViewController 파일을 프로젝트 폴더에 추가해보자.

그리고 해당 파일을 스토리보드에 연결하고 Assistant까지 띄워보면 이렇게 될 것이다.

이제 스토리보드에 있는 각 VC 내 컴포넌트에 대해 Outlet 변수를 선언할 것이다.

우선 전광판 화면에 있는 중앙의 큰 Label을 contentLabel이라는 Outlet변수로 선언하고,

해당 Label의 초기 색상이 노랑색이므로, viewDidLoad() 메소드 내에 다음과 같은 코드를 입력해주자.

self.contentLabel.textColor = .yellow

다음으로, 설정 화면의 VC로 넘어가보자. 이 화면에는 메인 화면의 컴포넌트의 설정값 변경을 위한 textField 1개와 버튼 6개가 있다.

7개 컴포넌트의 설정값을 조작하기 위해 우리는 총 7개의 outlet 변수를 선언해줘야한다.

class SettingViewController: UIViewController {

    @IBOutlet weak var textField: UITextField!
    
    @IBOutlet weak var orangeButton: UIButton!
    @IBOutlet weak var blueButton: UIButton!
    @IBOutlet weak var blackButton: UIButton!
    @IBOutlet weak var greenButton: UIButton!
    @IBOutlet weak var purpleButton: UIButton!
    @IBOutlet weak var yellowButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()

    }
    

}

그리고 색상 버튼을 눌렀을 때의 기능 수행을 위한 tapTextColorButton, tapBackgroundColorButton Action 함수와,

저장 버튼을 눌렀을 때의 기능 수행을 위한 tapSaveColorButton Action 함수도 선언해주자.

 

그런데 텍스트 색상과 배경 색상의 버튼은 각각 3개인데 이걸 어떻게 각 1개의 Action함수와 연결할 수 있을까?

 

답은 간단하다. 우선 하나의 버튼을 이용해 Action 함수를 만들어주고, 나머지 2개의 버튼도 우클릭 드래그로 해당 함수와 연결해주면 된다.

그러면 3개의 컴포넌트 조작에 대해 1개의 Action 함수를 공유할 수 있다.

그럼 이 3개의 컴포넌트를 구별하는 방법은 무엇일까? -> sender 파라미터를 활용하면 된다.

 

그럼 이제부터 사용자가 선택한 색상을 다른 색상과 구분해주는 기능을 구현해보자.

Swift에서 Color에는 alpha라는 속성값이 있는데, 사용자가 선택한 색상의 alpha를 1로, 나머지는 0.2로 설정해주는 코드를 작성하면 된다. 그러면 사용자가 선택한 색상은 진하게, 선택하지 않은 색상은 흐리게 표시될 것이다.

 

해당 기능을 구현하기 위한 함수 changeTextColorButton(), changeBackgroundColorButton()를 별도로 작성해보자.

함수의 기본 로직은 다음과 같다.

• 파라미터로 color를 넘겨받음
• 해당 color가 특정 색상이 맞다면 해당 색상 버튼의 alpha값을 1로, 아니라면 0.2로 저장

간단하게 작성하기 위해 삼항연산자를 활용하면 다음과 같은 코드가 완성된다.

private func changeTextColorButton(color: UIColor) {
        self.yellowButton.alpha = color == UIColor.yellow ? 1 : 0.2
        self.purpleButton.alpha = color == UIColor.purple ? 1 : 0.2
        self.greenButton.alpha = color == UIColor.green ? 1 : 0.2
      }

private func changeBackgroundColorButton(color: UIColor) {
        self.blackButton.alpha = color == UIColor.black ? 1 : 0.2
        self.blueButton.alpha = color == UIColor.blue ? 1 : 0.2
        self.orangeButton.alpha = color == UIColor.orange ? 1 : 0.2
    }

다음은 Action 함수의 코드를 작성해보자.

이 Action 함수의 역할은 sender 파라미터로 전달된 버튼 인스턴스를 내부 버튼 프로퍼티와 비교하여, 맞다면 해당 버튼의 색상을 우리가 방금 정의한 두 함수를 호출하여 넘겨주는 것이다.

코드는 다음과 같다.

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

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

이제 앱을 빌드해서 결과를 확인해보자.

선택한 색상만 진하게 잘 표시되는 것을 확인할 수 있다.

 

 

 

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

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