Jetpack Compose Academy · レッスン

MeasureとPlaceのモデル

Composeの1パスレイアウトを理解します。

「MeasureとPlaceのモデル」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

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.width

Constraints 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. ✅

よくある質問

「MeasureとPlaceのモデル」レッスンは無料ですか？

はい。「MeasureとPlaceのモデル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「MeasureとPlaceのモデル」で何を学びますか？

Composeの1パスレイアウトを理解します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「MeasureとPlaceのモデル」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る