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에서 접근가능합니다.
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)
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에 따라 결정 | 레이아웃 요소에 대해 최대한의 상대크기를 제공합니다. |
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 | 기준선 정렬에 사용됩니다. 레이아웃의 기준선에서 맨 아래까지의 거리를 의미합니다. |
Name | Type | Default Value | Description |
layoutPosition | CGPoint | zero (x: 0.0, y: 0.0) | 부모 레이아웃 상에서 고정 위치를 지정합니다. |
Last modified 4yr ago