KotlinとConstraintLayoutでiOSライクなAndroid開発を目指す

エンジニアの工藤です 先週AndroidStudio2.2が公開され、GoogleI/Oでも特に力を入れて紹介…

エンジニアの工藤です

先週AndroidStudio2.2が公開され、GoogleI/Oでも特に力を入れて紹介されていたConstraintLayoutが使用可能になりました。

ConstraintLayoutはGUIでオブジェクトに制約を貼ることで、簡単に画面を作成できる注目のレイアウトです。
制約ベースのレイアウトと聞くと、iOSのAutoLayoutを思い出しますが実際どうなんでしょうか?

iOSとAndroidで同じ思想でレイアウトを組めるとしたら、
iOSエンジニア兼自称社内kotlinエバンジェリスト見習いの僕としては喜ばしい限りです。

早速使って試してみたいと思います

 

1 準備

gradleファイルに

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'

を追加し、作成したレイアウトファイルのrootレイアウトを右クリックメニューの”Convert RelativeLayout to ConstraintLayout”でConstraintLayoutに変換します

スクリーンショット 2016-09-28 13.41.15

 

2 Autoconnect

上メニューの磁石アイコンを有効にするとオブジェクトを置くだけでウネウネ線が引かれ、いい感じの制約が貼られていきます。

スクリーンショット 2016-09-28 12.07.04

スクリーンショット 2016-09-28 12.11.03

しかし画面サイズ違いまでは考慮してくれないらしく、別サイズのプレビューでは所々おかしくなっています。

スクリーンショット 2016-09-28 12.19.55

 

3 infer constraints

豆電球アイコンを有効にすると、既に作られた画面に制約を追加してくれます。

スクリーンショット 2016-09-28 13.45.47

2で作成したレイアウトにこちらを適用すると、追加の制約が作成されました。

ただ、これを適用しても画面サイズ違いには対応できませんでした。

 

4 手動で制約を追加する

4-1

右上のButtonをイメージと画面端の中央に来るように制約を追加してみます。
右メニューのCenter Horizotallyを選択すると、意図したとおりに制約が追加されました

スクリーンショット 2016-09-28 12.23.11

スクリーンショット 2016-09-28 12.24.21

 

4-2

一番下のtextClockを画面中央に配置してみます
Center Horizotally in Parent と Center Vertically in Parent を有効にしてみます
画面中央に移動し、競合する古い制約は削除されました。

スクリーンショット 2016-09-28 12.25.47

スクリーンショット 2016-09-28 14.05.23

 

4-3

textViewの幅に、wrap_contentとmatch_parentをそれぞれ適用してみます
右上のプロパティエリアで、四角の中の線をクリックしていくことでサイズ感を変更することができます。

スクリーンショット 2016-09-28 12.29.37

wrap_content→Fixed(固定値)→AnySize(≒match_parent フレキシブルになる)→wrap_contentの順で変化します
match_parentの状態にする場合は、対応する外部要素との制約も貼る必要があります

スクリーンショット 2016-09-28 14.12.58

 

4-4

2つのButtonを設置し、同じ横幅になるように設定してみます
それぞれ画面端とボタン同士の制約を設定し、AnySizeとしています
両方を選択しExpand Horizontallyを有効にすると、同じサイズにできました

スクリーンショット 2016-09-28 12.42.39

スクリーンショット 2016-09-28 14.16.58

 

まとめ

今回ConstraintLayoutを使用してみた感触としては、以下のとおりです。

メリット

・マウス操作で簡単にレイアウトを作れる。少し頑張れば画面サイズ違いの対応も可能
・複雑なレイアウトもフラットな構成で作成できるため、実行時のコストが低い

デメリット

・AndroidStudioのコード補完を活用できる人は普通にXMLを記述していったほうが早い
・類似したレイアウトをコピペしにくい
・iOSのAutoLayoutは制約にAspectRatio(指定要素の比率)とPriorityがありそれを利用することで柔軟に画面を作成することができるが、Androidには無いので素直にLinerLayoutをネストしたほうが考えやすい
(weight_sumではできることが少ない。Constraintと聞いて、追加されると勝手に思い込んでいた)

一部個人的な感想も含まれますが、現時点ではまだXML編集をメインでの画面作成のほうが簡単な印象です。
また、複雑すぎる画面の生成コストが気になる場合はその画面のUIや設計を見直す方が先だと考えているため、フラットなレイアウトの作成を目的としたConstraintLayout採用も現実的ではない気がします。
ただgoogle様イチ押しということは今後化けていく可能性を秘めているので、いつでも使えるように準備していきたいです。