[27일차] [계산기 앱] 앱 요구사항 & UIStackView 알아보기

남은 챌린지 기간동안 만들 앱은 iOS 기본 내장 앱인 "계산기 앱"이다. 물론 원본과 비교하면 몇 개의 기능이 빠지고 가로모드도 지원하지 않는 것 같지만... 기본적인 사칙연산과 계산기 앱의 특징인 "누적연산" 및 "계산 초기화" 기능은 구현되어있다.

 

앱의 기능적 요구사항을 나열해보면 다음과 같다.

• 앱 UI의 숫자와 연산자를 활용하여 기본적인 사칙연산 및 소숫점 연산을 할 수 있다.
• "AC" 버튼을 누르면 현재까지 계산된 결과가 초기화되고 숫자는 0으로 초기화 된다.
• 계산은 단일 연산이 끝났을 때 초기화되지 않고, 연산 결과에 대해 추가적인 연산을 할 수 있다. (누적 연산)

활용될 기술 스택은 다음과 같다.

• UIStackView : 계산기 앱의 UI를 구성
• IBDesignables, IBInspectable : Custom View를 구성하는 데 활용, 스토리보드에서 속성 값을 바로 수정할 수 있고, 수정된 값을 스토리보드에 실시간으로 반영할 수 있도록 구현

그럼 이제 이전의 전광판 앱의 설정 화면에서, 색상 버튼과 그 Label을 하나의 단위로 묶는 데 사용하였던 UIStackView에 대해 알아보자.

 

UIStackView?

출처 : https://developer.apple.com/documentation/uikit/uistackview/

열 또는 행에 View들의 묶음을 배치할 수 있는 간소화된 인터페이스라고 할 수 있다.

AutoLayout을 활용하여 디바이스마다 달라지는 해상도, 또는 UI가 변할 수 있는 상황에서의 동적인 UI를 구성하는 데 최적화되어있다.

LED 전광판 앱의 사례 처럼, 여러 View 컴포넌트를 활용하는 상황에서 근접해있는 여러 컴포넌트가 동일한 AutoLayout 설정이 필요하다면, 하나의 StackView로 구성해서 간편하게 AutoLayout 제약 조건을 설정할 수 있는 것이다.

 

StackView에서 설정할 수 있는 속성은 다음과 같은 것들이 있다.

• Axis : 내부 View들의 나열 방향을 가로(Vertical) 또는 세로(Horizontal)로 설정
• Alignment : 내부 View들의 정렬하는 방식을 설정
  • Fill : 내부 공간을 채우도록 StackView의 방향에 따라 내부 View들의 가로 또는 세로 길이를 증가
  • Leading : 내부 View들이 StackView의 왼쪽에 정렬
  • Top : 내부 View들이 StackView의 위쪽에 정렬
  • Trail : 내부 View들이 StackView의 오른쪽에 정렬
  • Bottom : 내부 View들이 StackView의 아래쪽에 정렬
  • Center : 내부 View들이 StackView의 중앙선에 정렬
  • First Baseline : 내부 View들을 해당 View들의 첫번째 Baseline(밑줄)에 정렬. Vertical StackView에서만 사용 가능
  • Last Baseline : 내부 View들을 해당 View들의 마지막 Baseline(밑줄)에 정렬. Horizontal StackView에서만 사용 가능

Fill. 출처 : https://developer.apple.com/documentation/uikit/uistackview/alignment/fill

Leading. 출처 : https://developer.apple.com/documentation/uikit/uistackview/alignment/leading

Top. 출처 : https://developer.apple.com/documentation/uikit/uistackview/alignment/1616238-top

Trail. 출처 : https://developer.apple.com/documentation/uikit/uistackview/alignment/trailing

Bottom. 출처 : https://developer.apple.com/documentation/uikit/uistackview/alignment/1616234-bottom

Center. 출처 : https://developer.apple.com/documentation/uikit/uistackview/alignment/center

First Baseline. 출처 : https://developer.apple.com/documentation/uikit/uistackview/alignment/firstbaseline

Last Baseline. 출처 : https://developer.apple.com/documentation/uikit/uistackview/alignment/lastbaseline

 

• Distribution : 내부 View들의 Size를 StackView 내에서 분배할 방식을 설정
  • Fill : StackView 내 공간을 모두 채우기 위하여 각 View의 Size를 재조정.
    만약, 각 View의 원래 Size가 공간을 초과하는 일이 발생한다면 각 View의 Compression Resistance 우선순위에 따라 Size를 감소시키고, 반대의 경우, Hugging 우선순위에 따라 Size를 증가시킨다.
  • Fill Equally : StackView 내 공간을 모두 채우기 위하여 각 View의 Size를 재조정하지만, 모든 View가 동일한 Size를 갖도록 재조정.
  • Fill Proportionally : StackView 내 공간을 모두 채우기 위하여 각 View의 Size를 재조정하지만, 모든 View가 원래의 비율을 유지하도록하면서 Size를 재조정
    
    
  • Equal Spacing : 각 View 간의 간격을 모두 동일하게 설정하여 배치
    
    
  • Equal Centering : 각 View의 중앙선 간의 간격을 모두 동일하게 설정하여 배치

Fill. 출처 : https://developer.apple.com/documentation/uikit/uistackview/distribution/fill

Fill Equally. 출처 : https://developer.apple.com/documentation/uikit/uistackview/distribution/fillequally

Fill Proportionally. 출처 : https://developer.apple.com/documentation/uikit/uistackview/distribution/fillproportionally

Equal Spacing. 출처 : https://developer.apple.com/documentation/uikit/uistackview/distribution/equalspacing

Equal Centering. 출처 : https://developer.apple.com/documentation/uikit/uistackview/distribution/equalcentering

• Spacing : View 들의 간격을 조정하는 속성. StackView를 선택하고 Inspector 5번째 탭 메뉴에서 설정할 수 있다.

StackView에서 View를 구성하는 속성을 결정하는 여러 방식을 알아보았다. CSS 처음 배울 때의 느낌과 비슷한데, 이것들도 처음부터 외울게 아니라 자주 사용하면서 자연스럽게 체화시켜야하는 지식인 것 같다.

 

 

 

패스트캠퍼스 바로가기 : http://bit.ly/3Y34pE0
> 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.