【Android Studio】Layout Editorを活用してレイアウトを作成する

本記事はand factory Advent Calendar 2019 14日目の記事です。

#はじめに
はじめまして。Qiita初投稿です。
and factory株式会社でAndroidエンジニアをやっているmyoshitaと申します。

###本記事の内容
Android Studioを使ってレイアウトを作成する際、どうやって作っていますか。
多分、xmlファイルにコードを書いていくのが一般的なのかなと思います。
Android StudioのLayout Editorは割と使い勝手がいいので、GUIによる操作だけでレイアウトをほとんど完成させることもできます。
本記事では、個人的に便利だと思うLayout Editorの機能をご紹介したいと思います。

#Layout Editor
Layout Editorは、ドキュメントによると以下の通りです。

Layout Editor では、手動でレイアウト XML を記述する代わりに、UI 要素を視覚的に編集できる Design Editor にドラッグすることにより、レイアウトをすばやく作成できます。

ドキュメントはこちら
https://developer.android.com/studio/write/layout-editor?hl=JA

##使ってみる
使用環境はWindows10, Android Studio 3.5です。
###Palette
左上にある部分がPaletteです。ここにあるViewを左下のComponent Treeか、中央のDesign Editorにドラッグアンドドロップすることで任意のViewを追加することができます。
私はレイアウトを作る最初に、デザインを見て必要になるであろうViewをPaletteから一気に移動させています。
ただし、Palette上にないアイテム（Custom Viewなど）もあるので、そういったViewを使いたい場合はxmlに直接書きます。
あと、地味な機能ですがViewを右クリックするとMaterial Guidelineに飛べるのでデザインで迷ったときには見に行ってみるのもいいと思います。

###Component Tree
Paletteでも登場しましたが、Component Treeではレイアウトの階層が確認できます。
たまに使うのが、ViewのConvertです。
例えば、LinearLayoutをConstraintLayoutに変換したいときなど、右クリック-> Convert LinearLayout to ConstraintLayoutで変換することができます。
idがlinearLayoutになるので最初は変換されてないと思うかもしれませんが、ちゃんとConstraintLayoutになっています。
もちろん、ConstraintLayoutからLinearLayoutへの変換も可能ですし、TextViewからImageView、EditTextなどの相互変換も可能です。（右クリック -> Convert View... から実行できます。）

###Attributes
右にあるタブで、選択したViewの属性を確認・入力することができます。
idやlayout_width, heightなどをここで設定するという方もいらっしゃるのではないかなと思います。
私は、ほぼすべての属性をAttributesで書きます。
上にある検索ボタンを押すことで任意の属性を検索することができるので、効率的に属性を入力していくことができます。
また、右端にある楕円のインジケータを押すとProjectのresourceから選択できるので、（gifだと見切れてますが）colorやdimen、styleなどを使いたい場合でも選択が簡単です。
ちなみに白く塗りつぶされた状態はresourceから選択されている状態を示します。

###ConstraintLayoutとの連携
Layout Editorと非常に相性がいいのがConstraintLayoutだと思います。
ConstraintLayoutはコードで書くと、書くことが多くて大変なのですがLayout Editorを使うと直感的にレイアウトを作成できます。

####Constraints
Design Editorでアイテムをクリックして円形の部分を制約をつけたい箇所にドラッグアンドドロップすることでConstraintsを設定できます。
この方法も便利には便利なのですが、ひとつひとつ制約をつけていくのが面倒だと感じる場面もあります。

そこで、更に便利なのがAlignです。
Viewを選択したときDesign Editorの上にAlignというボタンが表示されるのでそれを使えば様々な制約を一気に設定することができます。
例えば、複数のViewを垂直均等に配置したい場合は、対象のViewを複数選択した状態でAlign -> Verticallyを押すと一発でConstraintsを設定してくれます。
ただしViewの位置によっては上手く働いてくれない場合もあるので、触って試してみてください。

####bias
biasを加えたいときもAttributesタブから設定できます。
Constraint Widgetにあるバーを動かすことでリアルタイムにViewの位置を確認しながらbiasを設定できます。

####Chain
個人的に使うことは少ないですが、chainの設定もできます。
Constraintsを設定した状態でViewを右クリック -> Cycle Chain modeで各Chainに切り替えることができます。

#さいごに
Layout Editorをもっと使いたいと思っていただけたなら幸いです。
また、こんな使い方してるよ！とかもっと便利な機能があるよ！とかありましたら教えていただけると嬉しいです。