[Android] ConstraintLayout による制約を設定するには

ConstraintLayoutは複雑なレイアウトを作成する時に役立ちます。制約(constraint)という概念を用いていてフラットに柔軟なレイアウトを構成できます。逆に簡単なレイアウトではむしろコードが多少多増える傾向があります。

Android Studio 3.0.1
Android 8.1.0

 



ConstraintLayout

 
View間の制約のやり方は色々あります。旧来の位置を設定するRelativeLayoutと似ているところもありますが、制約という概念でのレイアウト作成という点が異なります。

また、AutoConnectの機能で簡単に作業ができて、複雑なレイアウトをフラットに作成できます。

 

horizontal, vertical constraint

 
以下、projectをdefaultで作成したことを想定していますので、ConstraintLayoutになっていることが前提です。

Button:
Horizontal Constraint を1つと Vertical Constraint 1つを設定してみました。

  • レイアウトファイルの「Design」タグでLayout Editor画面
  • PaletteからButtonをドラッグ&ドラップ
  • Buttonを上と左にある◎を撰択して上と左端に持って行く
  • Buttonを掴んで任意の位置(124dp, 132dp)に動かす

 

  
ビルドして実行した画面の表示
 

 
ImageView:
同じようにImageViewを作る場合です。ImageViewに画像を入れてみます。

Viewが1つで画面がPortlaitのみであればこれでもいいのですが、Viewが増えると上下左右の4方向にconstraintを入れないとうまくいかなくなります。

 

Parent position

 
スクリーンの上下左右を親としてViewに制約を設定する方法です。
以下は、スクリーンTopに対してconstraintを設定して128dpのマージンと、スクリーン右端(Start)に168dpのマージンを取るとこのようになります。
 

 
コードを見るとレイアウトの上部のconstraintがparentの上部と右端に設定されているのがわかります。
 

 
例えばアイコンのTopはParentとのconstraintがあり、layout_marginTopでマージンが128dpに設定されているとわかります。

 

Order position

 
View間の順番を制限するものです。例えば下のButtonはImageViewの下部に制約を設定していて、TextViewはImageViewの左端に制約を入れてます。
 

 
コードで見るとImageViewのIDを指定してconstraintをいれmarginで距離を決めているのがわかります。
 

 

Alignment

 
ImageViewの左端とButtonの左端を整列させます。またTextViewはAlignmentプラスでマージンを取っています。
 

 
コードではOrder positionと同様にconstraintをどこにしているか指定しています。
 

 

Baseline alignment

 
異なる文字サイズや英小文字などのベースライン合わせです。
 
TextViewを選択すると下に「ab」という小さいアイコンが出てきてクリックするとテキストの「baseline」が現れます。
それを掴んで、合わせたいTextViewのbaselineと接続させていきます。
 

 
コードでは
layout_constraintBaseline_toBaselineOf
を使います。
 

 

Constrain to a guideline

 
水平あるいは垂直のガイドラインを作成してそれにViewを整列させます。メニューからVertical, Horizontalを撰択してガイドラインを作成していきます。
 

 
その後、ガイドラインにそれぞれのViewのconstraintを設定します。
 

 
コードでは android.support.constraint.Guideline が作られています。
 

 

Constraint bias

 
Verticalあるいは、Horizontalで両サイドにconstraintを入れるとbiasを使って比率を設定することができます。
 

 

Adjust the view size

 
Viewの制約を使って位置を設定しましたが、View自体の大きさの設定は別に行います。

  • Wrap Content
    • 元のViewから適当な大きさに合わせてくれます
  • Match Constraints
    • match_parentのようにサイズを最大に拡大します
    • 尚、match_parentはConstraintLayoutでは使わずに、代わりにこれを使い、コードでは”0dp”とします。
  • Fixed
    • 決め打ちのサイズで固定します。


 
aspect ratio:
Viewのratio(縦横比)を変更できます。
Match Constraintsを設定すると左上に三角形のマークが現れるので、クリックするとratioの項目から変更することができます。
 

 
view margins:
メニューにmarginの設定がされていて、デフォルトでは8dpがViewに影響します。
 

 
これは適宜変更できます。
 


References:
Build a Responsive UI with ConstraintLayout| Android Developers
ConstraintLayout| Android Developers


誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加


 


ページのトップへ戻る




シェアする

  • このエントリーをはてなブックマークに追加

フォローする