본문 바로가기

2022_iOS 앱 개발자 워크숍/2, Auto Layout12

Auto Layout : Leading, Trailing, Top, Bottom 제약 추가 이번에는 뷰의 거리에 대한 제약속성들에 대해 알아보겠습니다. 해당 제약속성에는 leading, trailing, top, bottom, left, right가 있습니다. 먼저 간단하게 개념을 설명하고, 실습과 함께 알아보겠습니다. leading은 왼쪽에서 오른쪽으로 글을 읽는 나라권에서 left 제약속성과 동일한 의미로 사용합니다. 오른쪽에서 왼쪽으로 글을 읽는 나라권에서는 right와 같은 의미로 사용되며, 글의 시작 시점을 의미하는 속성입니다. - trailing은 leading의 반대 경우로 사용되며, 글의 끝 시점을 의미하는 속성입니다. - top은 윗 마진을 추가할 때 사용하는 속성입니다. - bottom은 아랫 마진을 추가할 때 사용하는 속성입니다. - left는 왼쪽에 대한 속성을 추가할 때.. 2022. 1. 13.
Auto Layout : 제약 공식 제약은 UI를 구성하는 요소사이의 관계를 설정하고 레이아웃 시스템은 제약을 기반으로 최종 프레임을 계산하고 배치합니다. 그리고 프레임 계산에는 item1.attr = multiplier*item2.attr + constant 공식이 사용되는데 공식에 대해서는 실습과 함께 자세히 알아보겠습니다. 먼저 버튼을 하나 추가해주겠습니다. 버튼에 대한 제약을 추가해주겠습니다. 다음 화면에 나와있는 제약에 대한 공식을 왼쪽[leading] : button.leading = 1.0 * view.leading + 50 위쪽[top] : button.top = 1.0 * view.top + 100 이렇게 표현할 수 있습니다. 방금 표현한 공식을 통해 프레임 계산 공식을 자세히 알아보겠습니다. item1.attr = mul.. 2022. 1. 13.
Auto Layout : Bottom, BaseLine 실습을 통해 프레임 정렬과 베이스라인 정렬에 대한 차이점을 알아보겠습니다. 먼저 프레임 정렬입니다. 첫 번째 레이블을 선택하여 제약을 추가하겠습니다. 두 번째 Bottom 레이블을 클릭한 뒤, Horizontal Spacing, Bottom 제약 조건을 추가하겠습니다. (CTRL 키를 누른 상태로 드래그앤드롭하여 제약조건을 추가할 수 있습니다.) 두 레이블에 정렬선이 나타나는데, 프레임을 기준으로 뷰가 정렬된 것을 확인할 수 있습니다. 다음은 베이스라인 정렬입니다. 먼저 첫번째 BaseLine 레이블을 선택합니다. 두 가지 제약을 추가해줍니다. 이번에도 마찬가지로 두번째 레이블을 클릭하여, 첫번째 레이블에 드래그앤드롭 해줍니다. Horizontal Spacing, First Baseline 제약조건을 선.. 2022. 1. 12.
Auto Layout : AspectRatio aspectRatio 뷰의 종횡비를 설정하는 제약으로 뷰에 대한 이미지 비율을 설정할 때 사용하며, 너비나 높이를 기준으로 나머지 계산하는 제약입니다. 또한 aspectRatio 제약을 사용할 때는 너비나 높이의 값을 지정해줘야지 오류가 발생하지 않습니다. aspectRatio 실습 먼저 배경색과 구분되는 뷰를 하나 만들어주겠습니다. 이어서 뷰에 대한 Center X,Y 의 제약을 추가하고 Add New Constraints 항목 중 Aspect Ratio를 선택하고 제약을 추가해보겠습니다. 그럼 다음과 같이 뷰에 빨간선이 나타납니다. 뷰에 Width제약과 Height 제약이 추가되어있는것처럼 보이지만, Aspect 제약이 추가된 것입니다. 제약은 성공적으로 추가되었지만, 너비나 높이에 대한 기준값을 주.. 2022. 1. 12.
Auto Layout : Alignment 이번에는 뷰의 정렬 제약조건을 주는 방법을 간단한 실습과 함께 알아보겠습니다. Alignment 실습 Main.Storyboard 우측 하단을 보면 5가지의 메뉴들이 있습니다. 그 중 왼쪽에서 두 번째 Alignment 버튼을 통한 제약조건을 알아보겠습니다. 먼저 Library에서 Label을 추가하겠습니다. Label을 선택한 상태로 Alignment 버튼을 클릭하면 Add New Alignment Constraints 라는 화면이 실행되며, Horizontally(수평)와 Verically(수직)에 대한 2가지 옵션을 설정할 수 있습니다. 원하는 값을 입력하고 선택을 하면 Add 2 Constraints (제약조건 추가)라는 버튼이 활성화됩니다. 이어서, 클릭을 해보면 수직과 수평의 파란선이 라벨의 .. 2022. 1. 11.
Auto Layout : 기본 개념 오토레이아웃이란?? 뷰들 간의 관계, 즉 제약조건(Constraints)을 이용하여 동적으로 뷰의 크기와 위치를 지정하는 것입니다. Auto Layout 오토레이아웃은 제약조건을 통해 사용자에게 화면을 표시해주는 요소입니다. 사진을 통해 간단하게 설명을 하자면, 파란 선 뷰에서 주고자 하는 제약 안쪽 회색 사각형 (뷰) 제약을 받는 객체 제약 뷰에게 명령을 주는 것 다음과 같이 A와 B라는 뷰가 있습니다. A와 B 동일하게 화면 끝에서 부터 20 만큼의 거리를 유지하게 제약조건이 있고, 각각 화면에서부터 위와 아래로 20씩 멀어지게 제약 조건이 지정되어 있으며 A와 B 서로의 거리는 8만큼 유지하게 제약 조건이 지정되어있습니다. 오토레이아웃이 필요한 이유? 새로운 기기가 출시 될 때마다, 매번 다른 화면.. 2022. 1. 10.

티스토리툴바