iOS) 오토레이아웃 기초 간단 정리

 

오토레이아웃이란?

💡말 그대로 자동으로 레이아웃을 그려주는 기능

 

 

 

 

 

 

 

자동으로 layout을 그리기 위해 필요한 것?

💡View의 위치와 크기를 제공을 해주어야 한다.

 

위치

• 앵커로써 위치를 알게 된다. (x축과 y축)

 

 

크기

• Width(너비)와 Height(높이)

 

 

 

 

 

 

🤗오토레이아웃에서는 View의 위치와 크기가 핵심이다!

→ 가로(x)에 어디에 위치해있느냐, 세로(y)에 어디에 위치해있느냐와 View의 크기를 알면 오토레이아웃에서는 알아서 View를 계산해서 각 디바이스에 맞게끔 View를 그려준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 라이브러리에서 uiView를 가져온 후 노란색으로 색을 변경

 

 

 

 

 

 

1. alt키를 누르고 흰부분에 마우스를 갖다 대면 해당 view의 위치가 나온다.

 

 

 

1. 아이폰 se로 바꾸어 보면 달라진다. 여기서 오토레이아웃을 한다는 의미는 View에 앵커(x,y)를 걸면 View의 위치를 알게 된다. 그 다음엔 View의 크기만 설정하면 된다.

 

 

 

 

 

1. 밑의 아이콘들 중에 세번째를 클릭해서 앵커를 걸어보자. 우선 왼쪽만 한번 걸어보자

 

 

 

 

 

1. 그럼 이렇게 빨간색이 뜬다. 이 의미는 오토레이아웃이 자리를 잡지 않았다는 뜻이다. 어쨌든 가로는 되었다. 아까 언급한 것 처럼 우리가 필요한 것은 View의 위치와 가로, 세로 크기이다. 가로쪽에 앵커를 걸었으니까 오토레이아웃이 view를 그리려고 하면 이제 View의 크기를 알아야한다.

 

 

 

 

 

 

1. width를 설정해보자

 

 

 

 

1. 보면 가로부분은 오토레이아웃이 자리를 잡았다. View의 위치를 알아야하고 View의 크기를 알아야 한다고 했는데, 현재는 x축 즉, 가로부분은 성공이 된 것이다. x축으로 이 View가 어디에 위치해있는지 앵커를 통해 알려주었고, 이 View의 가로 크기를 알려주었기 때문에 가로부분이 완료가 된 것이다. 하지만 아직 빨간 부분이 남아있는데 세로, y축이 아직 되지 않은 것이다. 그럼 어떻게 하면 될까? 일단 View의 y의 위치를 앵커로 알려주자.

1. top으로 70정도 주고

1. xcode가 View의 크기를 모르는 상태여서 빨간색이 뜬다.여기서 오토레이아웃을 잡기 위해서는 View의 크기를 잡아야한다.

1. height를 170정도 해버리면 view의 위치도 알았고 크기도 알았기 때문에 오토레이아웃이 자리를 잡은 것이다.

1. 이제 오토레이아웃을 유지한 채로 크기를 변경해보자. 여기서 직접 눌러서 변경해주어도 되고,

나는 보통 여기서 하는 걸 선호한다.

width를 300으로 바꿔보자

 

 

 

 

 

 

 

그다음 다시 아이폰 13으로 기기 변경을 해보면,

비율이 달라졌다. 왜냐하면 300으로 고정값을 넣었기 때문에 기기별 화면 크기가 다르기 때문에 비율이 달라진 것이다.

 

 

 

 

 

 

 

이제 constraint를 삭제하고 다시 해보자.

 

 

 

 

 

 

이번엔 아래쪽에 걸어보자

이번에 또 다른 방법으로 constraint를 삭제해 볼 건데

 

 

 

 

삼각형 모양을 누르고 clear Contstraints를 해준다.

 

 

 

 

 

 

 

여기서 또 add Missing Constraints라는 걸 선택할 수 있는데 xcode 자체에서 제공해주는 constraints다.

 

 

 

 

 

 

 

 

여기서 보면 가로세로 길이를 주지 않았음에도 성공적으로 오토레이아웃이 잡힌걸 볼 수 있는데 그 이유는 xcode자체에서 스크린의 크기를 안다. 만약 스크린 크기가 1000이라고 하면, 해당하는 위치를 알면 알아서 계산이 들어가 View의 크기를 제공을 하지 않아도 자동으로 크기가 잡히는 것이다.

 

 

 

 

 

 

 

 

(위에 하나 삭제한 후)

그렇기 때문에 사이즈를 제공하지 않은 상태에서 constraint를 하나라도 삭제하게 된다면 이렇게 빨간색 에러가 뜬다. 정리하자면 결국에 오토레이아웃에 필요한것은 View의 위치와 크기인데, 만약 모든 부분에 대해 앵커를 걸게 되면 크기를 따로 정할 필요가 없다.

 

 

 

 

 

 

앵커를 거는 방법 중에 정중앙으로 거는 방법도 있다.

 

 

 

 

 

 

 

걸고나서 왼쪽으로 한 50정도 주고, width와 height를 줘보자

이와 같은 경우는 가로 세로를 고정값을 주었다. 즉, View의 크기를 안다는 것이고, 가로위치는 왼쪽에 50으로 앵커를 걸어주었다.

 

여기서 height를 지워보자.

 

 

 

 

 

 

 

그럼 이렇게 빨간색이 또 뜨는데, 여기서 bottom을 100정도 주면 모양이 어떻게 될까?? 

 

 

 

 

 

 

 

 

 

 

이런 모양이 된다. xcode는 항상 어떤 디바이스든지 해당 스크린 사이즈를 안다.

그 다음 우리는 bottom에서부터 100이 떨어져있다는 것을 제공하였고 xcode에서는 스크린의 사이즈를 알고, 정중앙부터 bottom 까지 50정도 떨어진 것을 통해 해당하는 view가 여기서부터 여기까지 만큼 반대쪽에도 되어있구나 하고 알게 되는 것이다.

그래서 이런 모양이 나오는 것이다.

 

 

 

 

 

 

 

다시 bottom을 300으로 하게되면

동일한 방식으로 적용이 되는 것이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

정리

---

 

오토레이아웃 핵심

1. View의 위치

• 가로 (x축)

• 세로 (y축)

• 앵커로 제공

 

2. View의 크기

• 가로, 세로 지정

• 앵커기반 스크린사이즈로 View의 크기 제공가능