제약 조건 및 수정자 순서

Compose에서는 여러 수정자를 함께 연결하여 디자인과 스타일을 변경할 수 있습니다. 살펴보겠습니다. 이러한 수정자 체인은 전달된 제약 조건에 영향을 줄 수 있습니다. 컴포저블이 있습니다. 이 컴포저블은 너비와 높이 경계를 정의합니다.

이 페이지에서는 체이닝된 수정자가 제약 조건에 미치는 영향, 그리고 결과적으로 측정 및 배치에 관해 알아봤습니다.

UI 트리의 수정자

수정자가 서로에게 미치는 영향을 이해하려면 수정자가 서로에게 미치는 영향을 구성 단계에서 생성되는 UI 트리에 나타납니다. 대상 자세한 내용은 컴포지션 섹션을 참고하세요.

UI 트리에서 수정자를 레이아웃의 래퍼 노드로 시각화할 수 있습니다. 노드:

그림 1. UI 트리에서 레이아웃 노드를 래핑하는 수정자

컴포저블에 둘 이상의 수정자를 추가하면 수정자 체인이 생성됩니다. 날짜 여러 수정자를 체이닝하면 각 수정자 노드는 체인의 나머지 부분을 래핑 그리고 레이아웃 노드 안에 있는 레이어 노드입니다. 예를 들어 clip와 size 수정자, clip 수정자 노드는 size 수정자 노드를 래핑합니다. 그런 다음 Image 레이아웃 노드를 래핑합니다.

레이아웃 단계에서 트리를 이동하는 알고리즘은 동일하게 유지되지만 각 수정자 노드도 방문합니다 이렇게 하면 수정자가 래핑하는 수정자나 레이아웃 노드의 요구사항 및 배치

그림 2와 같이 Image 및 Text 컴포저블 구현 자체는 단일 레이아웃 노드를 래핑하는 수정자 체인으로 구성됩니다. 이 Row 및 Column의 구현은 간단히 말해서 아이들을 배치하는 것입니다.

그림 2. 그림 1과 동일한 트리 구조이지만 수정자 체인으로 시각화된 UI 트리

요약:

• 수정자는 단일 수정자 또는 레이아웃 노드를 래핑합니다.
• 레이아웃 노드는 여러 하위 노드를 배치할 수 있습니다.

다음 섹션에서는 이 정신 모델을 사용하여 다음에 대해 추론하는 방법을 설명합니다. 수정자 체이닝과 이것이 컴포저블 크기에 미치는 영향을 알아봅니다.

레이아웃 단계의 제약 조건

레이아웃 단계는 3단계 알고리즘을 따라 각 레이아웃을 찾습니다. x, y 좌표는 다음과 같습니다.

1. 하위 요소 측정: 노드는 하위 요소(있는 경우)를 측정합니다.
2. 자체 크기 결정: 이러한 측정값을 기반으로 노드가 스스로 크기를 결정합니다. 있습니다.
3. 하위 요소 배치: 각 하위 노드는 자체 있습니다.

Constraints를 사용하면 처음 두 기간 동안 노드에 적합한 크기를 찾을 수 있습니다. 알고리즘의 단계를 따릅니다. 제약조건은 요소의 최소 및 최대 경계를 정의합니다. 지정할 수 있습니다. 노드의 크기를 결정할 때 측정된 크기 이 크기 범위 내에 있어야 합니다.

제약조건 유형

제약조건은 다음 중 하나일 수 있습니다.

• 제한: 노드의 최대 및 최소 너비와 높이가 있습니다.

그림 3. 제한된 제약 조건.

• 제한되지 않음: 노드가 어떤 크기로도 제한되지 않습니다. 최대 너비 및 높이 경계가 무한으로 설정됩니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph>

그림 4. 무한한 제약 조건.

• 일치: 노드에 정확한 크기 요구사항을 따르라는 메시지가 표시됩니다. 최소 최대 경계가 동일한 값으로 설정됩니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph>

그림 5. 정확한 제약 조건.

• 조합: 노드가 위의 제약조건 유형의 조합을 따릅니다. 예를 들어 제약 조건은 너비를 제한하면서 너비를 제한되지 않은 최대 높이를 사용하거나, 정확한 너비를 설정하되 제한된 높이를 제공합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph>

그림 6. 제한된 제약 조건과 제한되지 않은 제약 조건과 정확한 너비의 조합 높이는 것이 좋습니다.

다음 섹션에서는 이러한 제약 조건이 상위 요소에서 하위 클래스입니다.

상위 요소에서 하위 요소로 제약 조건이 전달되는 방법

레이아웃의 제약조건에 설명된 알고리즘의 첫 번째 단계 상위 단계에서 제약 조건이 상위 요소에서 하위 요소로 전달됩니다. UI 트리에 표시됩니다.

상위 노드가 하위 요소를 측정할 때 이러한 제약 조건을 각 노드에 제공합니다. 허용될 수 있다는 것을 알려주세요. 그런 다음 자체 크기를 결정하고, 자체 크기에 의해 전달된 제약 조건도 준수합니다. 알 수 있습니다.

개략적으로 이 알고리즘은 다음과 같은 방식으로 작동합니다.

1. 실제로 차지하려는 크기를 결정하기 위해 UI 트리의 루트 노드는 하위 요소를 측정하고 동일한 제약조건을 첫 번째 하위 요소에 전달합니다.
2. 하위 요소가 측정에 영향을 미치지 않는 수정자인 경우 제약 조건을 적용할 수 있습니다. 제약 조건은 수정자를 따라 전달됩니다. 체인을 있는 그대로 유지합니다. 이 제약 조건의 크기가 그에 따라 조정됩니다.
3. 하위 요소가 없는 노드('리프'라고 함)에 도달하면 노드'), 전달된 제약 조건에 따라 크기를 결정합니다. 이 결정된 크기를 상위 요소에 반환합니다.
4. 상위 요소는 이 하위 요소의 측정값을 기반으로 제약 조건을 조정합니다. 이렇게 조정된 제약 조건을 사용하여 다음 하위 요소를 호출합니다.
5. 상위 노드의 모든 하위 요소가 측정되면 상위 노드는 자체 상위 요소에 전달합니다.
6. 이렇게 하면 전체 트리가 깊이 우선 순회됩니다. 결국 모든 노드는 크기를 결정하고 측정 단계가 완료됩니다.

자세한 예는 제약조건 및 수정자 순서를 참고하세요. 있습니다.

제약 조건에 영향을 미치는 수정자

이전 섹션에서 일부 수정자가 제약조건에 영향을 미칠 수 있다고 배웠습니다. 있습니다. 다음 섹션에서는 영향을 미치는 특정 수정자를 설명합니다. 제약이 있습니다

size 수정자

size 수정자는 콘텐츠의 기본 크기를 선언합니다.

예를 들어 다음 UI 트리는 300dp의 컨테이너에서 렌더링되어야 합니다. 작성자: 200dp 제약 조건이 제한되어 있으며 100dp과(와) 사이의 너비를 허용합니다. 300dp, 높이 100dp~200dp:

그림 7. UI 트리의 제한된 제약 조건과 있습니다.

size 수정자는 전달된 값과 일치하도록 들어오는 제약 조건을 조정합니다. 이 예에서 값은 150dp입니다.

그림 8. 제약 조건을 150dp로 조정하는 size 수정자

너비와 높이가 최소 제약 조건 경계보다 작은 경우 제약조건이 가장 큰 제약조건 경계보다 크면 수정자는 전달된 전달된 제약 조건을 준수하면서 최대한 가깝게 제약 조건을 테스트해야 합니다. 위치:

그림 9. 전달된 제약 조건을 최대한 준수하는 size 수정자 개선할 수 있습니다

여러 size 수정자를 체이닝하는 것은 작동하지 않습니다. 첫 size 수정자는 최소 및 최대 제약 조건을 모두 고정 값으로 설정합니다. 심지어 두 번째 크기 수정자는 더 작은 크기 또는 더 큰 크기를 요청하지만 여전히 전달된 정확한 경계를 준수하므로 이러한 값이 재정의되지 않습니다.

그림 10. 두 번째 size 수정자 체인(두 번째 값이 전달됨) in (50dp)이 첫 번째 값 (100dp)을 재정의하지 않습니다.

requiredSize 수정자

필요한 경우 size 대신 requiredSize 수정자를 사용합니다. 노드를 사용하여 수신되는 제약 조건을 재정의합니다. requiredSize 수정자는 수신 제약 조건을 적용하고 개발자가 정확한 경계로 지정한 크기를 전달합니다.

크기가 트리 위로 다시 전달되면 하위 노드는 사용 가능한 공간:

그림 11. 들어오는 제약 조건을 재정의하는 requiredSize 수정자 size 수정자

width 및 height 수정자

size 수정자는 제약조건의 너비와 높이를 모두 조정합니다. 다음으로 바꿉니다. width 수정자를 사용하면 고정된 너비를 설정하되 높이는 결정하지 않을 수 있습니다. 마찬가지로 height 수정자를 사용하여 고정 높이를 설정할 수 있지만 너비 결정되지 않음:

그림 12. 고정 너비를 설정하는 width 수정자와 height 수정자 각각 높이와 크기를 조절합니다.

sizeIn 수정자

sizeIn 수정자를 사용하면 정확한 최소 및 최대 제약 조건을 설정할 수 있습니다. 입니다. 세분화된 제어가 필요한 경우 sizeIn 수정자를 사용합니다. 제약 조건을 적용할 수 있습니다

그림 13. minWidth, maxWidth, minHeight, sizeIn maxHeight 설정됨

예

이 섹션에서는 체이닝된 수정자를 위한 것입니다.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

이 스니펫은 다음 출력을 생성합니다.

• fillMaxSize 수정자는 제약 조건을 변경하여 최소 너비 및 높이를 최댓값으로 — 300dp 및 200dp 높이입니다.
• size 수정자는 50dp 크기를 사용하려고 하지만 여전히 수신되는 최소 제약 조건을 준수할 수 있습니다 따라서 size 수정자는 또한 200로 300의 정확한 제약 조건 경계를 효과적으로 출력합니다. size 수정자에 제공된 값을 무시합니다.
• Image는 이러한 경계를 따르며 200x300의 크기를 보고합니다. 트리 맨 위까지 전달됩니다.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

이 스니펫은 다음 출력을 생성합니다.

• fillMaxSize 수정자는 제약 조건을 조정하여 최솟값을 너비 및 높이를 최댓값으로 지정 — 너비는 300dp, 높이는 200dp입니다. 높이.
• wrapContentSize 수정자는 최소 제약 조건을 재설정합니다. 따라서 fillMaxSize로 인해 고정된 제약 조건이 발생했으며, wrapContentSize 에서 다시 재설정함 제한됩니다. 이제 다음 노드가 전체 공간을 차지할 수 있습니다. 전체 공간보다 작을 수 있습니다.
• size 수정자는 제약 조건을 최소 및 최대 경계로 설정합니다. 50
• Image는 50의 50 크기로 확인되고 size 수정자는 전달합니다
• wrapContentSize 수정자에는 특수 속성이 있습니다. Kubernetes는 하위 요소에서 실행되었고 사용 가능한 최소 경계의 중앙에 배치했습니다. 그것으로 전달됩니다. 따라서 상위 요소와 통신하는 크기는 최소 경계가 반환됩니다.

세 가지 수정자만 결합하여 컴포저블의 크기를 정의하고 상위 요소의 중앙에 배치합니다.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

이 스니펫은 다음 출력을 생성합니다.

• clip 수정자는 제약 조건을 변경하지 않습니다.
  • padding 수정자는 최대 제약 조건을 낮춥니다.
  • size 수정자는 모든 제약 조건을 100dp로 설정합니다.
  • Image는 이러한 제약 조건을 준수하며 다음과 같이 100 크기를 보고합니다. 100dp입니다.
  • padding 수정자는 모든 크기에 10dp를 추가하므로 보고된 너비와 높이를 20dp배로 줄입니다.
  • 이제 그리기 단계에서 clip 수정자는 다음과 같이 120 캔버스에서 작동합니다. 120dp입니다. 이 크기의 원 마스크를 만듭니다.
  • 그런 다음 padding 수정자는 모든 크기에서 10dp로 콘텐츠를 인셋하므로 캔버스 크기를 100dp만큼 100로 낮춥니다.
  • Image가 캔버스에 그려집니다. 이미지는 120dp의 원래 원이므로 출력은 둥글지 않은 결과입니다.