UIKit 계산기 Storyboard UI

최종 구현

UI 구성 순서 및 Stack View Constraints 설정

계산기의 UI 를 

"숫자나 결과 값을 나타내는 UILabel" 와 "이를 계산하기 위한 숫자 및 연산자 버튼"

크게 두 부분으로 나누어서 생각해볼 수 있다. 

 

1) 숫자나 결과 값을 나타내는 UILabel

따라서 UILabel 하나를 생성한 후

Top, Trailing, Leading 에 각각의 Constraints 를 준 후, Height 를 설정하면 다음과 같이 Label 이 위치한다.

Bottom 을 제외하고 값을 준 이유는 하단의 생성하는 UIView에서 Top 에 Constraints 를 주기 위해서이다.

 

2) 계산하기 위한 숫자 및 연산자 버튼

버튼 UI 를 구현하기 위해 UIView 를 추가하여 앞서 만든 Label 하단에 위치시킨 후 다음과 같이 Constraints 를 부여한다.

이후 UI 에 맞는 버튼을 생성한 후 Stack View 를 통해 5개의 Horizontal Stack View 를 하나의 Vertical Stack View 로 묶어준다. 

성공적으로 수행하면 다음과 같이 Stack View 형태가 구현된다.

 

Stack View 를 쌓았으니 이제 계산기의 UI 의 맞게 각각의 Stack 과 각 컴포넌트를 배치한다.

 

## Horizontal Stack 

 

## Vertical Stack

다음으로 다섯 개의 Horizontal Stack 을 포함한 Vertical Stack 이다.

 

## Vertical Stack 을 포함한 View

우리는 앞서 UIView 를 생성하여 내부에 숫자 및 연산자 버튼을 생성하였다.

이후 UIView 의 Top, Bottom, Leading, Trailing 을 각각 24 씩 Constraints 를 부여하였다.

 

이에 UIView 외부의 패딩을 설정하였고, 이제는 UIView 내부의 Stack View 의 Constraints 를 설정한다.

하단에 Bottom Space 제약 조건 우선순위를 1000 에서 750 으로 낮춘 이유를 설명한다.

 

## 버튼 크기 설정 방식

AC 버튼의 크기를 아래 Horizontal Stack 

의 세 번째 버튼 크기를 맞추기 위해서는 드래그 하여 맞추려는 버튼의 Trailing 값으로 설정한다.

 

UIButton
Aspect Radio & Corner Radius

① Aspect Radio

각각의 Button 을 가로 : 세로 비율이 1:1 로 설정하기 위하여 Aspect Radio 를 설정해야한다. Aspect Radio 는 Constraints 에서 추가할 수 있다. 

 

Aspect Radio 를 추가하면 자동으로 값이 설정되므로, 아래 그림과 같이 Aspect Ratio 의 Multiplier 를 변경해야한다.

1:1 인 경우 1만으로도 값이 변경된다.

 

② Corner Radius

먼저 Subclass 가 UIButton 인 Cocoa Touch Class 파일 하나를 생성한다.

## @IBDesignable

class 이름 위에 @IBDesignable 를 선언하면, 변경된 설정값을 스토리보드 상에서 실시간으로 확인할 수 있다.

 

## @IBInspectable 

스토리보드에서도 isCorner 프로퍼티의 설정값을 변경할 수 있게 한다.

 

위 설정을 통해 다음과 같이 스토리보드에서도 설정값을 변경할 수 있다.

CornerRadius Class 의 isCorner 프로퍼티를 On 으로 변경한다.

 

Bottom Space 제약 조건 우선순위를 1000 에서 750 으로 낮춘 이유

화면의 해상도가 커질수록 버튼의 크기도 커져야 하는데

버튼의 크기가 커진만큼 버튼이 위치할 자리가 모자라서

제약 조건 에러가 나게 된다.

 

다시 말해, 버튼이 비율로 설정이 되어 있으므로 해상도가 커질 수록 버튼의 크기도 커져야 한다.

 

Bottom Space Constraints Priority 를 낮춘다면, Vertical Stack View 상황에 따라 Bottom space 가 늘어나거나 줄어들게 된다.

 

따라서, "일단 Vertical Stack View 를 화면에 맞게 구성을 하고, 다른 해상도에 따라 Bottom space 의 간격을 맞추겠다." 라는 의미이다. 

 

이렇게 제약 조건의 우선순위를 조정하여 상황에 맞게 간격을 조정할 수 있다.