요새 유데미로 ios 개발 공부하는 중이다. 아직 초반이라 storyboard를 먼저 하는 중이다. swiftUI는 강의 후반부에 소개되는 것 같다
초반이라 수월한 편이었는데 auto layout이 나오면서 머리가 조금 복잡해졌다. 그래서 정리할 겸 여기에 기록한다.
auto layout이 뭘까?
사용자가 뷰에 지정한 위치, 크기를 가지고 자동으로 계산해서 전체 뷰를 그려주는 것을 말한다.
auto layout 은 왜 필요한가?
핸드폰 기종에 따라 스크린 사이즈가 달라지거나 또는
스크린 방향이 바뀌면 디자인이 다 무너진다
스크린 사이즈 마다 ui 요소들의 위치를 다 조정할 수도 없고...
스크린 사이즈가 바뀌어도 또는 스크린 방향이 바뀌어도 디자인이 무너지거나 어색해지지 않게 ui 요소들을 배치해야 한다
이렇게 해주는 방법을 auto layout이라고 부르는 것 같다.
(+추가)
좀 더 알아본 결과, auto layout은 뷰의 위치, 크기가 핵심이라고 한다. 이것들만 정해주면 xcode가 알아서 계산해서 디바이스 스크린 사이즈에 맞게 뷰를 그려준다... 고 한다.
예를 들어, 누가 나한테 종이와 펜만 주고 '내가 소리로만 위치와 사이즈를 알려줄테니까 직사각형을 그려봐!' 한다면 그 사람은 나한테
이 직사각형이 x, y 좌표로 어디에 위치해있는지 이 직사각형의 가로, 세로 길이는 얼마인지는 알려줘야 내가 종이에 그 직사각형을
그릴 수 있을것이다.
auto layout을 잡을 때, '내가 xcode라면 이 값들로 뷰를 그릴 수 있을까?' 라고 생각해보면 좀 도움이 될 것 같다.
그리고 이 두 단어가 많이 나오는데 각 뜻은
* leading: 뷰의 오른쪽
* trailing: 뷰의 왼쪽
constraints와 align
먼저 constraints는 어떤 ui 요소를 묶어놓고 싶을 때(?).
스크린 사이즈가 달라져도, 스크린 방향이 가로에서 세로로 바뀌어도 항상 화면을 꽉 채웠으면 하는 이미지 뷰가 있다면..
'add new constraints' 버튼을 눌러서 이렇게 원하는 ui 요소의 위치를 고정시킨다
동서남북(?) 각 숫자 옆에 보이는 v 모양 조그만 버튼을 누르면 safe view 기준으로 고정시킬 것인지 해당 ui 요소를 감싸는 view 기준으로 고정시킬 것인지 선택할 수 있다.
이렇게 constraints 를 추가하면 오른쪽 view controller에 아래와 같은 Constraints 묶음이 생기는데, 이걸 펼쳐서 하나의 constraint를 선택한 후, 오른쪽 size inspector에서 좀 더 세세하게 constraint 설정을 할 수 있다.
그럼 align은 언제 설정하나?
버튼이나 로고 같은 특정 ui 요소를 어떤 방향이나 사이즈에서도 스크린의 정가운데에 두고 싶을 땐 constraints 말고 align로 설정한다.
constraints 로 하면 해당 ui 요소와 그 요소를 감싸고 있는 view 혹은 근처에 있는 또 다른 view와의 거리를 정하게 되는데 이 때 스크린 사이즈가 바뀌거나 스크린 방향이 바뀌면 그 거리가 ui 요소를 정가운데에 위치 시켜 주는 거리라고 보장할 수 없다
(예를 들어 superview 위쪽에서 300pt만큼 떨어지는 constraint를 하나 정해놓고 그 화면을 가로로 돌리면…. 뻔하쥬?)
그래서 이 경우에는 align 버튼을 눌러서 설정한다.
align과 add new constraints 버튼을 같이 활용할 때도 있다.
예를 들어, 어떤 버튼 하나를 가로로 가운데에 놓고 화면 맨 밑(safe area)으로부터 30pt 떨어진 곳에 고정시키고 싶은 경우!
‘가로로 가운데’는 align 에서 horizontally in container 체크한다.
’맨 밑에서 30pt 떨어진 곳에 고정’은 add new constraints 에서 30 입력하고 빨간선 추가하면 된다.
그런데 모든 ui 요소들을 view 하나에 정렬하거나 묶어놓으면 너무 복잡할 것이다. 이 때 view container를 활용하게 된다.
view로 감싸기(Embed in View)
container와 subview(s)라는 말이 나오게 되는데, subview(s)는 어떤 한 컨테이너 안에 들어있는 애들(?)이다.
전체 화면을 컨테이너들을 가지고 등분한 후에 ui 요소들을 각 컨테이너에 넣는다. 이렇게 하면 각 컨테이너들은 자기 안에 들어있는 ui 요소만 신경쓰면 된다. ui 요소들도 자신들을 감싸고 있는 컨테이너를 기준으로 align 하거나 constraint을 추가하거나 하면 되겠다.
그럼 컨테이너는 어떻게 추가하는감?
1. 라이브러리에서 그냥 view를 찾아 추가하면 된다. 그리고 그 컨테이너에 넣고 싶은 ui 요소를 컨테이너에 드래그해서 넣으면 된다. (파일을 폴더에 끌어다 넣는 것처럼)
2. 또는 컨테이너에 넣으려는 ui 요소들을 다 선택한 뒤에 아래 Embed in 버튼을 누르고 view 선택하면 된다.
이제 컨테이너도 추가하고 ui요소도 담았으니 각 ui 요소들을 컨테이너 내에서 정렬(align 클릭)하거나 위치 지정(add new constraints 클릭)해주면 되는데, 정작 컨테이너들의 위치는 아직 지정하지 않은 상태다.
이때 stack view를 사용하게 된다.
stack view
stack view는 말 그대로 view를 쌓는 것인데, 세로 방향으로 view (컨테이너 or ui 요소 ) 들을 쌓을 수도 있고, 가로 방향으로 view들을 나란히 놓을 수도 있다.
필요한 컨테이너들을 선택한 후에 역시 Embed in 버튼 클릭 > stack view 클릭해서 해당 컨테이너들을 stack view로 감싸준다.
그런 다음 이 stack view와 그것을 감싸고 있는 view와의 관계를 설정해주면 된다
stack view 내의 view들끼리의 관계도 attribute inspector에서 설정할 수 있다. 이것은 view controller - stack view를 클릭해야 보인다.
뷰에 걸린 constraints 삭제하기, 빠진 constraints 추가하기
네번째 산 모양 버튼을 누르면 clear constraints로 constraints를 다 삭제할 수도 있고 add missing constraints를 눌러 해당 뷰에 있어야 할 constraints를 추가할 수도 있다.
아직 ios 개발은 초초초초초보이기 때문에 auto layout에 대해서 잘 알지는 못한다.
그래서 위 설명 중에 틀린 것이 있을 수도 있다. 그러면서 또 배우는 것 아닌가?
auto layout은 결국 align과 add new constraints 버튼이 다 하는 것 같다. ui 요소들을 큰 view에 나눠 담고 그것들을 잘 배열하는 것.
'swift & iOS > ios & xcode' 카테고리의 다른 글
| [xcode] 버튼 모서리를 둥글게 하기 (0) | 2022.01.26 |
|---|---|
| [xcode] 텍스트 필드에 숫자 키보드 띄우기 (keyboard type) (0) | 2022.01.26 |
| [xcode] library 단축키 (0) | 2022.01.24 |
| [ios 개발] iOS, iPadOs 버전별 사용 현황 확인하기 (0) | 2022.01.24 |
| [ios 개발] xcode에서 no assistant results 나올 때 (0) | 2022.01.20 |