🖐️

ゆめみ社のAndroidインターンに参加してきたので学んだことをまとめておく(ComposeのConstraintLayout編)

2022/09/07に公開

Android

ゆめみ社の Android インターンに参加しました。
なかなかにありがたい経験をさせてもらえたので、アウトプットします 👍

基本的には課題を進めていく 🚶
課題は AndroidView で開発する前提になっていたが、Jetpack Compose の方が得意という旨を伝えると、Compose を使って UI を作っていくことに。柔軟に対応していただくことができた。感謝 😊

Compose の ConstraintLayout

参考：
公式ドキュメント

「Android で複雑なレイアウトを組みたい」
👆👆👆 これ、ConstraintLayout の出番です。

今回の課題では、以下のような複雑なレイアウトを組む課題がありました。

条件

1 は画面の上下左右中央に
1 のすぐ下に 2,3 がくっつくように
2-4 間は 80dp
2 と 4,3 と 5 のそれぞれの縦向きの中心は同じ

はじめ Column と Row を巧みに組み合わせ読めないコードで実装しましたが、メンターの方にConstraintLayoutを紹介されて導入しました。

ConstraintLayout では次のように各要素に制約(constraint)をつけて位置を指定します。

○○ の左は ×× の右にくっつくように
○○ は横向きに ×× の中心にくるように

各要素の制約例

これをこんな感じのコードで書きます。

// 画像内の①のレイアウト
ConstraintLayout(
  modifier = Modifier.background(MaterialTheme.colors.secondary)
) {
  val ( text , button ) = createRefs()
  Text(
    "テキスト",
    modifier = Modifier.constrainAs(text){  // textは
      left.linkTo(button.left)  // 左をボタンの左に
      bottom.linkTo(button.top)  // 下をボタンの上に
    }
  )
  Button(
    onClick={},
    modifier = Modifier.constrainAs(button){  // buttonは
      // 制約
    }
  ){ Text("クリック") }
}

// 画像内の②のレイアウト
ConstraintLayout(
  modifier = Modifier.background(MaterialTheme.colors.secondary)
) {
  val ( button ) = createRefs()
  Button(
    onClick ={},
    modifier = Modifier.constrainAs(button){
      linkTo(parent.top,parent.bottom)  // (buttonの上下は)親要素の上下に合わせる,
				        // ただしbuttonの縦幅が足りないので中央に寄る
      // height = Dimension.fillToConstraints  // これを指定すると縦幅が引き伸ばされる
      linkTo(parent.left,parent.right)  // (buttonの左右は)親要素の左右に合わせる
    }
  ){ Text("クリック") }
}

👆👆👆 のように XML の時より分かりにくい記述が減り、読みやすい複雑なレイアウトのコードが完成するわけです。

DSL 的な記述がしやすい Kotlin ならではな GoodPoint ですね！

ゆめみ社のAndroidインターンに参加してきたので学んだことをまとめておく(ComposeのConstraintLayout編)

Compose の ConstraintLayout

インターンアウトプットシリーズ一覧

Discussion