[29일차] [계산기 앱] 계산기 앱 UI 그리기 part.2 & part.3

오늘은 계산기 앱의 UI를 구성하는 두 번째 회차이다. 어제는 앱 UI의 기본적인 틀을 완성했다면 오늘은 색을 입힐 차례!

 

일단 Button들의 Title을 iOS 기본 계산기 앱과 동일하게 보이도록 변경해주자. 어제 AC 버튼 오른쪽 버튼이 연산 결과를 출력하는 '=' 이라고 적었었는데, iOS 기본 계산기 앱 기준으로는 나누기에 해당한다... ㅎㅎ

 

그래서 똑같이 바꿔나가다 보면...

1과 2 아래 버튼 2개가 iOS 계산기 앱에서는 0을 나타내는 하나의 버튼임을 발견하게 된다!

2 아래의 버튼을 지워주고, 1 아래의 버튼의 Aspect Ratio 제약조건을 삭제한 뒤, 어제 AC 버튼에 대해서 Size를 조정한 방식을 적용시켜주자. 그리고 다음과 같은 과정을 따라 UI에 스타일을 입혀주면 다음과 같은 결과를 볼 수 있다.

• 모든 버튼 선택 후 Font Style -> Medium, Font Size -> 30으로 변경
• 메인 View Controller의 Background Color를 Black으로 변경
• 키패드를 구성하는 View Controller의 Background Color도 Black으로 변경
• 계산 결과를 표시하는 Label의 Title을 0으로 설정 후 Text Color -> White 변경 및 오른쪽 정렬, Font Size 40으로 증가
• 키패드 내 버튼의 Title의 Text Color -> White 변경
• "AC" 버튼의 Background Color 변경 (RGB : 165, 165, 165), Text Color -> Black
• 연산자 버튼의 Background Color 변경 (RGB : 254, 160, 10)
• 숫자 버튼의 Background Color 변경 (RGB : 51, 51, 51)

스타일 적용 결과 :

오 뭔가 비슷해졌다. 그런데 버튼의 모양이 둥글둥글하지 않은 것이 조금 아쉬운 부분으로 남았다.

이건 어떻게 해결할 수 있을까?

UIButton의 Corner Radius 값을 조정해줘도 되지만, IBInspectable과 IBDesignable 어노테이션을 이용하는 방법을 활용해보자.

UIButton의 Subclass로 설정해서 RoundButton이라는 클래스를 하나 만들어주자.

그리고 다음과 같이 코드를 입력해주자.

import UIKit

@IBDesignable
class RoundButton: UIButton {
  @IBInspectable var isRound: Bool = false {
    didSet {
      if isRound {
        self.layer.cornerRadius = self.frame.height / 2
      }
    }
  }
}

코드에서 IBInspectable은 스토리보드 상에서 코드의 기능을 옵션으로서 제공하는 역할을 하고, IBDesignable은 변경된 UI를 실시간으로 스토리보드에 동기화시켜서 변화된 부분을 확인할 수 있도록 만들어준다.

스토리보드에서 모든 버튼을 선택한 채로 정의한 클래스를 상속시키고, Inspector 메뉴에서 isRound 옵션을 찾아서 On으로 변경해주면..

드디어 이렇게 익숙하게 둥근 UI를 확인할 수 있게 된다!

 

 

 

 

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

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