본문 바로가기

학습 노트/iOS (2021)

 (96)
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인 경우와 아닌 경우..
157 ~ 158. Constraint Constraint 제약은 UI를 구성하는 요소 사이의 관계를 설정하고 Layout 시스템은 제약을 기반으로 최종 프레임을 계산하고 배치한다. item1.attr = multiplier * item2.attr + constant 이에는 위의 공식이 사용된다. Equation Scene에 생성되어있는 버튼에 다음과 같이 제약을 추가한다. 새롭게 추가된 왼쪽 여백 제약은 공식으로 다음과 같이 표현할 수 있다. button.leading = 1.0 * view.leading + 50 상단의 여백은 공식으로 다음과 같이 표현할 수 있다. button.top = 1.0 * view.top + 100 공식의 item1과 item2는 제약 대상을 의미한다. 보통은 View를 지정하지만 경우에 따라 Layout Gui..
156. Auto Layout Interface Builder Technique Auto Layout Interface Builder Technique 새 프로젝트를 생성한 뒤 위치와 크기를 조금 변경했다. 지금 상태에선 어떠한 제약도 추가하지 않았지만, 앱을 실행하면 현재 Frame을 기반으로 자동으로 제약이 추가된다. 이러한 제약을 '프로토타이핑 제약 (Prototyping Constraints)'라고 부른다. 이름 그대로 실제 앱에서 사용하기에 적합하지 않고, Autoresizing Mask와 함께 UI 개발 초기에 Prototype 목적으로 사용하기 적합하다. 제약을 추가하기 시작하면 이 프로토타이핑 제약은 사용할 수 없다. 우측 하단의 5개의 버튼 중 가운데에 위치하는 버튼이 제약을 추가할 수 있는 팝업을 표시한다. 해당 팝업에서 오른쪽과 같이 위, 왼쪽, 오른쪽 그리고 높..
154 ~ 155. Auto Layout and Frame-based Layout & Autoresizing Mask Auto Layout 해상도 iPhone 3GS Portrait Only 320 * 480px iPad 1 Gen Portait & Landscape 768 * 1024px iPhone 4 Portait & Landscape 320 * 480pt, 640 * 960px(Retina Display) iPad 3 Gen Portait & Landscape 768 * 1024pt, 1536 * 2048px (Retina Display) 아이폰이 처음 나왔을 당시 Portrait 모드만 존재하고, 단일 해상도를 가지고 있었다. 이후 아이패드가 출시되면서 Portrait 모드와 Landscape 모드로 구분되고 새로운 해상도에 대한 대책이 필요했다. 하지만 당시에는 아이폰 앱과 아이패드 앱을 별도로 구분 지어 개..
145 ~ 153. Gesture Recognizers Gesture Recognizer Tap Gesture 흔히 '터치'라고 부른다. 목록에서 원하는 항목을 선택하거나 버튼을 터치하는 등의 제스쳐를 의미한다. Pan Gesture 흔히 'Drag'라고 부른다. 손가락으로 화면을 누른 상태로 이동한다. Pinch Gesture 손가락 두개로 터치한 다음 사이의 간격을 넓히거나 좁힌다. Rotation Gesture 손가락 두개로 터치한 다음 간격을 유지하며 회전시킨다. Swipe Gesture 화면을 특정 방향으로 빠르고 터치하는 동작이다. Long Press Gesture 화면을 0.5초 이상 누른다. 사람마다 Gesture를 구사하는 방식이 조금씩 다르기 때문에 이를 정확히 인식하도록 직접 구현하는 것은 매우 어렵다. iOS에서는 이미 구현되어있는 UI..

티스토리툴바