Auto Layout (2)
Auto Layout (1)에서 했던것을 바탕으로 Main의 화면도 Rotate했을때 background, image, button들이 짤리지 않고 유지하게 만들어 보자.
- background
up / down / left / right의 제약조건을 모두 활성화 해준다.
하지만 이렇게 safe area가 있으므로 그부분도 조절을 해주자.
Horizontal stauts일때 superview로 설정하는 것이 아닌, vertical status일때 superview로 해주자!
- images 하려고 시도를 해보았으나 안되었다. 이것은 container를 이용해서 만들어야한다.
아래와같이 3section으로 나누어 총 3개의 container를 만들고 진행한다. 
상단부터 시작하면 로고가있는 자리의 superview는 purple area가 된다.
Container를 만들어보자.
- UIview를 만들어 주면된다.
uiview를 추가하니 이렇게 된다 
Dices의 Logo가 가려져있는걸 알 수 있다. Logo를 보이게 한번 적용해보자. 
(Auto layout(1)의 마지막에 로고가 가려진걸 보여지게 하는 법을 알아야겠다고 적었는데 바로 알게 되었다.) 
우리의 시선이 화살표방향으로 보는것이라고 생각하면 이해하기 쉽다.
하지만 지금은 우리가 원하는 view의 하위개념은 아니다. 다시 드래그 해주어 하위로 넣어보자 
이렇게 view안에 arrow가 새로 생기고 그안에 들어가면 하위로 들어가게 된다 (생각보다 드래그로 넣는게 잘 안되었다.)
몇번해보니 옆으로 평행하게 두면 잘되는것같다. 
- Editor - embed in 으로 uiview넣어보기.
uiview안에 두개의 dices image가 들어가기때문에 두개를 command 누른채로 클릭하여 두개를 모두 선택해주고 상단의 Editor -> Embed In -> View를 클릭하여 만들어준다. 
아래와 같이 하위로 자동으로 들어간것을 볼 수 있다. 
- 하단에 있는 interface로 view 추가하기.
view를 추가하는 방법에 대해 알아 보았다. 세가지 방법중 편한대로 하면 될것같다.
하지만 아래와 같이 View가 3개가 추가되었고 정확하게 어떤것에 대한 view인지 하위에 뭐가 있는지 보지않는이상 모른다. 
labeling을 해보도록 하자
위와 같이 해주면 된다.
Labeling이 된걸 알 수 있다.
드래그로 순서를 바꿔주어도 된다. 다만 주의할건 드래그하다가 하위로 들어가지 않게 조심하자!
드래그를 하여 정렬을 해주었다. arrow를 보면 모두 superview의 하위로 들어간걸 알수있다.
이젠 상 중 하단의 view를 모두 추가해 주었다. 그러면 다시 제약조건을 추가해보자.
- Dices로고의 제약조건을 추가해보자.
추가하자마자 에러가 발생하였다. 
우리가 설정한 Container(view)에도 제약조건이 필요하다는것이다. -> Container의 크기나 위치를 지정하지 않았다. -> subview / container안에 제약조건을 추가해도 애매모호하다. -> 어떻게 배치를 해야할지 모르기 때문이다.
StackView가 필요하다.
- 여러 view들을 stack해준다.
- 여기서는 3개의 view들을 세로로 stack한다.
2가지 방법이 있다. (우선 stack view할 view들을 선택해준다 (command누르고 클릭), 여기선 3개를 선택해줄것이다.)
editor - embed in - stackview
아래의 interface에서 stackview
stackview가 생성이 되었다.
stackview에 대한 제약조건을 설정해준다.
이때 현재 top view의 범위가 safe area를 벗어낫기 때문에 arrow를 눌렀을때 보이지 않는다. 
stackview의 위치를 safe area에 걸치게 조절했다. 
이제는 제약조건에 보이는걸 확인할 수 있다. 
다음과 같이 stackview에 대한 제약조건을 설정하였다. 
그리고 stack view bottom을 바꿔준다. 
다음과 같이 바꿔주었다. 
safe area를 남겨두었다. 
현재 위의 사진과 같이 vertical status인 상태이다. 즉 다음과 같다. 
그리고 Stackview에 있는 3개지 view가 현재는 높이가 제각각인데, 이걸 균등하게 맞춰준다.
Distribution에서 Fill equally를 선택한다. 
각 Container들의 높이가 같아졌다. 
그리고 에러가 사라졌다. Roll 버튼을 이제는 제약조건을 이용해 정렬을 할수 있게 되었다. 
middle view에 있는 주사위들이 균등하게 정렬이 되도록 해보자.
- 우선 두 주사위에대한 stack view를 새로만든다.
- 제약조건을 설정해준다 (horizontal, vertical)
— 
spacing을 통해 각 view들의 간격을 조절 할 수있다. 
현재 view의 background가 모두 white인걸 알 수있다.
하지만 실제로 우리는 다른 background image가 있으므로 view들의 배경색을 투명으로 바꿔주자. 
Roll 버튼이 제약조건에 의해 Text Size에 맞게 조절이 되어있다. 
위와 같이 가로 세로를 설정 해줄 수 있다.
바로 warning이 나온다. 
우리가 이렇게 임의로 설정하게되면 혹시라도 긴 text가 나오면 text 전부 보이지 않을 것이다.
세모를 눌러보면 3가지 방법을 제시해준다. 
두번째걸로 선택하면서 warning을 clear하였다.