Внутренние измерения в макетах Compose

Одно из правил Compose заключается в том, что измерение дочерних элементов следует проводить только один раз; двукратное измерение дочерних элементов приводит к исключению во время выполнения. Однако бывают случаи, когда перед измерением дочерних элементов требуется некоторая информация.

Intrinsics позволяет вам опрашивать детей до того, как они будут фактически измерены.

Для составного объекта можно запросить его IntrinsicSize.Min или IntrinsicSize.Max :

• Modifier.width(IntrinsicSize.Min) — Какая минимальная ширина необходима для корректного отображения контента?
• Modifier.width(IntrinsicSize.Max) — Какая максимальная ширина необходима для корректного отображения контента?
• Modifier.height(IntrinsicSize.Min) — Какая минимальная высота необходима для корректного отображения контента?
• Modifier.height(IntrinsicSize.Max) — Какая максимальная высота необходима для корректного отображения контента?

Например, если вы запросите minIntrinsicHeight Text с бесконечными ограничениями width в пользовательском макете, будет возвращена height Text , нарисованного в одну строку.

Внутренние факторы в действии

Представьте, что мы хотим создать компонуемое изображение, отображающее на экране два текста, разделенных разделителем, вот так:

Как это сделать? Допустим, у нас есть Row с двумя Text внутри, которые расширяются до предела, и Divider посередине. Мы хотим, чтобы Divider был такой же высоты, как самый высокий Text , и тонким ( width = 1.dp ).

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )
        VerticalDivider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),

            text = text2
        )
    }
}
IntrinsicSnippets.kt

Если мы посмотрим на это в предварительном просмотре, то увидим, что Divider расширяется на весь экран, а это не то, что нам нужно:

Это происходит потому, что Row измеряет каждый дочерний элемент индивидуально, а высота Text не может быть использована для ограничения Divider . Мы хотим, чтобы Divider заполнял доступное пространство заданной высотой. Для этого можно использовать модификатор height(IntrinsicSize.Min) .

height(IntrinsicSize.Min) устанавливает высоту дочерних элементов, принудительно равную их минимальной внутренней высоте. Поскольку это рекурсивный метод, он запрашивает Row и её дочерние элементы minIntrinsicHeight .

Применим это к нашему коду, и он заработает так, как и ожидалось:

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 4.dp)
                .wrapContentWidth(Alignment.Start),
            text = text1
        )
        VerticalDivider(
            color = Color.Black,
            modifier = Modifier.fillMaxHeight().width(1.dp)
        )
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),

            text = text2
        )
    }
}

// @Preview
@Composable
fun TwoTextsPreview() {
    MaterialTheme {
        Surface {
            TwoTexts(text1 = "Hi", text2 = "there")
        }
    }
}
IntrinsicSnippets.kt

С предварительным просмотром:

minIntrinsicHeight для компонуемого элемента Row будет равно максимальному minIntrinsicHeight для его дочерних элементов. minIntrinsicHeight элемента Divider равно 0, так как он не занимает места, если не заданы ограничения; minIntrinsicHeight Text будет равно значению для текста с заданной width . Следовательно, ограничение height элемента Row будет равно максимальному minIntrinsicHeight для Text . После этого Divider увеличит свою height до height заданного элементом Row .

Встроенные функции в ваших пользовательских макетах

При создании пользовательского Layout или модификатора layout внутренние измерения рассчитываются автоматически на основе приближенных значений. Поэтому расчёты могут быть некорректными для всех макетов. Эти API предлагают возможности переопределения этих значений по умолчанию.

Чтобы указать внутренние измерения вашего пользовательского Layout , переопределите minIntrinsicWidth , minIntrinsicHeight , maxIntrinsicWidth и maxIntrinsicHeight интерфейса MeasurePolicy при его создании.

@Composable
fun MyCustomComposable(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier,
        measurePolicy = object : MeasurePolicy {
            override fun MeasureScope.measure(
                measurables: List<Measurable>,
                constraints: Constraints
            ): MeasureResult {
                // Measure and layout here
                // ...
            }

            override fun IntrinsicMeasureScope.minIntrinsicWidth(
                measurables: List<IntrinsicMeasurable>,
                height: Int
            ): Int {
                // Logic here
                // ...
            }

            // Other intrinsics related methods have a default value,
            // you can override only the methods that you need.
        }
    )
}
IntrinsicSnippets.kt

При создании собственного модификатора layout переопределите соответствующие методы в интерфейсе LayoutModifier .

fun Modifier.myCustomModifier(/* ... */) = this then object : LayoutModifier {

    override fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints
    ): MeasureResult {
        // Measure and layout here
        // ...
    }

    override fun IntrinsicMeasureScope.minIntrinsicWidth(
        measurable: IntrinsicMeasurable,
        height: Int
    ): Int {
        // Logic here
        // ...
    }

    // Other intrinsics related methods have a default value,
    // you can override only the methods that you need.
}
IntrinsicSnippets.kt