어플을 개발했을때 화면이 돌아가고 안돌아가고 그에 따라 다르게 보이는 경우가 있다
그리고 휴대폰의 크기마다 화면이 다르게 보일 경우가 있으므로 우리는 auto Layout이란것을 적용해야한다.
그렇기에 이번 섹션에는 아래와 같이 진행된다.
- Size classes and orientation
- Understand Constraints
- Learn about Alignment and Pinning
- Use Containers for more fine grained control
- Learn about StackViews
하나하나 시작해보자!
https://github.com/appbrewery/AutoLayout-iOS13
시작 파일을 받아주자
초기 실행화면이다.
그런데 화면 돌렸을때 문제가 발생한다
이와 같이 화면이 잘리게된다..
그 뿐만 아니라 다른 기기로 실행하게되면
이렇게 화면이 잘리게 된다. 이 뿐만 아니라 런치화면도 잘리게된다.
그렇기에 이를 해결해주자.
Size classes and orientation
기기별로 사이즈가 다르고 돌릴때.. 화면이 잘릴 수 있으니 자동레이아웃이 필요한거다..
Understand Constraints
스토리보드 밑에 Add New constraints 버튼을 클릭해주자.
이렇게
4가지 제약을 주고 화면을 돌려보자
그러면 이와같이 나올것이다.
그런데... 양옆이 저런이유는
배터리 바와 홈버튼 때문에 그렇다.
그렇기에 safe area에 버튼이 놓이는건 영...아니다.
그런데 우린 이거 배경화면이잖아!!! 그러니깐 전체를 덮는게 맞다!
이렇게 Secont Item을 SuperView로 바꿔주자
이렇게 양 옆에 SuperView를 주면 Safe Area를 다 덮을 수 있다.
Learn about Alignment and Pinning
그런데 화면을 돌렸을때 로고가 잘리게되니깐
로고를 건드려주자!
Alignment 제약을 대신 걸어주면 
이렇게 돌려도 문제없이 나오는것이 확인가능하다..!
constraints를 주면 적용이 안되는 이유는 화면이 세로로 되어있을때와 가로로 되어있을때 끝까지 그 간격을 유지할려고 하기때문이다.
그렇기에 alignment를 줌으로서 가운데에 유지하게 해줄 수 있다.
위의 두개를 조합해서 사용해서도 우리가 원하는데로 만들어줄 수 있다.
이런식으로 두가지 스킬을 합쳐서 위와는 30의 갭을 주고 수직으로 맞출 수 있다.
Use Containers for more fine grained control
그럼 한번 메인보드도 위와같이 돌려도 예쁘게 나오게 만들어보자
우선, 화면을 돌리면 배경도 맞게 나오게 만들어줬다.
하지만 
이 주사위,,가 돌아갔을때 어떻게 예쁘게 나오게 만들 수 있을까?
단순히 위에서 배운대로 마진주고, 나열해주고 하는 방식으로는 해결하지 못한다. 그렇기에 우리는 3파트로 나누면 된다.
이렇게 나눠 주면 되는데
UIView로 파트를 나눠 줄 수 있다.
그렇기에 오브젝트에서 가져와서 만들어줄 수 있고
editor -> embed in -> view로 쉽게 추가할 수 있다.
그 외에도 그냥 밑에거 클릭해서 뷰 넣는 방법도 있다.
그 후 단순히 열맞춤만 해주면 에러가 뜨는데 그 이유는 뷰에 조건을 안줬기때문이다.
이제 다음 강의에서 자세히 알아보자.
Learn about StackViews
컨테이너가 어떻게 보일지를 설정해주자!
왜냐면 아직은 모호하기 때문이다.
그렇기에 스택뷰를 만들어주자
스택뷰를 만들어주고
이전과 똑같이 제약을 주면된다.
만약 세이프아레아가 안뜬다면 이미 그 범위를 넘어서서 이니, 그 범위를 줄이던가 만든 후 인스펙터에서 수정해주자
그리고 스택뷰이 Distribution -> Fill Equall
challenge : calculator layout
not easy,,,
