ConstraintLayoutがとっつきにくいと思っている人へ

こんにちは。Reedexエンジニアの鈴木です。

さて今回は我々が普段仕事で使っている技術をブログにまとめようという事で私にも白羽の矢が立ったわけですが、

最近感動した技術ということで”AndroidのConstraintLayout”について語っていきたいと思います。

といっても実装系のお話はググると既に色々な記事がでてきますので、

今回は「ConstraintLayoutがとっつきにくいと思っている人に良さを分かってもらう」をテーマにしていきたいと思います。

そもそもConstraintLayoutって？

ConstraintLayoutは、2006年に登場したAndroidのレイアウトのひとつです。

“Constraint(制約)”の名前の通りコンポーネントに”制約”をつけて配置していきます。

基本的に、コンポーネントの上下左右の端と隣り合う別のコンポーネントを記述していきます。

layout_constraintRight_toLeftOf = “A”　と書けば右端をAの左側に(=Aの左に配置)

layout_constraintBottom_toTopOf = “A”　と書けば下端をAの上端に(=Aの上に配置)

となります。もちろん、要素を重ねるのも自由自在で、layout_constraintRight_toRightOf= “A”　とすれば、右端をAの右端にとなるので、右端基準でAと重なる要素が作れます。

ConstraintLayoutのスゴい所

1.ConstraintLayoutは極限まで入れ子を減らせる

LinearLayoutの中にLinearLayoutを入れて、その中に更にTableLayoutを入れてテキストやボタンを配置して……

RelativeLayoutの登場まではLayoutの入れ子は割とAndroid開発では一般的な光景でした。

そのため、作りづらい、見辛い、修正しづらいの三重苦です。

ところが、ConstraintLayoutならば、基本的にコンポーネントの位置を制約で表現するので、複雑なデザインでも入れ子になりません。
（画像）

もちろん入れ子構造を取る事も可能なので、ポップアップ等、そもそも入れ子にした方が表現しやすい場合は入れ子にもできます。

2.チェーンとバリアでスマートなレイアウト

ConstraintLayoutで私が最初に感動した点がこれです。

“チェーン”は複数の(基本的に縦か横に一直線に並んだ)コンポーネントを均等に配置する仕組みです。

さらに配置の方法も「真ん中に寄せる」「全ての余白を均等に」「左右の余白は0,中の余白を均等に」の3種類から選ぶことができます。

他のレイアウトでは入れ子構造が必須だった「複数要素の中央寄せ」が制約ひとつでいとも簡単に実現できてしまうのです。

“バリア”は複数要素にまたがる横(または縦)の制約をつけたい場合に使います。、

例えばフォーム入力で左にタイトル、右に入力欄がある場合、入力欄は一番長いタイトルに合わせたいですよね。

そういった場合にタイトルをバリアに入れ、入力欄をバリアに対して制約することで、すべての入力欄を一番長いタイトルに揃えることができます。

3.app:layout_constraintWidth_default=”wrap”で、折り返し

例えば、テキストビューで、「一定の大きさ(文字数)以上になった場合は折り返して表示して欲しい」といった場合に便利になるのがコレ。

テキストビューのサイズはwrap_contentに指定しがちですが、困ったことになるのがテキストビューが伸びたとき。

特に多言語に対応する場合、言語によっては文字数が溢れるなんてことがあるかと思います。

サイズをmatch_constraint(0dp)に指定してコレを指定してあげることで、文字数が多い時には２行以上に折り返して表示してくれるようになります。

まとめ

いかがだったでしょうか。多分「へー、便利じゃん」ぐらいに感じていただけたのではないかと思います。

この「便利じゃん」が、つまり『複雑なレイアウトをシンプルに記述できる』というConstraintLayoutの最大の特徴です。

今回挙げたのはConstraintLayoutのほんの一部ですが、まだまだ便利な機能が沢山あります。

確かに学習コストは高いですが、慣れるともう全部あいつ一人でいいんじゃないかな、くらい強いので是非是非使ってみてください！