[15일차] [명언 생성기 앱] 명언 생성 기능 구현하기 - part.1

오늘은 드디어 서브 타이틀이기도 한 명언 생성기의 명언 생성 기능을 구현해보는 실습을 진행할 것이다.

기능이 간단한 앱이기에 내일 중으로 명언 생성기 앱 개발 실습은 마무리 할 예정이다.

 

우선 내내 실습을 진행했던 ExampleProject는 닫고, 명언 생성기 앱을 위한 프로젝트 QuoteGenerator를 만들어주자.

그리고 빠르게 Main.storyboard의 UI 화면을 띄워서 UILabel을 추가하고, 해당 라벨의 텍스트 값을 "명언 생성기"로 변경하자.

 

그럼 이런 화면이 될 것이다.

해당 라벨은 앱의 이름을 표시하는 용도로 사용할 것인데, 가운데 정렬도 안 돼있고 뭔가 보기 불편하다.

앞서 배운 AutoLayout을 적용해보자.

 

Top - Left - Right의 Constraint 값을 24로 설정하고, Align Center를 적용하자.

그러면 이렇게 된다. 아유 깔끔해.

다음으로 추가 UI 컴포넌트인 UIView를 추가하고, 해당 View의 Background를 입맛대로 변경해보자.

이 View는 명언이 표시되는 화면을 나타내는 것이므로, 글씨의 가독성을 너무 해치지 않는 선에서 색상을 선택하는게 좋겠다.

나는 연한 파스텔 톤 초록색이 눈의 피로를 풀어주고 편안한 느낌을 준다고 생각해서 해당 색상을 선택해보았다.

색상을 선택했으면 해당 UIView의 AutoLayout도 앞서 설정한 Label과 동일한 설정값을 주되, Height값만 200으로 줘보자.

음 훨씬 넓어졌다!

이제 해당 영역에 명언과 명언의 주인의 이름을 표시하기 위한 Label을 두 개 추가하자.

윗 부분의 라벨은 명언을 표시하는 용도, 아랫 부분의 라벨은 이름을 표시하는 용도로 사용한다면,

윗 라벨의 Constraint 값은 Top-Left-Right 모두 20, 아랫 라벨의 값은 Bottom-Left-Right 모두 20을 줘보자!

그리고 마지막으로 두 라벨은 겹치면 안되니까 두 라벨 사이의 Constraint 값도 20으로 주게되면?

Content Priority 뭐시기 하면서 컴포넌트 간 우선 순위에 관한 에러가 발생하게 된다.

Hugging Priority를 252로 설정하라고 하는데, 이 친구는 Inspector 메뉴의 6번째 메뉴에서 설정할 수 있다.

 

이 Hugging Priority에 대해 간략히 설명하자면, 각 UI 컴포넌트가 가진 고유한 크기가 개발자가 설정한 Constraint에 의해 침해된다면 더 늘어나거나 더 줄어들게 되는데, 더 늘어나는 것에 저항하는 제약을 Hugging Priority라고 한다.

(줄어드는 것에 저항하는 제약은 Content Compression Resistance)

 

그래서 우리는 지금 이 두 Label 컴포넌트에 대해 늘어나는 것에 저항하는 제약에 대한 우선순위를 설정해서, 만약 두 컴포넌트의 제약사항이 충돌할 때 어느 쪽의 크기를 우선해서 유지해야하는지에 대해 결정을 해줘야 하는 것이다.

두 Label을 번갈아서 눌러봤을 때, Vertical Priority가 동일하게 251로 설정돼있는 것을 확인할 수 있는데, 한 쪽의 우선순위를 더 높은 값이나 낮은 값으로 설정해줘야 충돌하는 상황을 예방할 수 있는 것이다.

그러면 이렇게 에러가 사라지는 것을 볼 수 있다!

이 Priority 값은 250의 단위로 보통 설정된다고 하니, 기억해두자.

자 그럼 Compression Resistance도 설정해주자.

일반적으로 명언은 길어서 내용이 잘려도 괜찮지만 이름은 그럴 수 없으니, 윗 Label의 Priority를 낮춰주자.

 

그리고 마지막으로 명언 생성 버튼을 UI에 추가해서 동일하게 Layout을 맞춰주면 오늘 실습은 끝이다!

 

 

 

이렇게 UI는 완성된 것을 볼 수 있다!

 

 

 

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

패스트캠퍼스 [직장인 실무교육]

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