# Layout Element Properties Node에서 ASLayoutElementStyle이라는 layout element properties를 제공해주며, ASDisplayNode는 ASLayoutElement를 상속받고 있습니다. ```swift 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**를 받습니다. | ```swift // 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) ``` 더 자세한 설명은 [여기](https://texture-kr.gitbook.io/wiki/layout-api/layout-api-sizing)를 참고해주세요. ## 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)

| 부모 레이아웃 상에서 고정 위치를 지정합니다. | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://texture-kr.gitbook.io/wiki/layout-api/layout-element-properties.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.