[iOS][Swift] 오토레이아웃 개념잡기

프로젝트 만들기

Create new XCode project 를 눌러 오토레이아웃을 공부할 새 프로젝트를 만들어 보겠습니다 !

카테고리는 App 으로 하고

이름은 PracticeAutoLayout 으로 하겠습니다.

저희는 스토리보드에서 AutoLayout 을 연습해볼거니까 Main.storyboad 로 가줍니다.

Label 만들기

그다음 테스트 해 볼 Label 을 하나 만들고 잘 보이게 하기 위해

예쁜 색

백그라운드 색상을 넣어줍니다 !

오토 레이아웃 개념

Swift 의 AutoLayout 개념은 해당 뷰의 x, y 위치 와 해당 뷰의 가로 세로 크기 를 알려주면 Swift 내부에서 뷰의 위치를 계산해 동적으로 렌더링 하게 됩니다.

오토 레이아웃이 필요한 이유

Q. 그냥 마우스로 요소들만 필요한 위치에 갖다 놓으면 되는데 왜 오토레이아웃이 필요한가요

보면 우리는 iPhone 11 에서 작업했기 때문에 iPhone 11 로 실행시켰을 땐 내가 배치한 곳에 잘 배치되는 것을 볼 수있습니다.

그러나 iPhone 8 로 실행시켜보면 사진처럼 위치가 달라지게 됩니다.

문제점

이러한 문제는 우리가 Constraint 제약사항 을 걸어주지 않아 생기는 문제인데요. Label 의 위치를 x, y 절대좌표로 설정해 두었기에 뷰의 크기가 바뀌거나 회전하게 된다면 위치가 달라지게 됩니다.

제약사항 적용 Constraint

X 축에 대한 Constraint

사진처럼 왼쪽 Constraint 를 추가하면 Swift 는 이 Label 이 Safe Area의 왼쪽 (.Leading) 으로부터 100만큼 떨어져 있구나를 알게 됩니다.

Safe Area 에 대한 설명

하지만 적용된 것을 자세히 보시면 위아래로 빨간 선이 생기게 되는데요. swift 가 "뷰의 y좌표를 모르겠어" 즉, y축에 대한 constraint 가 없다는 것을 알려주고 있는 것입니다.

 

위에서 오토레이아웃의 개념을 설명할때 swift 에게 뷰의 x, y 좌표 와 뷰의 크기 를 제공해주어야 한다고 했는데, 지금같은 경우엔 x좌표만 제공한 상태입니다.

 

따라서 우리는 constraint 를 걸어 y 좌표와 크기를 알려주어야 합니다.

Y 축에 대한 constraint

아까 했던 것처럼 Label 의 Y축 Constraint 를 150 만큼 주게 되면

이런 식으로 Constraint 가 잘 잡힌 것을 볼 수 있고,

이렇게 속성에서도 확인할 수 있습니다.

뷰의 크기 지정 Width, height

위에서 x, y좌표에 대한 위치를 Constraint 걸었다면 이번엔 Width 와 Height 에 대해 각각 200, 100 으로 걸어보겠습니다.

이제 Swift 에게 뷰의 x, y 좌표 + 뷰의 크기 를 모두 알려주었으니 위치를 계산하여 동적으로 렌더링 하게 됩니다.

렌더링 결과

결과를 보면 iPhone 8 에서 오른쪽으로 치우친게 보이는데, 이는 Constraint 를 걸 때 Safe Area 의 왼쪽 .Leading 에만 걸었기 때문에 iPhone 8 에선 100만큼 떨어지면 오른쪽으로 치우치게 됩니다.

 

이를 해결하기 위한 방법으로 왼쪽 오른쪽에 모두 Constraint 를 거는 방법이 있고 또 하나는

먼저 x축에 대한 Constraint 를 없애고

Label 의 중앙 x 좌표 Label.Center.X 를 View 의 중앙 x 좌표 SuperView.Center.X 와 일치 시키겠다. 즉 Label 을 가운데로 오게하겠다 라는 뜻이 됩니다.

이렇게 하면 iPhone 11 과 8 모두 같은 곳에 위치하는 것을 볼 수 있습니다 !

+

잘 정리된 블로그가 있어 링크 남깁니다. 여기