android: やはりレイアウトは難しい

2024/10/15

もはや愚痴である。

いま、Android の Codelabs でユニット2(アプリUIを作成する)のパスウェイ3(UIと状態を操作する)をやっている。
ようやく最後の項目だ。

アートスペースアプリを作成する

こういうのがレイアウト的な目標である。

ようやくできてきたのがこちら。
領域がわかりやすいように変な色を付けているが、下の方は落ち着いてきた。
問題は上側だ。

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = modifier
            .padding(16.dp)
            .shadow(elevation = 4.dp, shape = RectangleShape)
            .width(400.dp)
            .height(500.dp)
    ) {
        Image(
            painter = painterResource(id = art.image),
            contentDescription = stringResource(id = art.title),
            modifier = Modifier
                .width(300.dp)
                .height(500.dp)
                .background(color = Color.DarkGray)
                .align(alignment = Alignment.CenterHorizontally)
                .wrapContentSize(),
            contentScale = ContentScale.Crop
        )
    }

上側の構成
- Column
  - Image
影が付いたような枠になっている。これは Modifier.shadow()が使える
- Codelabs のヒントに Elevation という単語が出てくるが、.shadow(elevation=X.dp)で Z軸方向の高さがあるような効果を得られる
- Columnに設定している
Image が Column をはみ出している
- これは .shadow() でつけた影が Column の内側になっているからだろう
- Columnと同じ.heightになっているのもよくない
ContentScle.Cropはアスペクト比を維持するようだったが付けていたが、

うーん、難しく考えすぎたか？

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = modifier
            .padding(16.dp)
            .shadow(elevation = 4.dp, shape = RectangleShape)
            .width(400.dp)
            .height(500.dp)
    ) {
        Image(
            painter = painterResource(id = art.image),
            contentDescription = stringResource(id = art.title),
            modifier = Modifier
                .padding(24.dp)
                .background(color = Color.DarkGray)
                .align(alignment = Alignment.CenterHorizontally),
        )
    }

横長でも縦長でも収まっている。
Column で horizontalAlignment があるので Image の方には水平位置指定が不要
Column の modifier
- padding は外側に対する余白
- shadow は影
- width と height を指定して