Android Kotlin

Android ConstraintLayoutのお勉強

投稿日:2019/02/24 更新日:

Androidはいろいろ難しいところがあるのですが画面にビューを表示するレイアウトも慣れないと難しいものがあると思っています。
自分だけかもしれませんが簡単なレイアウトだなーと思って実際に配置してみたところ、全く思い通りに組めない。
個人的には昔htmlで慣れ親しんだテーブルに割と近いわかりやすいLinearLayoutで頑張って見たんですけど、なかなかうまくいかなくてよく詰まってしまいます。
単純なレイアウトだったらLinearLayoutで全然組めるんですけどビュー同士が関連しあうようなレイアウトだと難しいものがあります。

サポートライブラリだと思うのですがConstraintLayoutというものがあってRelativeLayoutをより強化したものだと勝手に思っています。
Android Studioでアクティビティを作ると自動的に作成されるレイアウトがConstraintLayoutになります。
今までほとんどというか全く使ったことがないConstraintLayoutを使ってみようと思います。

個人的な勉強という意味で簡単だけど少しだけ条件がある画面をConstraintLayoutで作ってみたいとおもいます。

概要

  • 友達一覧を作る
  • 友達は以下の要素からなる
    • 姓(かな)
    • 名(かな)
    • 性別
    • メモ
  • 友達はRecyclerView内の各セルで表示する

大体こんな感じで作って見たいと思います。
GitHubにサンプルコードをプッシュしてありますが、慣れていないので参考程度に。
ソースコードはこのあとも追加・修正する過程で更新していくと思います。

レッスンその1 単純な一覧

ConstraintLayoutを使ったことがないので、まずは簡単な一覧から作成します。
ConstraintLayoutを使っているので行とか列の概念はないのですが、説明するために行と列を使っています。
1行目 姓名
2行目 姓名(かな)
3行目 性別
完成した画面はこんな感じです。

ConstraintLayoutの特徴として制約ベースで画面を設定します。
例えばLinearLayoutの場合、方向(orientation)を指定して順番で配置して行くと思います。
今回の場合、姓名は以下のような制約をつけました。

  • 自身の上を親要素の上と合わせる(layout_constraintTop_toTopOf)
  • 自身の左を親要素の左と合わせる(layout_constraintStart_toStartOf)

これで左上に表示されます。
あとはマージンなりを適当に指定しました。

ソースはこちらになります。

レッスンその2 性と名を分けて表示する一覧

レッスンその1と見た目はそれほどかわらないのですが、性と名をビューとして分けて表示します。
1行目 姓 名
2行目 姓(かな) 名(かな)
3行目 性別
完成した画面はこんな感じです。

ConstraintLayoutの特徴としてビューとビューに制約をもたせて制御します。
今回は名に以下の制約をつけました。

  • ベースラインをに合わせる(layout_constraintBaseline_toBaselineOf)
  • 自身の左をの右に合わせる(layout_constraintLeft_toRightOf)

姓(かな)には同様にの下に表示されるように制約をもたせました。
RelativeLayoutでも同様な制御ができるかと思います。
ベースラインを明示的にあわせるというのはすごい便利ですねー。

ソースはこちらになります。

レッスンその3 性と名を分けてかなの位置を合わせて表示する一覧

名と名(かな)の縦の位置をあわせるという画面。
今回の姓名の表示ではあんまりないかもしれないけど、実際の開発では確実に出てきそうな頭を揃えるという画面です。
実際の画面を見てもらうとわかりやすいと思います。

まず最初にLinearLayoutで実装したらどうなるかなーと考えました。
LinearLayoutとweightを使えばできそうかなーという感じですが実際に組んではいないのでわかりません・・・。

ConstraintLayoutで作る場合どうやって作るかなーと思っていたのですが、まさに以下の方法でできました。
ConstraintLayoutをもう少し深く知ってみる#barrier
Barrierはすごい・・・。
ただAndroid Studio 3.3.1だとレイアウトエディタ上にBarrierは作成できるのですが表示されないので制約はエディタで直接書きました。
これだけの記述でこの画面ができるのはすごいなーと思いました。

ソースはこちらになります。

ここまできたら今後ConstraintLayoutを積極的に使っていきたいなーと思います。

レッスンその4 セルの高さが上下する場合

以下のような画面を作ります。
1行目 姓名
2行目 姓名(かな)
3行目 メモ(長い場合は折り返して全文表示する)

このセルの高さが内容によって可変になるというのは自分はすごい組みにくいと思っています。
これもまさにその名の通りlayout_constraintHeight_minという属性があってここに最低限取りたい値を設定することで対応できました。
ただConstraintLayoutの内側でしか有効にならないみたいなのでConstraintLayoutを入れ子にして対応しました。
ソースはこちらになります。

まとめ

結構簡単なサンプルかもしれませんがConstraintLayoutがすごいレイアウトが組みやすいなーと感じました。
LinearLayoutで組んでしまうことが多かったのですが、今後はConstraintLayoutを積極的に使っていきたいと思いました。

-Android, Kotlin

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

KotlinのコードをktlintでチェックしてDangerでGitHubのPRへ通知する

最近、仕事で初めてKotlinでサーバーサイドアプリケーションを書く機会がありました。 少しでも慣れたほうがいいかなと思って何かないかなと思っていたらちょうどZabbix Senderを使っていたので …

Kotlinでサーバーサイドアプリを実装した感想

Java歴はそれなりにあるのですが最近はJavaよりPHPを書いていたり、またAndroidアプリ開発をしないのでKotlinとは無縁の生活をしておりました。 ちょうどいい感じのアプリ規模(1人で設計 …