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

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

Android Studio 4.1.3
API 30

 




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)に動かす

 1x1.trans - [Android] ConstraintLayout による制約を設定するには

  

ビルドして実行した画面の表示
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには


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

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

 

Parent position

 

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


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

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

 

Order position

 

View間の順番を制限するものです。例えば下のButtonはImageViewの下部に制約を設定していて、TextViewはImageViewの左端に制約を入れてます。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには


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

 

Alignment

 

ImageViewの左端とButtonの左端を整列させます。またTextViewはAlignmentプラスでマージンを取っています。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには


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

 

Baseline alignment

 

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

この「ab」がわかりにくかったのでしょうか、今では右クリックで「Show Baseline」から設定していけます。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには


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

 

Constrain to a guideline

 

水平あるいは垂直のガイドラインを作成してそれにViewを整列させます。メニューからVertical, Horizontalを撰択してガイドラインを作成していきます。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには


 
その後、ガイドラインにそれぞれのViewのconstraintを設定します。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには
 
コードでは android.support.constraint.Guideline が作られています。
 

 

Constraint bias

 

Verticalあるいは、Horizontalで両サイドにconstraintを入れるとbiasを使って比率を設定することができます。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには

 

Adjust the view size

 

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

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

1x1.trans - [Android] ConstraintLayout による制約を設定するには

 aspect ratio:

Viewのratio(縦横比)を変更できます。
Match Constraintsを設定すると左上に三角形のマークが現れるので、クリックするとratioの項目から変更することができます。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには


 
view margins:
メニューにmarginの設定がされていて、デフォルトでは8dpがViewに影響します。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには
 
これは適宜変更できます。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには
 

文字列をリソースに設定

 

基本的にリテラルで文字列を書くのは推奨されていません
リソースstrings.xmlに設定してそれを読み出す方法が推奨されています
 
確かに直書きでエラーにもならずに実機でも表示されるのですが
思わぬバグになる可能性が秘められています
どうなるかわかりませんというので推奨されていないのですね
 
例えばTextViewを設定する場合では、TextViewのAttributesのtextの設定文字の右端をクリック
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには


 
「+」ボタンから「String Value」を選択して新しくリソースをつくります

1x1.trans - [Android] ConstraintLayout による制約を設定するには


 
1x1.trans - [Android] ConstraintLayout による制約を設定するには
 
「文字」がresourceのstrings.xmlにあるmojiに設定されて、textView1のtextに表示されています。
 
1x1.trans - [Android] ConstraintLayout による制約を設定するには
 
activity_main.xml

 
strings.xml

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

シェアする

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

フォローする