Androidはいろいろ難しいところがあるのですが画面にビューを表示するレイアウトも慣れないと難しいものがあると思っています。
自分だけかもしれませんが簡単なレイアウトだなーと思って実際に配置してみたところ、全く思い通りに組めない。
個人的には昔htmlで慣れ親しんだテーブルに割と近いわかりやすいLinearLayoutで頑張って見たんですけど、なかなかうまくいかなくてよく詰まってしまいます。
単純なレイアウトだったらLinearLayoutで全然組めるんですけどビュー同士が関連しあうようなレイアウトだと難しいものがあります。
サポートライブラリだと思うのですがConstraintLayoutというものがあってRelativeLayoutをより強化したものだと勝手に思っています。
Android Studioでアクティビティを作ると自動的に作成されるレイアウトがConstraintLayoutになります。
今までほとんどというか全く使ったことがないConstraintLayoutを使ってみようと思います。
個人的な勉強という意味で簡単だけど少しだけ条件がある画面をConstraintLayoutで作ってみたいとおもいます。
概要
- 友達一覧を作る
- 友達は以下の要素からなる
- 姓
- 名
- 姓（かな）
- 名（かな）
- 性別
- メモ
- 友達はRecyclerView内の各セルで表示する
大体こんな感じで作って見たいと思います。
GitHubにサンプルコードをプッシュしてありますが、慣れていないので参考程度に。
ソースコードはこのあとも追加・修正する過程で更新していくと思います。
レッスンその１ 単純な一覧
ConstraintLayoutを使ったことがないので、まずは簡単な一覧から作成します。
ConstraintLayoutを使っているので行とか列の概念はないのですが、説明するために行と列を使っています。
１行目 姓名
２行目 姓名（かな）
３行目 性別
完成した画面はこんな感じです。
ConstraintLayoutの特徴として制約ベースで画面を設定します。
例えばLinearLayoutの場合、方向（orientation）を指定して順番で配置して行くと思います。
今回の場合、姓名は以下のような制約をつけました。
- 自身の上を親要素の上と合わせる（layout_constraintTop_toTopOf）
- 自身の左を親要素の左と合わせる（layout_constraintStart_toStartOf）
これで左上に表示されます。
あとはマージンなりを適当に指定しました。
ソースはこちらになります。
レッスンその２ 性と名を分けて表示する一覧
レッスンその１と見た目はそれほどかわらないのですが、性と名をビューとして分けて表示します。
１行目 姓 名
２行目 姓（かな） 名（かな）
３行目 性別
完成した画面はこんな感じです。
ConstraintLayoutの特徴としてビューとビューに制約をもたせて制御します。
今回は名に以下の制約をつけました。
- ベースラインを
姓に合わせる（layout_constraintBaseline_toBaselineOf） - 自身の左を
名の右に合わせる（layout_constraintLeft_toRightOf）
姓（かな）には同様に名の下に表示されるように制約をもたせました。
RelativeLayoutでも同様な制御ができるかと思います。
ベースラインを明示的にあわせるというのはすごい便利ですねー。
ソースはこちらになります。
レッスンその３ 性と名を分けてかなの位置を合わせて表示する一覧
名と名（かな）の縦の位置をあわせるという画面。
今回の姓名の表示ではあんまりないかもしれないけど、実際の開発では確実に出てきそうな頭を揃えるという画面です。
実際の画面を見てもらうとわかりやすいと思います。
まず最初にLinearLayoutで実装したらどうなるかなーと考えました。
LinearLayoutとweightを使えばできそうかなーという感じですが実際に組んではいないのでわかりません・・・。
ConstraintLayoutで作る場合どうやって作るかなーと思っていたのですが、まさに以下の方法でできました。
ConstraintLayoutをもう少し深く知ってみる#barrier
Barrierはすごい・・・。
ただAndroid Studio 3.3.1だとレイアウトエディタ上にBarrierは作成できるのですが表示されないので制約はエディタで直接書きました。
これだけの記述でこの画面ができるのはすごいなーと思いました。
ソースはこちらになります。
ここまできたら今後ConstraintLayoutを積極的に使っていきたいなーと思います。
レッスンその４ セルの高さが上下する場合
以下のような画面を作ります。
１行目 姓名
２行目 姓名（かな）
３行目 メモ（長い場合は折り返して全文表示する）
このセルの高さが内容によって可変になるというのは自分はすごい組みにくいと思っています。
これもまさにその名の通りlayout_constraintHeight_minという属性があってここに最低限取りたい値を設定することで対応できました。
ただConstraintLayoutの内側でしか有効にならないみたいなのでConstraintLayoutを入れ子にして対応しました。
ソースはこちらになります。
まとめ
結構簡単なサンプルかもしれませんがConstraintLayoutがすごいレイアウトが組みやすいなーと感じました。
LinearLayoutで組んでしまうことが多かったのですが、今後はConstraintLayoutを積極的に使っていきたいと思いました。