Layout API @MoyuruAizawa

Moyuru Aizawa Software Engineer of Catlog, RABO. Previously at Azit, CyberAgent, and Eureka. Love Metal, Hardcore and EDM. MoyuruAizawa

No content

Layout APIͱ͸?

‣ Column/Row͕಺෦Ͱ࢖༻͍ͯ͠ΔAPI ‣ ContentͷϨΠΞ΢τΛࣗ༝ʹܾఆͰ͖Δ ‣ ViewGroup΍LayoutManagerʹࣅͨଘࡏ ‣ Column/RowͰ͸දݱͰ͖ͳ͍͕ConstraintLayout΍BoxΛۦ࢖͢Δ ͷ͸ͪΐͬͱ໘౗ɺͱ͍ͬͨͱ͖ʹศར ‣ ͦΜͳঢ়گ͸͋·Γͳ͍ Layout APIͱ͸?

@Composable inline fun Layout( content: @Composable @UiComposable () -> Unit, modifier: Modifier = Modifier, measurePolicy: MeasurePolicy ) Layout API

@Composable inline fun Layout( content: @Composable @UiComposable () -> Unit, modifier: Modifier = Modifier, measurePolicy: MeasurePolicy ) Layout API

‣ Layout APIͷཁͱͳΔInterface ‣ MeasurePolicyΛ࣮૷ͯ͠Layout APIʹ౉͢͜ͱͰɺࣗ༝ͳϨΠΞ΢ τΛ࣮ݱͰ͖Δ MeasurePolicy

interface MeasurePolicy { fun MeasureScope.measure( measurables: List, constraints: Constraints ): MeasureResult … } MeasurePolicy

SimpleͳRowͷMeasurePolicyΛ ࣮૷ͯ͠ΈΔ

class SimpleRowMeasurePolicy : MeasurePolicy { override fun MeasureScope.measure( measurables: List, constraints: Constraints ): MeasureResult { … } } SimpleRowMeasurePolicy

val placeables = measurables.map { measurable -> measurable.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val parentWidth = placeables.sumOf { it.width } .coerceAtMost(constraints.maxWidth) val parentHeight = placeables.maxOf { it.height } .coerceAtMost(constraints.maxHeight) return layout(parentWidth, parentHeight) { var offsetX = 0 for (placeable in placeables) { placeable.place(offsetX, 0) offsetX += placeable.width if (offsetX > parentWidth) break } } MeasurePolicy#measure

val placeables = measurables.map { measurable -> measurable.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val parentWidth = placeables.sumOf { it.width } .coerceAtMost(constraints.maxWidth) val parentHeight = placeables.maxOf { it.height } .coerceAtMost(constraints.maxHeight) return layout(parentWidth, parentHeight) { var offsetX = 0 for (placeable in placeables) { placeable.place(offsetX, 0) offsetX += placeable.width if (offsetX > parentWidth) break } } measurables(children)Λmeasure֤ͯ͠ݸͷαΠζΛܾఆ͢Δ

val placeables = measurables.map { measurable -> measurable.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val parentWidth = placeables.sumOf { it.width } .coerceAtMost(constraints.maxWidth) val parentHeight = placeables.maxOf { it.height } .coerceAtMost(constraints.maxHeight) return layout(parentWidth, parentHeight) { var offsetX = 0 for (placeable in placeables) { placeable.place(offsetX, 0) offsetX += placeable.width if (offsetX > parentWidth) break } } placeablesͷαΠζΛΈͯ਌ͷαΠζΛܭࢉ͢Δ

val placeables = measurables.map { measurable -> measurable.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val parentWidth = placeables.sumOf { it.width } .coerceAtMost(constraints.maxWidth) val parentHeight = placeables.maxOf { it.height } .coerceAtMost(constraints.maxHeight) return layout(parentWidth, parentHeight) { var offsetX = 0 for (placeable in placeables) { placeable.place(offsetX, 0) offsetX += placeable.width if (offsetX > parentWidth) break } } placeablesΛplace͍ͯ͘͠

val placeables = measurables.map { measurable -> measurable.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val parentWidth = placeables.sumOf { it.width } .coerceAtMost(constraints.maxWidth) val parentHeight = placeables.maxOf { it.height } .coerceAtMost(constraints.maxHeight) return layout(parentWidth, parentHeight) { var offsetX = 0 for (placeable in placeables) { placeable.place(offsetX, 0) offsetX += placeable.width if (offsetX > parentWidth) break } } placeablesΛplace͍ͯ͘͠

val placeables = measurables.map { measurable -> measurable.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val parentWidth = placeables.sumOf { it.width } .coerceAtMost(constraints.maxWidth) val parentHeight = placeables.maxOf { it.height } .coerceAtMost(constraints.maxHeight) return layout(parentWidth, parentHeight) { var offsetX = 0 for (placeable in placeables) { placeable.place(offsetX, 0) offsetX += placeable.width if (offsetX > parentWidth) break } } placeablesΛplace͍ͯ͘͠

val placeables = measurables.map { measurable -> measurable.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val parentWidth = placeables.sumOf { it.width } .coerceAtMost(constraints.maxWidth) val parentHeight = placeables.maxOf { it.height } .coerceAtMost(constraints.maxHeight) return layout(parentWidth, parentHeight) { var offsetX = 0 for (placeable in placeables) { placeable.place(offsetX, 0) offsetX += placeable.width if (offsetX > parentWidth) break } } ഑ஔͨ͠placeableͷwidth෼͚ͩoffsetʹՃࢉ͍ͯ͘͠

val placeables = measurables.map { measurable -> measurable.measure(constraints.copy(minWidth = 0, minHeight = 0)) } val parentWidth = placeables.sumOf { it.width } .coerceAtMost(constraints.maxWidth) val parentHeight = placeables.maxOf { it.height } .coerceAtMost(constraints.maxHeight) return layout(parentWidth, parentHeight) { var offsetX = 0 for (placeable in placeables) { placeable.place(offsetX, 0) offsetX += placeable.width if (offsetX > parentWidth) break } } ਌ͷ֎ʹग़ͨΒplaceऴྃ

Layout( measurePolicy = remember { SimpleRowMeasurePolicy() }, content = { … } ) ͋ͱ͸InstanceΛLayoutʹ౉ͤ͹OK

༡ΜͰΈΔ

class OverlapRowMeasurePolicy(private val overlapWidth: Dp) : MeasurePolicy { override fun MeasureScope.measure(measurables: List, constraints: Constraints): MeasureResult { val childConstraint = constraints.copy(minWidth = 0, minHeight = 0) val placeables = measurables.map { measurable -> measurable.measure(childConstraint) } val width = placeables.sumOf { it.width }.coerceAtMost(constraints.maxWidth) val height = placeables.maxOf { it.height }.coerceAtMost(constraints.maxHeight) return layout(width, height) { var offsetX = 0 for (placeable in placeables) { placeable.placeRelative(offsetX, 0) offsetX += (placeable.width - overlapWidth.toPx().toInt()) if (offsetX > width) break } } } } Overlap (࢖͍ಓ͋Γͦ͏!)

class CircleMeasurePolicy : MeasurePolicy { override fun MeasureScope.measure(measurables: List, constraints: Constraints): MeasureResult { val childConstraint = constraints.copy(minWidth = 0, minHeight = 0) val placeables = measurables.map { measurable -> measurable.measure(childConstraint) } val maxChildWidth = placeables.maxOf { it.width } return layout(constraints.maxWidth, constraints.maxHeight) { val radian = Math.toRadians(90.0 / placeables.lastIndex) val radius = constraints.maxWidth - maxChildWidth for (i in placeables.indices) { val x = (cos(radian * i) * radius).toInt() val y = (sin(radian * i) * radius).toInt() placeables[i].placeRelative(x, y) } } } } Circle (Ұੜ࢖Θͳͦ͏)

‣ Layout APIΛ࢖͏ͱࢠΛࣗࡏʹ഑ஔͰ͖Δ ‣ େ఍ͷUI͸Jetpack Composeඪ४/Accompanist͕͋Ε͹ࣄ଍ΓΔͷ Ͱɺར༻ස౓͸গͳ͍ͱࢥ͏ ‣ ߈ΊͯΔUIΛఏҊ͞Εͨ࣌ͷͨΊʹ͓͍֮͑ͯͯଛ͸ͳ͍͔΋ ‣ ࣮૷؆୯͍͍͍͗͌͌͢ ·ͱΊ

Thank you