20210602 - Auto Layout & Responsive UI -2

 

 

자동으로 레이아웃이 조절되도록 할건데

먼저, 방향이 바뀔 때 (세로->가로) UI element들의 위치를 

 

.storyboard 파일의 어떤 element를 선택하고, 화면 우측 하단의 아이콘 중

가운데에 있는 'Add New Constraints'를 선택한다.

 

 

 

먼저 LaunchScreen.storyboard의 AppBreweryBackground를 조정할 것이다.

 

 

 

상하좌우 각각 화면의 끝인 0인 것을 확인하고, 숫자 옆에 있는 점선 부분을 클릭해서 빨간 실선으로 되게 했다.

Constraints를 추가한 뒤 방향을 돌려서 확인해보면

 

 

 

이렇게 적용된 것을 확인할 수 있는데,

좌우에 공백이 생긴 부분은 Safe Area로, 홈버튼이 있는 영역과 배터리잔량, 네트워크 상태 등의 상태 표시줄이 있는 부분이다.

보통 UI element 중에 버튼과 같은 것은 Safe Area에 오면 안되기 때문에 기본적으로 이렇게 세팅이 되어있는데,

지금 다루고 있는 것은 Background이기 때문에 모든 화면을 채우도록 수정해야 한다.

 

 

Safe Area로 설정된 항목을 선택해서, Attributes Inspector를 통해,

Second Item - Superview로 변경해주면 된다.

 

 

 

여기서 Superview란 해당 element를 포함하는 View를 말하며,

항상 화면 전체를 덮는다.

 

 

 

 

AppBre~.trailing만 superview로 바꿔주면, 

trailing edge로부터 0픽셀만큼 떨어진 곳에 맞춰진 것을 확인할 수 있다.

 

AppBre~.leading도 마찬가지로 수정해준다.

 

 

 

 

 

이번엔 AppBreweryLogo를 조정할 것이다.

 

백그라운드를 수정할 때와는 다르게,

 

두 번째에 위치한 Align 버튼을 눌러서 조정해준다.

 

 

 

 

Horizontally in Container,

Vertically in Container

두 개를 체크해주고 Add하면 끝

 

 

 

Challenge )

Label 하나를 추가해서, 기존의 로고보다 30px 아래에 있게 만들 것

 

->

Horizontally 0으로 alignment constraint 추가,

new constraint로 AppBreweryLogo로부터 30px 아래에 위치하도록 constraint 추가

 

 

 

 

---

 

 

Main.storyboard 수정

 

 

Challenge )

 

Background 수정해서, 어떤 기기/방향에서도 화면을 모두 채우도록 할 것

 

->

 

LaunchScreen에서와 마찬가지로,

백그라운드에 constraint을 부여한다. Safe Area 대신 View를 기준으로 만들어야 하는 것에 주의한다.

 

 

---

 

 

Main.storyboard에서 백그라운드 이미지를 제외한 다른 UI element 들을 배열하기 위해,

LaunchScreen에서 사용했던 것처럼 pinning의 방식을 사용할 수 없다.

4가지의 이미지나 버튼, 로고가 있는데 핀을 해두고 가로방향으로 돌리면 공간이 나오지 않기 때문이다.

 

-> 화면을 분할하는 container를 사용할 것이다.

 

 

화면을 동일한 크기로 3등분하여, 각 영역의 요소들을 'UIView'라는 컨테이너에 포함시킬 것인데,

3가지의 방법이 있으며, 각각의 element들을 다른 방법으로 UIView에 embed시킬 것이다.

 

 

1. Object Library - UIView 검색, 화면의 적당한 곳에 배치한 다음,

새로 추가한 View 안에 DiceeLogo를 옮겨준다.

 

 

 

2. 두 번째 영역에 있는 주사위 이미지들을 선택한 뒤에 (커맨드 키를 누르고 다중선택 가능)

Editor - Embed in - View를 선택한다.

 

 

3. 세 번째 영역에 있는 'Roll' 버튼을 선택한 다음,

 

우측 하단의 마지막 아이콘인 'Embed In' 클릭,

 

 

 

View에 넣어준다.

 

 

 

UIview의 이름이 모두 'View'로 되어 있어서 헷갈리기 때문에

이름을 바꿔줄 것이다.

 

 

 

 

 

inspector 중에서 4번째 아이콘인 'Identity inspector'를 선택하여 'Label'을 각각 정해준다.