[부스트코스-iOS]추가 공부2

티스토리 뷰

Swift

[부스트코스-iOS]추가 공부2 - 오토레이아웃

unside 2021. 3. 10. 21:48

부스트코스(https://www.boostcourse.org/mo326) 를 수강하면서 배운 내용과 추가로 알고 싶은 내용을 정리하기로 했다.

오늘 정리한 부분은 음원 재생기 애플리케이션/오토 레이아웃/오토 레이아웃이란?과 음원 재생기 애플리케이션/오토 레이아웃/오토 레이아웃 구현하기(코드)를 수강하고 작성한 글이다

오토레이아웃은 앱을 만들때 정말로 중요하다고 생각한다

오토레이아웃

오토레이아웃( Auto Layout ) : 뷰의 제약 사항을 바탕으로 뷰 체계 내의 모든 뷰의 크기와 위치를 동적으로 계산

오토레이아웃의 필요성 : 인터페이스의 절대적인 좌표가 아닌 동적으로 상대적인 좌표가 필요한 경우에 유용

외부변경(External Changes)

슈퍼뷰의 크기나 모양이 변경될때 발생
1. 사용자가 아이패드의 분할뷰(Split View)를 사용하거나 사용하지 않는 경우
2. 장치를 회전하는 경우
3. 활성화콜(active call)과 오디오 녹음 바가 보여지거나 사라지는 경우
  * 활성화콜? : 전화 중일때 상단바가 초록색인 경우를 말하는 듯
4. 다른 크기의 클래스를 지원하기 원할 경우
5. 다른 크기의 스크린을 지원하기 원할 경우

내부변경(Internal Changes)

사용자 인터페이스의 뷰의 크기 또는 설정이 변경되었을 때 발생
1. 애플리케이션 변경에 의해 콘텐츠가 보여지는 경우
2. 애플리케이션이 국제화를 지원하는 경우
3. 애플리케이션이 동적 타입을 지원하는 경우

오토레이아웃 속성

Top : 정렬 사각형의 상단
Baseline : 텍스트의 하단
Horizontal : 수평
Vertical : 수직
Leading : 텍스트를 읽을 때 시작 방향
Trailing : 텍스트를 읽을 때 끝 방향
CenterX : 수평 중심
CenterY : 수직 중심

안전 영역( Safe Area )

콘텐츠가 상태바, 내비게이션바, 툴바, 탭바를 가리는 것을 방지하는 영역, 표준 시스템이 제공하는 뷰들은 자동으로 안전 영역 레이아웃 가이드를 준수하게 되어있음
기존의 상/하단 레이아웃 가이드를 대체, 하위 버전에도 호환하여 작동
1. 안전역역은 iOS 11부터 사용가능
2. iOS 11 미만의 버전에서는 상.하단 레이아웃 가이드 사용
UIView 클래스의 var safeAreaLayoutGuid: UILayoutGuide로 접근 가능

제약( Constraint )

뷰 사이의 관계를 속성을 통하여 정의, 제약은 방정식으로 나타낼 수 있음
Attribute : 뷰에 대한 속성 여기서 Attribute1은 뷰B의 리딩 부분 Attribute2는 뷰A의 트레일링 부분
방정식 해석 : B View의 리딩은 A View의 트레일링의 1.0배에 8.0을 더한 위치가 된다

고유 콘텐츠 크기 ( Intrinsic Content Size )

뷰의 고유 콘텐츠 크기는 뷰가 갖는 원래의 크기로 생각 가능
ex) 레이블의 고유 콘텐츠 크기는 레이블의 텍스트의 크기, 이미지의 고유 콘텐츠 크기는 이미지 자체의 크기 -> 레이블의 높이를 설정하지 않고 글자를 쓸 경우 자동으로 텍스트의 높이만큼 잡히는데 그 이유가 이거 인듯

제약 우선도 ( Contraint Priorities)

오토레이아웃은 뷰의 고유 콘텐츠 크기를 각 크기에 대한 한 쌍의 제약을 사용하여 나타냄. 이때 같은 속성의 다른 제약과 경합하는 경우, 우선도가 낮은 제약은 무시
1. 콘텐츠 허깅 우선도 ( Content hugging priority ) : 콘텐츠 고유 사이즈보다 뷰가 커지지 않도록 제한 - 다른 제약사항보다 우선도가 높으면 뷰가 콘텐츠 사이즈보다 커지지 않음
2. 콘텐츠 축소 방지 우선도 ( Content compression resistance priority ) : 콘텐츠 고유 사이즈보다 뷰가 작아지지 않도록 제한 - 다른 제약사항보다 우선도가 높으면 뷰가 콘텐츠 사이즈보다 작아지지 않음.

레이아웃 마진

기본 간격( default spacing )
레이아웃 마진 가이드( Layout Margins Guide ) : 레이아웃 마진에 따라 형성되는 사각의 프레임 영역

앵커 ( Anchor )

오토레이아웃을 코딩으로 구현하여 제약(Contraint)을 만들기 위해 앵커(Anchor)를 사용
앵커 프로퍼티
1. var constraints: [NSLayoutConstraint] - 제약사항들을 담은 배열
2. var bottomAnchor: NSLayoutYAxisAnchor - 프레임의 하단부 레이아웃 앵커
3. var centerXAnchor: NSLayoutXAxisAnchor - 프레임의 수평 중심부 레이아웃 앵커
4. var centerYAnchor: NSLayoutYAxisAnchor - 프레임의 수직 중심부 레이아웃 앵커
5. var heightAnchor: NSLayoutDimension - 프레임의 높이를 가리키는 레이아웃 앵커
6. var leadingAnchor: NSLayoutXAxisAnchor - 프레임의 리딩을 가리키는 레이아웃 앵커
7. var topAnchor: NSLayoutYAxisAnchor - 프레임의 상단부 레이아웃 앵커
8. var trailingAnchor: NSLayoutXAxisAnchor - 프레임의 트레일링을 가리키는 레이아웃 앵커
9. var widthAnchor: NSLayoutDimension - 프레임의 넓이를 가리키는 레이아웃 앵커

NSLayoutConstraint

view1.attribute1 = view2.attribute2 * multiplier + constant

NSLayoutConstraint(item: _ , attribute: _ , relatedBy: _ , toItem: _ , attribute: _ , multiplier: _ , constant: _ )

item : 제약조건을 받는 뷰1
relatedBy : 제약조건을 받는 뷰 간의 관계 - .lessThanOrEqual, .equal, .greaterThanOrEqual
attribute1 : 뷰1의 제약조건의 속성 - .left, .right, .top, .bottom, .leading, .trailing, .width, .height, .centerX, centerY 등
toItem : 제약조건을 받을 뷰2 - nil 가능
attribute2 : 뷰2의 제약조건의 속성
multiplier : 뷰1의 속성값을 얻기 위해 뷰2의 속성값을 곱함 - 비율로 크기를 설정할 수 있고, 위치잡을 때 사용할 수도 있음
constant : 상수 값 - 비율이 아닌 상수의 값이 필요할때 사용

우선도 설정

NSLayoutConstraint( ... ).priority = UILayoutPriority(rawValue: 20) : 우선도 20으로 설정

하나의 속성(attribute)에 적용할 수 있느 두 개 이상의 제약이 있다면 우선도가 높은 제약이 설정
우선도는 1 ~ 1000까지의 정수로 표현

Visual Format Language

| : superView
- : 표준 간격, 기본은 8p
== : 같은 너비
-10- : 사이의 간격이 10p
<=50 : 50보다 작거나 같음
>=50 : 50보다 크거나 같음
@750 : 750 우선도 지정
H : 수평 방향(가로)
V : 수직 방향(세로)

button 과 textField 사이에 8포인트 또는 기본간격의 제약
- H:[button]-8-[textField]
- H:[button]-[textField]
button의 너비가 50보다 크거나 같도록 넓이 제약
- H:[button(>=50)]
purpleBox가 superView를 기준으로 왼쪽 간격 50p, 오른쪽 간격 50p 설정
- H:|-50-[purpleBox]-50-|
maroonView와 blueView의 간격이 없음(Flush Views)
- H:[maroonView][blueView]
button의 너비는 100p, 우선도는 20
- H:[button(100@20)]
button1과 button2의 너비를 같게
- H:[button(==button2)]
find, findNext, findField와 superView의 간격은 8p, findField의 너비는 20보다 크거나 같도록
- H:|-[fine]-[findNext]-[findField(<=20)]-|

1
2
3
4
5
6
7
8
9
10
11
12

//button, textField와 superView의 간격은 8p, button의 너비는 50보다 작거나 같다
let views = ["button":button,"textField":textField]
var constraint = NSLayoutConstraint.constraints(withVisualFormat:"H:|-8-[button]-8-[textField]-8-|",options:[],metrics:nil,views:views)
constraint += NSLayoutConstraint.constraints(withVisualFormat: "H:[button(<=50)]", options: [], metrics: nil, views: views)
 
self.view.addConstraints(constraint)
 
 
 
 
 
 
Colored by Color Scripter

cs

Visual Format 관련해서 찾아본 블로그
https://nsios.tistory.com/99

저작자표시 비영리 동일조건

'Swift' 카테고리의 다른 글

[부스트코스-iOS] 추가 공부4 - 디자인패턴 (0)	2021.03.12
[부스트코스-iOS]추가 공부3 - iOS View 체계 (0)	2021.03.12
[부스트코스-iOS]추가 공부1 - 앱시닝, 에셋 카탈로그 (0)	2021.03.03
[Firebase]토이프로젝트 (1) - Storage (0)	2020.11.25
Xcode 스토리보드 사용하지 않는 방법 (0)	2020.11.24

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

underside

티스토리 뷰