[28일차] [계산기 앱] 계산기 UI 그리기 part.1

챌린지 종료 3일 전이다. 챌린지 종료까지 계산기 앱을 다 만들 수 있길...

 

우선 계산기 앱을 위한 새로운 프로젝트를 생성하고 메인 스토리보드를 불러와보자.

그리고 계산 결과를 출력할 Label을 하나 생성한 뒤, 제약 조건을 다음과 같이 추가해주자.

실수로 사진에는 포함시키지 않았는데 Height 값도 150으로 설정하자.

그럼 이렇게 결과를 표시하는 화면의 틀은 잡혔다.

다음은 계산기의 키패드(숫자, 기능)를 어제 배운 UIStackView를 활용해서 만들어보자.

 

일단 키패드 View로 활용할 UIView를 하나 추가한 뒤, 제약조건을 Top, Leading, Trail, Bottom 모두 24로 설정해주자.

그리고 해당 View 안에 다음과 같이 총 18개의 UIButton을 추가하면 된다.

뭔가 좀 많아보이는데... 당연하게도 전부 쓰임새가 있는 버튼들이다.

다음은 StackView 설정을 해보자. 일단 각 행을 모두 Horizontal StackView로 설정하는 것으로 시작한다.

그리고 저 5개의 StackView 또한 하나의 Vertical StackView로 정의하자.

그럼 이렇게 18개의 버튼이 하나의 단위로 묶이게 된다.

그리고 이 키패드는 View 내부를 꽉 채워야하므로, 제약조건 0 0 0 0 설정을 통해 꽉 차게 만들어보자.

그리고 그 상태로 Inspector의 Size 탭 메뉴에 들어가 Bottm Space Size의 우선순위를 750으로 낮춰보자.

여기서 낮춰준 이유는 나중에 Button의 Size를 늘리는 작업이 기기의 해상도를 넘어서는 범위까지 간다면, 전체 UI가 흐트러질 수 있기 때문에 미리 제약조건에 대해 유연화를 시켜주는 것이라 생각하면 된다.

이제 이 키패드의 틀에 대해서 보기 좋게 비율과 크기를 수정해보자.

처음은 5개의 Horizontal StackView에 Equal Heights, 동등한 높이를 갖도록 제약조건을 추가한다.

이제 5개의 StackView가 모두 동일한 높이를 갖게 되었다.

 

다음은 이 5개의 StackView가 속한 Vertical StackView의 속성 인스펙터 메뉴에서 Alignment와 Distribution을 설정해서, 각 컴포넌트가 해당 View 내에서 어떠한 비율로 부피를 차지하는지 설정해주자.

일단 Alignment와 Distribution은 모두 Fill, Spacing은 8로 설정해주자.

오 이젠 상당히 그럴듯해졌다. 이젠 하위 StackView 5개의 속성을 설정해보자.

Alignment는 그대로, Distribution은 Equal Spacing으로, Spacing 값은 5로 설정한다.

그럼 이렇게 동등한 간격을 두고 View를 꽉 채우게 된다.

 

다음은 이 각각의 Button들이 정사각형의 형태를 띄도록 설정해보자.

일단 2행 ~ 5행의 버튼(총 16개)들을 모두 선택해주고, Aspect Ratio 제약조건을 추가해준다.

그럼 이렇게 각 Button에 대해 가로 및 세로의 비율을 설정할 수 있게 된다.

Inspector 메뉴에서 Aspect Ratio -> Multiplier를 1:1로 설정해주면 가로 세로 비율이 동일한 정사각형의 Button을 만들 수 있다.

모두 적용해주면 이렇게 깔끔한 Button들의 나열을 볼 수 있다.

그런데 1행의 빈 공간이 조금 신경쓰인다. 1행의 첫 번째 버튼은 AC, 두 번째 버튼은 계산 결과를 출력하는 "=" 버튼인데, AC 버튼을 조금 길게, 비율에 맞도록 늘려보도록 하자.

초록색 네모의 버튼과 파란색 네모의 버튼의 길이를 맞춰보자. 방법은 의외로 간단하다...만 뭔갈 잘못했는지 2행 3열의 Button Trail 기준으로 AC 버튼의 Size를 늘리면 UI가 와장창 깨진다. 어쩔 수 없이 두 번째 Button으로 맞춰보자...

AC 버튼을 선택하고 우클릭 드래그를 두 번째 Button으로 해주면 제약조건 설정 메뉴가 나오는데, 그 중에 Trail로 설정해보자.

음... 이렇게 계획대로는 아니지만 깔끔한 버튼 구성을 완성했다!

 

 

 

 

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

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