El modelo de medir y colocar
Comprenda el layout de una sola pasada de Compose.
El modelo de medir y colocar es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
When Built-In Layouts Are Not Enough
Column, Row, and Box cover most screens. But sometimes you need total control over where children go. That is when you build a custom layout. 🎨
Compose Lays Out in One Pass
Unlike the old View system, Compose measures and places everything in a single pass. There is no expensive measure-then-measure-again cycle.
Two Steps: Measure, Then Place
Every layout does two things in order. First it measures each child to learn its size. Then it places each child at a chosen position.
Measurables Are Children Not Yet Sized
A parent receives its children as measurables. A measurable is a child you have not measured yet, like a parcel before you weigh it. 📦
Measuring Produces a Placeable
Call measure on a measurable and you get a placeable back. The placeable knows its final width and height and is ready to be positioned.
val placeable = measurable.measure(constraints)
val w = placeable.widthConstraints Set the Size Limits
When you measure, you pass constraints: the min and max width and height the child is allowed. The child picks a size within those bounds.
Measure Each Child Exactly Once
The single-pass rule means you must measure each child only once. Measuring the same child twice throws an error at runtime.
The Parent Decides Its Own Size
After measuring children, the parent reports its own width and height. It usually sizes itself to wrap the children it just measured.
layout(width, height) {
// place children here
}Placing Sets Each Child's Position
Inside the layout block you call placeRelative on each placeable, giving it an x and y. That is where the child lands on screen.
placeable.placeRelative(x = 0, y = 0)placeRelative Respects Direction
Prefer placeRelative over place. It automatically mirrors positions for right-to-left languages, so your layout works everywhere. 🌍
This Model Powers Every Layout
Column, Row, and your future custom layouts all follow this same measure-then-place rhythm. Learn it once and you understand all of Compose layout.
Quick Check
What do you get back after measuring a measurable?
Recap: The Measure & Place Model
Compose lays out in one pass: measure each child once within constraints to get placeables, then place them. This model drives every layout you will build. ✅
Preguntas frecuentes
¿La lección «El modelo de medir y colocar» es gratis?
Sí — el texto completo de «El modelo de medir y colocar» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El modelo de medir y colocar»?
Comprenda el layout de una sola pasada de Compose. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El modelo de medir y colocar»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El modelo de medir y colocar
- Escribir un Composable Layout
- Restricciones y medidas intrínsecas
- Un FlowRow que ajusta los chips