Layout Element Properties

Node에서 ASLayoutElementStyle이라는 layout element properties를 제공해주며, ASDisplayNode는 ASLayoutElement를 상속받고 있습니다.

let node = ASDisplayNode()
node.style. .... // ASLayoutElementStyle

let element: ASLayoutElement = node
element.style. ... // ASLayoutElementStyle

Texture Layout API는 layout을 build하는 과정에 있어서 개발자에게 필요한 layout element properties 를 style property를 접근하여 설정해줍니다. 용도에 따라 Stack형태와 Absolute 및 Basic Layout으로 총 3가지로 나누어집니다. 용도에 맞게 사용하시는 것을 권장드리며, 용도와 상관없이 모든 ASLayoutElement에서 접근가능합니다.

1. Texture Layout Element Properties에서 주로사용하는 property type 정리

Name	Description
ASDimension	unit과 value값을 받습니다. unit는 auto, points, fraction 3가지가 있으며 value는 CGFloat형태로 넣는다던가 String형태로 %, pt와 같은 suffix를 추가하여 사용할 수 있습니다.
ASLayoutSize	ASLayoutSize는 CGSize와 다르게 CGFloat가 아닌 ASDimension Type의 width, height를 받습니다.

// ASDimension Example

let point = ASDimension(unit: .points, value: 100.0)
let point2 = ASDimensionMake("100.0pt")

let fraction = ASDimension(unit: .fractions, value: 0.5) // 50%
let fraction2 = ASDimensionMake("50%") // 50%

// ASLayoutSize Example
let width = ASDimension(unit: .points, value: 100.0)
let height = ASDimension(unit: .points, value: 100.0)
let relativeSize = ASLayoutSize(width: width, height: height)

let width2 = ASDimension(unit: .fractions, value: 0.5)
let height2 = ASDimension(unit: .fractions, value: 0.5)
let relativeSize2 = ASLayoutSize(width: width, height: height)

더 자세한 설명은 여기를 참고해주세요.

2. Basic Layout Element Properties

Name	Type	Defult Value	Description
width	ASDimension	ASDimensionAuto	레이아웃의 넓이를 지정합니다. 유의사항: width를 설정시 minWidth와 maxWidth가 width로 재설정됩니다.
height	ASDimension	ASDimensionAuto	레이아웃의 높이를 지정합니다. 유의사항: height를 설정시 minHeight와 maxHeight가 height로 재설정됩니다.
minWidth	ASDimension	ASDimensionAuto	레이아웃의 최소 넓이를 지합니다. 지정된 값보다 작아지는 것을 방지합니다.
maxWidth	ASDimension	ASDimensionAuto	레이아웃의 최대 넓이를 지정합니다. 지정된 값보다 커지는 것을 방지합니다.
minHeight	ASDimension	ASDimensionAuto	레이아웃의 최소 높이를 지정합니다. 지정된 값보다 작아지는 것을 방지합니다.
maxHeight	ASDimension	ASDimensionAuto	레이아웃 최대 높이를 지정합니다. 지정된 값보다 커지는 것을 방지합니다.
preferredSize	CGSize	zero, 기본적으로calculatedSizeThatFits: 에 의해 결정됩니다.	레이아웃 요소에 제안하고자 하는 사이즈를 지정합니다. 하지만 지정한 값보다 커지거나 작아지면 상황에 따라 minSize 또는 maxSize가 적용됩니다.
minSize	CGSize	setter (set only)	레이아웃에 대한 최소 사이즈를 지정합니다. 유의사항: 만약 부모 레이아웃의 최소 크기가 자식의 최소 크기보다 작은 경우 자식의 최소 크기로 결정됩니다.
maxSize	CGSize	setter (set only)	레이아웃에 대한 최대 사이즈를 지정합니다. 유의사항: 만약 자식 레이아웃의 최대 크기가 부모의 최대 크기보다 작은 경우 자식의 최대크기가 적용됩니다.
preferredLayoutSize	ASLayoutSize	zero, 기본적으로는 calculatedSizeThatFits: 에 의해 결정됩니다.	레이아웃 요소에 대해 상대적 크기를 제공합니다. 유의사항: ASLayoutSize는 unit값이 point가 아니라 percentage(%, 0.0 ~ 1.0) 입니다.
minLayoutSize	ASLayoutSize	layout spec에 따라 결정	레이아웃 요소에 대해 최소한의 상대크기를 제공합니다.
maxLayoutSize	ASLayoutSize	layout spec에 따라 결정	레이아웃 요소에 대해 최대한의 상대크기를 제공합니다.

3. Stack Layout Element Properties (ASStackLayoutElement)

Name	Type	Default Value	Description
flexGrow	CGFloat	0.0	레이아웃의 증가 너비 비율을 지정합니다.
flexShrink	CGFloat	0.0	레이아웃의 감소 너비 비율을 지정합니다.
flexBasis	ASDimension	ASDimensionAuto	레이아웃이 Stack상 공간이 배분되기전 기본 너비를 지정합니다.
alignSelf	ASStackLayoutAlignSelf	auto	교차 축상에서 레이아웃의 정렬 방법을 지정합니다.
spacingBefore	CGFloat	0.0	Stack방향을 기준으로 동등한 위치 상에서 이전 레이아웃과의 간격을 지정합니다.
spacingAfter	CGFloat	0.0	Stack방향을 기준으로 동등한 위치 상에서 다음 레이아웃과의 간격을 지정합니다.
ascender	CGFloat	0.0	기준선 정렬에 사용됩니다. 레이아웃의 맨 위에서 기준선까지의 거리를 의미합니다.
descender	CGFloat	0.0	기준선 정렬에 사용됩니다. 레이아웃의 기준선에서 맨 아래까지의 거리를 의미합니다.

4. Absolute Layout Element Properties (ASAbsoluteLayoutElement)

Name	Type	Default Value	Description
layoutPosition	CGPoint	zero (x: 0.0, y: 0.0)	부모 레이아웃 상에서 고정 위치를 지정합니다.