🖐️

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

2022/09/06に公開約2,400字

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

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

Compose の ConstraintLayout

参考:
公式ドキュメント

https://developer.android.com/jetpack/compose/layouts/constraintlayout?hl=ja

「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ですね!

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

Discussion

ログインするとコメントできます