Appendix

Panther·2021년 6월 2일
0

Auto Layout Guide

목록 보기
5/5

Visual Format Language

이 부록은 일반적인 제약을 구체화하기 위해 Auto Layout Visual Format 언어를 어떻게 사용할 수 있는지를 보여줍니다. 이 부록은 표준 여백과 차원, 수직 레이아웃, 다른 속성들에 대한 제약들을 포함하고 있습니다. 덧붙여 이 부록은 완전한 언어 문법을 포함합니다.

Visual Format Syntax

아래 예제는 Visual Format을 사용해 구체화할 수 있는 제약들의 예제입니다. 어떻게 텍스트가 시각적으로 이미지와 일치하는지 살펴보시기 바랍니다.

표준 여백
[button]-[textField]

넓이 제약
[button(>=50)]

슈퍼뷰에 연결
|-50-[purpleBox]-50-|

수직 레이아웃
V:[topField]-10-[bottomField]

플러시뷰
[maroonView][blueView]

우선순위
[button(100@20)]

같은 넓이
[button1(==button2)]

다중 predicate
[flexibleButton(>=70,<=100)]

레이아웃의 완전한 선
|-[find]-[findNext]-[findField(>=20)]-|

표기법은 표현성의 완전성보다 좋은 시각화를 선호합니다. 실제 UI에서 유용한 제약 대부분이 Visual Format Syntax를 사용해 표현될 수 있습니다. 그러나 몇 가지는 그렇지 않습니다. 표현될 수 없는 한 가지 유용한 제약은 고정 aspect ratio(예를 들어 imageView.width = 2 * imageView.height))입니다. 이와 같은 제약을 생성하려면, constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:를 사용해야 합니다.

Visual Format String Grammar

Visual Format 스트링 문법은 아래(리터럴은 코드 폰트로 보여집니다. e는 빈 문자열을 나타냅니다)처럼 정의됩니다.

NOTE
objectOfPredicate 생성에서 viewName은 predicate의 주제가 뷰의 넓이 혹은 높이인 경우에만 수용됩니다. 즉, view1view2가 같은 넓이를 갖도록 구체화시키기 위해 [view1(==view2)]를 사용할 수 있습니다.

구문상 실수가 있다면, 진단 메시지에 예외가 던져집니다. 예를 들어 아래와 같습니다.

Expected ':' after 'V' to specify vertical arrangement
V|[backgroundBox]|
 ^
 
A predicate on a view's thickness must end with ')' and the view must end with ']'
|[whiteBox1][blackBox4(blackWidth][redBox]|
                                 ^
 
Unable to find view with name blackBox
|[whiteBox2][blackBox]
                     ^
 
Unknown relation. Must be ==, >=, or <=
V:|[blackBox4(>30)]|
               ^

0개의 댓글