안녕하세요!! 이웃님들, 개발하는 윤기사입니다! 😎
이번 포스팅에서는 오토레이아웃의 기본인 제약 조건에 대해 포스팅 해볼건데요!
오토레이아웃이라는 것은 뷰에 설정되어 있는 제약 조건(Constraints)를 기반으로 해서 그 뷰의 크기와 위치를 계산해서, 일정한 위치에 위치하게끔 해주는 건데요!
쉽게 말하면, 아이폰 11, 아이폰 12프로맥스, 아이폰 8, 아이폰 SE 다 디바이스 크기가 다르니까, 그 사이즈에 따라서 위치와 사이즈가 조절되어 어느 디바이스든 원하는 식으로 표현하는 것을 뜻합니다!
제약 조건은 객체가 가지는 여백, 정렬, 다른 객체와의 간격 등을 조절할 수 있습니다.
바로 간단하게 예시 하나 들어가보도록 하겠습니다!!
1. Xcode에서 File -> New Project 하나 만들겠습니다.
그리곤 메인 스토리보드로 와주셔서 Cmd + Shift + L 눌러서 objects 중에 uiview를 하나 불러오겠습니다!
2. 불러온 uiView의 크기를 잘 보이게 드래그해서 늘려주시고, BackGround 컬러는 잘보이게 설정해줍니다.
자 이런식으로 uiView의 오토레이아웃을 설정을 안해주면
아이폰 11과 아이폰8에서의 네모난 뷰 위치가 완전 다르게 나오시는걸 확인할 수 있습니다!!
3. 스토리보드 오른쪽 밑에 Add New Constraints 버튼을 눌러주시면 아래와 같이 뜹니다.
여기서 상, 하, 좌, 우 여백에 관한 제약 조건, 뷰의 너비와 높이, 뷰의 비율을 제약조건으로 설정할 수 있습니다.
4. 그 바로 왼쪽 버튼을 눌러보시면 Add New Alignment Constraints라고 정렬에 관한 제약 조건을 추가할 수 있습니다.
뷰의 Horizontally in Container 와 Vertically in Container 의 값을 0으로 설정해줍니다.
그러면 아래와 같이 스토리보드 가운데에 뷰가 위치하는 것을 볼 수 있습니다.
하지만 색상이 빨간색이 나왔네요? 그렇다는 건 아직 프로그램에서 정확한 위치를 모른다는 겁니다!
왜그럴까요? 바로 저희는 위치만 정해주었으니까요! 상,하,좌,우 여백을 모르니까 이 뷰의 크기도 모르는 겁니다.
5. 그래서 저희는 뷰의 Width(너비)와 Height(높이)를 설정해 줍니다. 예를 들어 300과 200의 직사각형 모양으로 설정을 해볼게요!
뷰의 위치와 크기까지 모두 알려주었으니 이제 파란색 선으로 제약 조건이 성공적으로 연결된것을 확인할 수 있습니다👍
🍎 뷰에 설정되어 있는 제약 조건은 오른쪽 사이즈 인스펙터 영역에서 확인할 수 있고, Edit 버튼을 눌러 수정도 가능합니다.
🍎 설정되어있는 제약 조건을 지우고 싶다면 Constraints 버튼 옆에 삼각형 모양을 누르시면 아래와 같이 뜹니다.
🍎 한가지 주의하셔야 할 것은 위의 Clear는 선택된 뷰, 아래 Clear는 모든 뷰니까 주의하시기 바랍니다!!
✌️ 한 번 더! 만약 아래와 같이 디바이스에 따라 뷰의 크기가 다르다면!?
그럴 땐 제약 조건을 상,하,좌,우 여백 제약 조건을 설정하고, 뷰의 너비와 높이를 제약 조건으로 걸어주면 됩니다!
이렇게 설정 하시면 디바이스가 변경이 되어도 동일한 레이아웃을 설정할 수 있습니다!!
요즘 스위프트에 재미가 들려서 열심히 공부하고 있는데요, 더 열심히 해서 많은 알짜배기 정보들!
우리 이웃님들께 쉽게 이해하실 수 있도록 포스팅 많이많이 해드리겠습니다!
이상 오늘 포스팅은 여기서 마치겠습니다~~
그럼 오늘도 빡코딩!!
'iOS_Swift 앱개발👍' 카테고리의 다른 글
| [iOS_Swift] NavigationController(네비게이션 컨트롤러)_ 7 (30) | 2022.07.13 |
|---|---|
| [iOS_Swift] 스택뷰(StackView)의 모든 것_ 6 (30) | 2022.07.11 |
| [iOS_Swift] TextField Strong PassWord 현상 해결법_ 4 (31) | 2022.07.08 |
| [iOS_Swift] TextField UI설정에 관한 모든 것 _ 3 (30) | 2022.07.06 |
| [iOS_Swift] Button을 이용한 이미지 바꾸기 _ 2 (31) | 2022.07.05 |
