ComposeのwrapContentSize

Photo by Vije Vijendranath on Unsplash

Composeの wrapContentSize について解説します。そこまで頻繁に使うことはないかもですが、知っておくといざってときに役に立つかもしれません。

wrapContentSizeとは

wrapContentSize はViewシステムにあった wrap_content をイメージすると個人的には混乱するのかなと思います。

Composeのレイアウトは制約によってサイズが決まってきます。 wrapContentSize はその制約を無視して指定されたサイズでレイアウトをするようになります。

wrapContentSize の他に縦と横の wrapContentHeight と wrapContentWidth もあります。

単純な例

以下の例を考えてみます。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .size(50.dp)
        .background(Color.Blue)
)

ここでは、100.dp の背景が赤、50.dpの背景が青の Modifier を設定していますが、これを実行すると100.dpの青の Box が表示されます。

これに対して、 wrapContentSize を 50.dp の前に入れてみます。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .wrapContentSize()  // ←　これ
        .size(50.dp)
        .background(Color.Blue)
)

こうすると、100.dp の赤い Box の中心に、50.dp の青い Box が表示されるようになります。100.dp の制約を無視して、50.dp がレイアウトされていることになります。

align

先程の例では中心に青い Box が配置されてましたが、中心以外に配置したい場合は、 align の引数を渡すことで位置を指定できます。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .wrapContentSize(align = Alignment.BottomEnd)
        .size(50.dp)
        .background(Color.Blue)
)

この例では右下に配置しています。

中央寄せをするときは親を fillMaxSize にして、子に中央寄せしたいコンポーネントを配置するようなことが多いのですが（ぼくの場合）、 wrapContentSize をうまく活用すると、1つのコンポーネントだけで中央寄せにすることもできます。

Box(
    modifier = Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(100.dp)
        .background(Color.Red)
)

unbounded引数

先程の例では、制約より小さくするような感じでしたが、こんどは制約より大きくする場合です。

以下の例を考えます。幅が 50.dp の Box の中に1行のテキストを表示します。

Box(
    modifier = Modifier
        .width(50.dp)
        .background(Color.Red)
) {
    Text(
        text = "ABCDEFGHIJKLMN",
        maxLines = 1,
    )
}

この結果は以下のような感じで、 Box からハミ出してるテキストは切れてしまって表示されません。

次に、 wrapContentSize を指定してみます。

Box(
    modifier = Modifier
        .width(50.dp)
        .background(Color.Red)
) {
    Text(
        text = "ABCDEFGHIJKLMN",
        maxLines = 1,
        modifier = Modifier.wrapContentSize()
    )
}

この実装では最初の例と同じで、Box からハミ出してるテキストは表示されません。

これに引数の unbounded = true を追加してみます。

Box(
    modifier = Modifier
        .width(50.dp)
        .background(Color.Red)
) {
    Text(
        text = "ABCDEFGHIJKLMN",
        maxLines = 1,
        modifier = Modifier.wrapContentSize(unbounded = true)
    )
}

こうすると結果としては以下のように、ハミ出してるテキストも表示してくれるようになります。

デフォルトは中心寄せになっているので、左端からテキストを表示してたい場合は、 align = Alignment.TopStart の引数も追加すると良いです。

参考

Modifier | Android Developers