iOS / UIkit autolayout 개념정리

언어 학습만 하고 있다가 이러다간 중간에 그만 둘 것 같아서 영상 하나 보자마자 바로 시작했다. 개발은 계속 미루다보면 안할 것 같아서 바로 하는게 좋은것 같다.
스위프트 언어는 나중에 따로 정리해서 올릴 예정.
xcode 사용법은 따로 올려두지는 않을 예정. 다른분들이 더 좋게 설명했으니 그걸 보면 될 것.

기본 지식은 개발하는 정대리님의 유튜브 영상을 바탕으로 직접 해보면서 작성했다. 유튜브를 보지 않아도 그분의 노션이 상당히 정리가 잘되있어서 참고하면 도움이 많이 될 것이다.

🤖 개발하는 정대리 유튜브

😎 개발하는 정대리 노션 정리 목록.

직접 공부하는 노트 작성 감성으로 시작해 보려 한다. 잘못된 정보가 있거나 추가 하면 좋은 내용등은 언제나 환영합니다~

바로 Swift UI를 학습하지 않고 이것부터 하는 이유는 아직 이것으로 많이 업무가 이뤄지고 있고(유지보수) Swift UI는 아직 떠오르는 태양같은 존재라 아직은 시기상조라고 판단했다.

먼저 오토레이아웃의 핵심은.

1. 뷰의 위치
   • 가로 (x축)
   • 세로 (y축)
   • 앵커로 제공

1. 뷰의 크기
   • 가로-세로
   • 앵커기반 스크린사이즈로 뷰의 크기 제공기능

오토레이라웃의 개념은 결국 앵커로써 위치를 알려주고 스크린자이즈를 통해서 뷰를 자동적으로 계산해 주는 것.

-> 쉽게 말하면 위치(x축, y축)을 알고 뷰의 크기만 알면 오토레이아웃에서 알아서 계산해서 디바이스에 맞게 뷰를 그려준다고 생각하면 된다.

xcode를 키고 ios탭을 눌러서 시작하면 이런 화면이 뜨는데 여기서 MainStoryBoard를 눌러준다. 그 후 오른쪽 상단에 표시된 +를 눌러서 아래와 같이 view를 추가한다. (사진상으로는 이미 추가되있음)

처음에 뷰를 추가하면 흰색으로 바탕과 구별이 안가니 표시한것 처럼 색상을 설정해주자.
가장 아랫 부분 view as 부분은 애플 기기 종류를 선택할 수 있고 그에 따라서 스크린의 크기와 뷰의 위치가 달라진다.

레이아웃에 왜 오토가 붙었을까?
오토레이아웃을 한다는 것은 결국 앞에서도 말했지만 변하는 스크린 사이즈에 하나하나 대응하지 않고 앵커라는 것을 걸어서 자동으로 값을 계산해서 뷰를 설정해주는 것이다.

• 앵커는 뭔데?

뷰를 누르고 표시한 마크를 누르면 설정창 하나가 뜬다. 이게 앵커를 걸어주는 작업인데. 체크표시를 기준으로 상하좌우에 설정이 가능하다. 설정이 완료 됐다면 화면에 표시된 예시 처럼 저렇게 뜰 것이다.(모두 정해지지 않았다면 빨간색으로 뜸 -> 오토레이아웃이 자리를 잡지 않음)

항상 핵심을 기억하자.

• 해당 뷰의 x,y 위치를 알아야함
• 해당 뷰의 가로, 세로 크기를 알아야함.

이 두 조건이 맞았을때 정상 적용된다. 사진상으로 보면 x축은 성공했다. 하지만 붉은 색(y축)이 아직 남아있어서 마저 설정해주자.

마저 설정해주고 다른 기기로 바꿔도 이미 설정한 앵커값은 변하지 않는다.
(option키를 누르면 해당 뷰의 상하좌우 거리를 알 수 있다.)

결국엔 가로세로 크기를 알려주고(위치) 뷰의 크기만 알면 된다.