Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :

[iOS] Auto Layout

/
/
/
92 Views

Auto Layout은 제약(Constraints) 기반의 서술형 레이아웃 시스템입니다.
디바이스의 크기가 다양해지면서 Auto Layout은 선택이 아닌 필수사항이 되었다.

Constraints

제약(Constraint)은 레이아웃 시스템이 이해할 수 있는 방식으로 표한한 요소입니다.
개발자가 필요한 제약을 설정하면 제약사항을 기반으로 가장 적합한 좌표와 크기를 계산하여 뷰에 할당한다.

y = m * x + c
targetView.attribute = multiplier * referenceView.attribute + constant

A버튼의 너비가 B버튼 너비의 2배라면 A.width = 2 * B.width + 0 이 된다.
A버튼의 가로 위치가 상위 뷰의 중앙에서 10pt 떨어진 위치라면 A.centerX = 1 * SuperView.centerX + 10 이 된다.

Auto Layout 장점

  • 화면 크기와 디바이스 방향에 따라 유연하게 업데이트 되는 UI를 비교적 쉽게 구현할 수 있습니다.
  • 향후 새로운 해상도의 디바이스가 출시되더라도 업데이트 없이 일관된 UI를 유지할 수 있습니다.
  • 화면 좌표를 직접 계산하거나 수많은 분기 코드를 작성할 필요가 없습니다.
  • 우선 순위와 활성화 속성을 활용하여 특정 조건에 따라 업데이트 되는 UI를 구현할 수 있습니다.
  • 지역화 문자열을 사용할 때 문자열의 너비에 따라 버튼이나 레이블의 너비가 자동으로 업데이트 됩니다.
  • Content Hugging과 Compression Resistance의 우선 순위를 조절하여 동적인 UI를 더욱 세부적으로 제어할 수 있습니다.
  • 뷰 에니메이션, 모션 이펙트와 함께 사용할 수 있습니다.
  • 동일한 계층구조에 존재하지 않는 뷰 사이의 관계를 설정할 수 있습니다. (Spring and Struts 모델에서는 부모-자식 관계에 있는 뷰 사이의 관계만 설정할 수 있습니다. 특히, 부모 뷰의 크기나 위치는 자식 뷰에게 영향을 줄 수 있지만, 자식 뷰의 크기나 위치는 부모 뷰에게 영향을 주지 않습니다.)
  • 스토리보드에서 제약을 쉽게 추가할 수 있습니다. 코드를 통해 런타임에 동적으로 추가하거나 제거할 수 있습니다.

NSLayoutConstraint

Auto Layout에서 제약은 NSLayoutConstraint 클래스의 인스턴스이다.

속성 설명
firstItem, secondItem 제약 공식에서 targetView와 referenceView에 해당되는 속성입니다. firstItem은 필수 속성이지만 secondItem은 생략할 수 있다.
firstAttribute, secondAttribute 제약 공식에서 attribute에 해당되는 속성입니다. 이 속성의 자료형은 NSLayoutAttribute 열거형이다.
multiplier 제약 공식에서 multiplier에 해당되는 속성이다.
constant 제약 공식에서 constant에 해당되는 속성이다. 제약을 생성한 후에 값을 변경할 수 있기 때문에 런타임에 제약을 동적으로 업데이트 하는데 활용된다.
constant 값을 변경하는 것으로 요구사항을 충족시킬수 있다면 이전 제약을 제거하고 새로운 제약을 추가하는 것보다 constant 값을 변경한 후 제약을 업데이트하는 것이 성능에 유리하다.
priority 제약의 우선순위를 지정하는 속성으로 1에 1000 사이의 값을 할당할 수 있다. 일반적으로 숫자 값을 직접 할당하지 않고 UILayoutPriority 열거형을 사용한다.
activate 제약의 활성화 상태를 지정하는 속성입니다. 특정 조건에 따라서 동작하는 제약을 만드는 용도로 활용할 수 있다. 비활성화된 제약은 우선 순위에 관계없이 레이아웃 계산 과정에서 제외된다.
identifier 제약에 특별한 이름을 부여할 수 있는 속성이다. 필수 속성은 아니지만 가독성이 높은 이름을 할당해두면 디버깅에 “엄청나게 큰” 도움이 된다.

Auto Layout with Code

Auto Layout 적용

인터페이스 빌더에서 Auto Layout을 통하여 다중 화면 크기에 대응할 수 있도록 쉽게 화면을 설계 할 수 있다.
런타임시 뷰를 추가하거나 삭제하기 위해 Auto Layout을 코드로 제약 조건을 생성, 추가, 삭제 및 적용할 수 있다.
그러기 위해서 View의 translatesAutoresizingMaskIntoConstraints 속성 값을 NO로 설정하여 Auto Layout을 하도록 한다.

item으로 제약조건 만들기

제약조건(Constraint)는 사용하면 느리고 많은 코드를 작성해야 하지만 제약조건을 추가하여 원하는 레이아웃을 얻을 수 있다.
다음은 제약조건을 만드는 메소드이다.

parameter Description
view1 제약조건의 왼쪽 뷰
attr1 제약조건의 왼쪽 뷰 속성
relation 제약조건의 왼쪽과 오른쪽 뷰 간의 관계
view2 제약조건의 오른쪽 뷰
attr2 제약조건의 오른쪽 뷰 속성
multiplier attr1 값이 attr2 값에 얻은 값으로 곱하도록 하는 값
constant attr1 값이 attr2 값(곱해진 후의 값)에 추가하는 값

view1.attr1 = view2.attr2 * multiplier + c

예제

시각적 형식 언어(Visual Format Language)

제약조건을 만드는 또 한가지의 방법은 constraintsWithVisualFormat:options:metrics:views:을 사용한다.

시각적 형식 문자열(visual format string)은 설명하고자 하는 레이아웃의 시각적인 표현을 제공한다. 시각적 형식 언어(visual format language)는 읽을 수 있도록 설계되어 있으며 뷰는 대괄호로 표시되고 뷰간의 연결은 하이픈(또는 뷰들을 떨어뜨리는 숫자에 의해 두개의 분리된 하이픈)을 사용한다. 더 많은 예제와 시각적 형식 언어 문법을 배울 수 있는 Visual Format Language 을 참고하시면 된다.

parameter Description
format 제약조건을 시각적 형식으로 나타낸 문자열
options 시각적 형식 문자열에 모든 객체들의 속성과 레아아웃의 방향을 설명
metrics 시각적 형식 문자열에 나타난 상수의 집합이며, 키는 문자열, 값은 NSNumber 객체
views 시각적 형식 문자열에 나타난 뷰의 집합이며 키는 문자열, 값은 뷰의 객체

예제


Leave a Comment

이메일은 공개되지 않습니다.

This div height required for enabling the sticky sidebar