스탠다드반 AutoLayout 강의
스파르타 코딩클럽
https://fluffy-brie-4fd.notion.site/1-d0123b8d3111493ab7a539ed369de8c6
스탠다드 반 1주차 세션 - 오토레이아웃 | Notion
오토레이아웃
fluffy-brie-4fd.notion.site
AutoLayout
: 제약 조건(Constraints)에 따라 뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 동적으로 지정하는 것
(디바이스가 작아져도 같은 모양을 유지하기 위해 설정하는 것)
오토레이아웃을 위한 필수 요소
1) 위치
2) 크기
( * Lable, Button, Switch 등은 자기 기본 크기를 갖기 때문에 위치만 정해주면 ok )
Aspect Ratio
: 요소의 크기를 일관되게 조정하는 속성으로 요소의 비율이 커지거나 줄어들 때 동일하게 유지할 수 있는 속성
ex) 1:1과 같이 비율을 지정할 수 있다.
* Label은 내용에 따라서 길어질 수 있으므로 오른쪽에 다른 요소가 존재한다면 길어졌을 경우 겹치지 않도록 trailing을 잡아야 할 필요가 있음!
* 부모 Constraint로 자식의 크기가 변형될 수 있고, 자식 Constraint로 부모의 크기가 변형될 수 있음 ( 즉, 크기를 지정하지 않아도 안에 있는 요소들을 통해 오토레이아웃을 잡을 수 있음 )
* warning : 노란 삼각형 에러. 혹시 이거 실수한 거 아니야? 를 알려주는 에러 (무시 가능)
: 열이나 행에 뷰 모음을 배치하기 위한 간소화된 인터페이스
이렇게 스택 뷰를 사용해 주면 기기의 크기가 바뀌어도 디바이스의 가로 정중앙을 기준으로 크기가 일치하게 정렬할 수 있음
스택 뷰에 Distribution 설정을 Fill Equally로 해주면 스택 뷰 안에 뷰들이 동일한 사이즈로 채워짐
그리고 스택 뷰로 view의 크기를 동일한 사이즈로 만들 수도 있지만 1:2와 같은 비율을 줄 수도 있음
일단 요소를 클릭하고 control을 누른 상태로 드래그하면 드래그한 상대에 대하여 Constraint를 잡아줄 수 있음
예를 들어 Top을 설정해 주면
이런 식으로 위에 선이 생긴 것을 확인할 수 있음 그리고 그 요소의 위쪽에 맞춰져서 그 요소의 크기가 커져도 Top을 따라감
여튼 Equal Widths를 설정해 주면 두 버튼의 너비가 같아짐
그리고 속성에서 Multiplier를 설정해 주면 1:2 비율을 설정할 수 있는데
Multiplier에 2를 넣는다는 것은 내가 너의 2배가 되겠다!라는 의미라고 볼 수 있어서
만약에 오른쪽에서 왼쪽으로 드래그해서 제약을 설정했다면 오른쪽이 2이고 왼쪽이 1인 비율로 설정할 수 있음!
반대로 하면 2:1도 만들 수 있음 ~
Spacing (간격) 설정
스택뷰에서 뷰 사이에 간격을 주고 싶을 때 Spacing에 값을 넣어주면 됨
간격을 넣길 원하는 스택뷰를 선택하고, 오른쪽에 Inspector에서 Spacing을 원하는 만큼 지정해 줄 수 있다. 지정해 준 만큼 간격이 생기는 것을 확인할 수 있음!
* 요소의 오토레이아웃을 지정하다가 공간이 남는 경우 누가 더 늘어나야 하는지 정해주어야 함
ㄴ hugging priority : 우선순위(priority 값)가 높은 것은 가만히 있고, 네가 늘어나! 하는 것이 hugging
* 요소의 오토레이아웃을 지정하다가 공간이 없는 경우 누가 줄어야 할지 정해주어야 함
ㄴ compression priority : 우선순위가 높은 것은 가만히 있고, 네가 줄어들어라! 하는 것이 compression
밑으로 내리면 Hugging Priority와 Compression Priority도 설정해 줄 수 있다. 이렇게 Priority가 같은 경우 한쪽에 1만 증가시켜도 우선순위가 높아지는 것!
배운 것을 공부하기 위해 실습을 해보기로 했음!
실습 1
실습은 혼자 해 봤고,,
- 튜터님의 강의를 들으며 얻게 된 꿀팁과 다른 점 정리 !
* 요소 여러 개를 묶고 싶다면 묶고 싶은 요소를 클릭 후 오른쪽 하단에 Embed In을 클릭해서 어떤 것으로 묶을지 선택하면 묶인다!
묶인 것을 풀어주고 싶으면 그 묶인 요소를 선택하고 다시 Embed In을 클릭하면 Unembed가 뜬다. 클릭하면 제거됨
* 그리고 사실 한 요소에 잡힌 Constraints를 다 하나씩 삭제하려면 귀찮고, 다른 요소를 실수로 삭제해 버리는 부상사가 생길 수 있다... ㅜ
근데 요소를 선택하고, Resolve AutoLayout Issues를 클릭하면 Clear Constraints로 한 번에 잡혀있는 제약들을 제거할 수 있음!
* 여기 '열기버튼'의 경우 width를 고정으로 잡아줌 ( 안에 text값이 변하지 않고, 고정된 버튼에 따라 Label의 크기가 결정될 수 있음 )
ㄴ Anchor을 걸어준다고 하는데 말 그대로 닻을 걸고 당기는 느낌
ㄴ 나는 우선순위로 설정했긴 했는데 ( 우선순위(Priority) 한 번 더 공부 ! )
* 난 버튼에 cornerRadius 값을 줬는데 , 버튼 클릭하고 Corner Style을 누르면 Capsule이 있다!
이렇게 귀엽고, 간단하게 cornerRadius 값을 줄 수 있음!
* 그리고 나는 저 별점 부분 그냥 레이블만 넣었는데 스택 뷰에 이미지와 레이블이 담긴 스택뷰를 세 개 추가하셔서 만드셨다! 밑에 당근 마켓에 적용해 봐야겠다!
* Distribution에서 Fill Equally는 가장 긴 요소를 기준으로 동일하게 채움!
* Distribution 에는 Equal Spacing이라는 간격을 동일하게 갖게 하는 기능도 있음!
실습 2
일단 실습,,
거래완료 Label을 만드는 데 Label에는 Padding 속성이 없음.. ㅜㅜ
그래서 찾아낸 방법은 이 링크에 있는 방법인데,, 이 방법대로 해주면
여기에 이렇게 뜨는 데 ,, 그럼 위 링크처럼 추가할 필요 없이 여기에 바로 해도 되지 않나,,?
좀 있다가 해봐야겠다! ..................... 결과는 실패 ,, 안된다.. ㅜ
* 그리고 이거 PaddingLabel 파일 추가해서 build 하니까
Failed to render and update auto layout status for CarrotCell (KGk-i7-Jjw): dlopen(AutoLayoutPractice.app, 0x0001): tried: '/AutoLayoutPractice' (no such file),
대충 이런 에러가 떠서 저 파일 그냥 삭제해 주고 build 함.. ㅠㅠ
Padding 넣는 부분은 다음에 알아보자,, 아마 스토리보드가 아닌 코드로 하면 간단하게 넣을 수 있는 걸로 알고있음,, !
- 튜터님의 강의를 들으며 얻게 된 꿀팁과 다른 점 정리 !
* 예를 들어 레이블에 오른쪽에 다른 요소가 있어서 레이블의 최대범위(?)를 제한해줘야 하는 상황에서는 오른쪽에 레이블의 최대범위를 제한할 요소의 Constraints를 먼저 잡아주고, 레이블의 Constraints를 잡아주면 우선순위가 레이블에 잡히지 않아서 따로 우선순위를 설정해 줄 필요가 없어지고, 오른쪽 다른 요소가 고정되고, 지정한 Constraints에 맞게 레이블이 늘어남
* 두 요소의 Y축을 같게 만들려면 Control 드래그해서 Center Vertically를 설정해 주면 된다.
* hidden 키워드
Hidden키워드는 Drawing에 두 번째에 위치.
Hidden 키워드를 줬을 때, 가격 레이블이 앞으로 당겨오게 해 주려면 StackView로 묶으면 됨
* 꼭 = 이 아니라, ' 적어도 Constant 보다 크거나 작아야 한다. ( ≤, ≥ ) '를 사용해 줄 수도 있다.
* Content Mode
- Scale To Fill : 사진 비율과 상관없이 view에 꽉 채움 _사진의 높이와 너비가 ImageView와 일치
- Aspect Fit : 사진 비율을 맞추고 view의 크기도 맞춰서 채움 (빈 공간 검은 화면) _사진의 긴 쪽(높이||너비)이 ImageView와 일치 (비율 유지)
- Aspect Fill : 사진 비율을 맞추고, view에 꽉 채움 (넘친 공간 자름) _사진의 짧은 쪽(높이||너비)이 ImageView와 일치 (비율 유지)
- Center : 이미지가 뷰의 중앙에 배치됨 ( 내가 실습에서 사용한 Content Mode )
실습 3
카카오톡 프로필 부분을 하는데 보니까 배경사진을 넣으면 이 사진이 살짝 불투명하게 나오는 것을 확인해서 이미지를 불투명하게 해 줬다! (뒷 배경은 검은색으로 바꿈!)
스토리보드에서 이미지 투명도 조절은 Alpha 값을 변경해 줘서 할 수 있음 ! (0은 완전 투명, 1은 완전 불투명)
- 튜터님의 강의를 들으며 얻게 된 꿀팁과 다른 점 정리 !
* 스토리보드는 끝에서부터 쌓아주는 방식이 간편
오토레이아웃이 아닌 다른 이야기..
이렇게 static let identifier로 미리 해놓으면 나중에 오타 났을 때 에러를 막을 수 있다고 한다..! (+ 변경 시 용이)
tableView.register(UINib(nibName: "AppStoreTableViewCell", bundle: nil), forCellReuseIdentifier: "appCell")
// static let identifier 사용 x
tableView.register(UINib(nibName: "CarrotCell", bundle: nil), forCellReuseIdentifier: CarrotCell.identifier)
// static let identifier 사용
확실히 나중에 사용할 때 헷갈리지는 않을 것 같다!
'개인공부' 카테고리의 다른 글
| 😯 (0) | 2024.05.19 |
|---|---|
| UIView 모서리 둥글게 만들기 / 그림자 추가 (2) | 2024.05.07 |
| 동영상 실습 (AVKit) (1) | 2024.05.06 |
| 코드베이스 _ SnapKit 라이브러리 (1) | 2024.05.05 |
| Swift 타입 변환 모음 (3) | 2024.03.26 |