본문 바로가기

학습 노트

 (196)
168. Debugging Auto Layout Debugging Auto Layout Auto Layout에서 오류가 발생하는 이유는 필요한 제약이 추가되지 않은 경우 필요 이상의 제약이 중복돼 있는 경우 처럼 명확하다. 필요한 제약만 올바르게 추가한다면 문제가 발생하는 경우는 없다. 하지만 코드를 사용해 제약을 추가하는 경우 앱을 실행할 때까지 결과를 확인할 수 없으므로, 이러한 규칙을 지키기 어려울 때도 있다. Missing Constraints 예시는 위와 같다. leading 제약만 추가돼있고, Indicator가 붉은 색으로 표시된다. Interface Builder에서는 여러 방식으로 오류를 표현한다. Design Time Visual Indicator Scene에서 해당 제약을 붉게 표현한다. Constraint Issue Indicat..
167. Constraints with Code #5 Constraints with Code #5 Constraint animation 제약에 Animation을 추가해 본다. // // AnimatingLayoutChangesViewController.swift // Constraints with Code Practice // // Created by Martin.Q on 2021/12/20. // import UIKit class AnimatingLayoutChangesViewController: UIViewController { @IBOutlet weak var pinkView: UIView! @IBOutlet weak var heightConstraint: NSLayoutConstraint! @IBOutlet weak var widthConstrai..
166. Constraints with Code #4 Constraints with Code #4 Align Center 사용할 Scene은 위와 같다. Label을 중앙에 배치하고, 파란색 View를 아래에 배치한다. 단, Label은 Intrinsic Size를 사용하도록 크기 제약은 추가하지 않는다. Label과 파란색 View의 간격은 10pt, 파란색 View의 높이는 5pt, 파란색 View의 너비는 Label의 너비와 같도록 제약을 추가한다. 추가된 모습은 위와 같다. NSLayoutConstraint로 제약 추가하기 func layoutWithInitializer() { label.translatesAutoresizingMaskIntoConstraints = false tealView.translatesAutoresizingMaskIntoCo..
165. Constraints with Code #3 Constraints with Code #3 Custom Header View 화면 상단에 View를 배치하고, 너비는 margin에 관계없이 모두 채울 수 있도록 제약을 추가한다. 높이는 100pt로 고정한다. Scene은 위와 같다. 추가되는 제약은 위와 같다. 이때 추가하는 대상은 Safe Area가 아닌 View로 설정해야 하고, Constrain to margins 속성은 비활성화해야 한다. 이렇게 추가하면 System UI의 영역까지 덮게 된다. 만약 System UI를 침범하지 않게 하려면 Safe Area를 기준으로 추가하면 된다. 변경하면 위와 같은 모습이 된다. // // CustomHeaderViewController.swift // Constraints with Code Practi..
164. Constraints with code #2 Constraints with code #2 top, leading, trailing, bottom // // FillParentViewController.swift // Constraints with Code Practice // // Created by Martin.Q on 2021/12/17. // import UIKit class FillParentViewController: UIViewController { @IBOutlet weak var bottomContainer: UIView! @IBOutlet weak var orangeView: UIView! override func viewDidLoad() { super.viewDidLoad() layoutWithInitializer() } } ex..
163. Constraints with Code #1 Constraints with Code #1 제약을 코드를 통해 적용하는 법에 대해 정리한다. 제약은 NSLayoutConstraint 클래스로 구현돼있고, 해당 클래스의 멤버를 통해 제약을 활용할 수 있다. Interface Builder를 통해 제약을 추가하는 것보다 어렵고 많은 코드를 입력해야 하지만, 동적으로 적용되는 제약을 자유롭게 적용할 수 있다. 제약을 추가하는 데에는 두 개의 멤버가 제공된다. constraints(withVisualFormat:) 메서드는 Visual Format Language를 통해 제약을 생성할 때 사용된다. init(item:) 메서드는 가장 기본적인 제약을 생성할 때 사용된다. item1.attr = multiplier * item 2.attr + constant..
162. Auto Layout Practice #2 Auto Layout Practice #2 이전에 만들었던 프로필 화면은 Landscape 상태에서 다음과 같은 문제가 있었다. 프로필 사진이 상태 메시지를 가린다. 좌우의 공간 낭비가 심하다. 따라서 수정 방안은 다음과 같다. 프로필 사진을 같은 경계 상의 왼쪽으로 조정한다. 이름과 이메일 주소를 프로필 사진 아래로 배치한다. 버튼을 오른쪽에 배치한다. 상단 Container의 버튼은 프로필 사진에 가려지게 된다. 따라서 오른쪽으로 이동시킨다. 바로 직전에 배운 Adaptive Layout을 적용해 Landscape에서도 효율적이고 유동적인 UI를 구현하는 것이 목표이다. 1 상단 Container의 좌측 하단 버튼은 Landscape시 오른쪽으로 이동해야 한다. Height가 Compact 인 경우 ..
161. Adaptive Layout Adaptive Layout Adaptive Layout은 모든 기기와 실행 환경에서 동작할 수 있는 하나의 UI를 개발하는 방법. 혹은 이에 필요한 기술이다. iOS 8의 등장과 함께 Adaptive Layout이 등장했다. 이전에는 Storyboard가 아이폰과 아이패드로 분리되어있었지만 이후엔 기기에서 독립적인 Univeral Storyboard를 사용한다. 추가적으로 Size Class, Trait Collection, Auto Layout을 결합해 모든 기기의 환경에서 적용할 수 있는 단일 Layout을 구성한다. 따라서 Adaptive Layout에서 아이패드와 아이패드의 구분은 의미가 없고, Rotation과 Interface Orientation도 사용되지 않는다. Size Class를 사..
160. Auto Layout Practice #1 Auto Layout Practice 지금까지 배운 내용을 정리하며 카카오톡의 프로필과 같은 UI를 따라 구현해 본다. UI 분석은 다음과 같다. 전체 화면을 프로필 이미지를 기준으로 두 개의 Container로 구분한다. 하단 Container는 높이를 고정하고, 나머지를 상단 Cotainer가 채우도록 한다. 상단 Container는 이미지를 표시하고, 좌측 상단에는 닫기 버튼을, 오른쪽에는 메뉴 버튼을 배치한다. 상단 Container 중앙에는 메시지를 배치하고, 상태 메시지 위에는 흰색 Bar도 표시한다. 상단 Container의 좌측 하단에 두 개의 버튼을 표시한다. 하단 Container에는 이름과 mail 주소를 가운데 정렬로 배치한다. 사한 Container의 이름과 mail 아래에 버튼 ..
159. Layout Margin & Layout Guide Layout Margin Layout Margin은 View의 Bound와 View의 내용 사이의 여백으로 iOS 8과 함께 추가된 속성이다. left, right, top, bottom 네 방향을 개별로 지정한다. Layout Margin은 iOS 11 이전과 이후가 다른 방식으로 동작하고, iOS 11 이후로는 Safe Area나 다른 속성에 영향을 받을 수 있다. 버전에 따른 차이 각 View들은 상위 View의 Margin을 기준으로 정렬되어있다. 사진은 강의의 iOS 10 시뮬레이터의 모습니다. 붉은색 View의 제약이 Root View의 Margin을 기준으로 하기 때문에 Navigation Bar와 Tap Bar에 가려진다. View Controller의 Root View인 경우와 아닌 경우..

티스토리툴바