Android StudioでConstraintLayoutの制約を設定する方法を配置パターン別に解説

2020-07-18Android Studio使い方

ConstraintLayoutの制約エラー

Android StudioでビューをConstraintLayoutで配置する方法を配置パターン別で書いていきます。一部の配置パターンは動画で紹介してます。配置するには制約の設定が必要です。

ビューを配置しただけの状態では下記の様に『ConstraintLayoutの制約がありません』のエラーが表示されます。

This view is not constrained. It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints The layout editor allows you to place widgets anywhere on the canvas, and it records the current position with designtime attributes (such as layout_editor_absoluteX). These attributes are not applied at runtime, so if you push your layout on a device, the widgets may appear in a different location than shown in the editor. To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections.

何を言ってるのかよくわかりませんよね・・・🙀

端的に言うと『ボタンやテキストなどのビューに対して水平方向や垂直方向の制約の定義しないと0.0の位置に(左上端)配置されます』と言っています。制約についてよくわからない人は下記の記事へ。

ビューを画面に配置する

ボタンやテキストなどを配置するにはパレットからビューをデザイン画面へドラッグ＆ドロップします。ビューを制約すると属性画面とXMLコードに属性が入ります。必要ない属性も入ってしまうので必要なければ属性を削除します。

IDとテキストを変更する

ビューのIDとビューに表示するテキストを変更するには属性画面から行います。枠線が赤くなった場合はエラーで入力した値が好ましくないです。黄色になった場合は警告で他にも方法がありますよと言っています。黄色の場合は直さなくても問題ありません。

Hardcoded string …,should use @string resoueceの警告

テキストが黄色になりますが、これは［res/values/strings.xml］があってアプリ内のビューに表示するテキストはこのファイルで管理する事ができます、という警告です。多数のテキストを扱う場合はこちらを使うと後々楽です。やり方は下記の記事へ

水平・垂直軸に制約する

垂直軸と水平軸を制約するには、ビューを選択して［位置揃え］アイコンから設定します。

他のビューや親レイアウトに水平軸と垂直軸に制約する

［水平］か［垂直］を選択します。他のビューやガイドラインが有る場合はそれに対して適度に制約されます。ない場合は親に制約されます。下記の属性が属性画面に追加されます。(制約対象とビューの位置によって異なります)

【水平の場合】

layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

【垂直の場合】

layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

パラメーターを変更したい場合は属性画面から変更します。ここに入るパラメーターは下記になります。 基本的には親である"parent"が入ってます。

• 親レイアウト
• 他のビュー
• ガイドライン
• バリア

親のレイアウトに水平軸と垂直軸を制約する

［親に水平］か［親に垂直］を選択します。前章の属性に加えてバイアス属性が入る時もあります。

マージンとバイアスを設定する

ビューを動かすとマージンかバイアスが適度に入ります。バイアスのセンタリングは別で設定するところがあるので後述します。

パラメーターは属性画面やレイアウト画面（属性画面の下にあります）から細かく設定する事も可能です。

自動で制約をする

［制約の推論］アイコンをクリックすると最低限の属性が自動で入ります。ただ難しいレイアウトには向いていません。

制約を削除する

制約を削除する方法は3通りあります。

1. ビュー毎に削除する方法
2. 個別に削除する方法
3. プロジェクト内の全ての制約を削除する方法があります。

ビュー毎に削除する方法

ビューを選択して右クリックメニューから［選択している制約のクリア］をクリックします。確認画面は出ないので注意して下さい。何回か行わないと全部消えてくれない場合があります。

制約を個別に削除する

属性画面から削除したい制約を選択して［宣言された属性］の［－］をクリックします。こちらも確認画面は出ないので注意して下さい。

設定した制約を全て削除する

［すべての制約をクリア］ボタンをクリックします。

【注意】このボタンをクリックすると確認メッセージの後にプロジェクト内にある全てのビューの制約が削除されるので気を付けて下さい。

属性を手動で追加する

属性を手動で追加するにはコードを直接編集するか、属性画面の［+］ボタンで追加できます。テキストフィールドに追加したい属性を入力します。

［すべての属性］画面から入力する事も出来ますが探すのが大変です😅

ベースラインで位置揃えをする

下記の手順でテキストビューをボタンビューに対してベースラインの位置揃えをしています。

1. ボタンビューを親に水平・垂直に制約。
2. テキストビューをボタン対してに水平に制約。
3. テキストビューのlayout_constraintEnd_toEndOf属性が要らないので削除。(あっても良い)
4. テキストビューのベースラインを表示。
5. ボタンに位置に揃え。

バイアスでセンタリングをする

下記の手順でバイアスで水平・垂直のセンタリングをしています。

1. ボタンビューを親に水平にセンタリング。
2. ボタンビューを親に垂直にセンタリング。

ガイドラインに制約する

下記の手順でガイドラインに制約しています。ボタンビューはガイドラインに制約し、ガイドラインは親に制約しています。

1. ボタンビューを水平・垂直に制約
2. layout_constraintBottom_toBottomOf属性が要らないので削除。(あっても良い)
3. layout_constraintEnd_toEndOf属性が要らないので削除。(あっても良い)
4. 垂直ガイドラインを追加
5. 水平ガイドラインを追加
6. 垂直ガイドラインを親に対して水平に制約。
7. 水平ガイドラインを親に対して垂直に制約。
8. ボタンビューのlayout_constraintStart_toStartOf属性のパラメーターを垂直ガイドラインに設定。
9. ボタンビューのlayout_constraintTop_toTopOf属性のパラメーターを水平ガイドラインに設定。

バリアに制約する

下記の手順で垂直バリアを追加しています。ビューは親に対して制約しています。

1. 垂直バリアを追加。
2. ビューを複数選択。
3. ビューをバリアに紐付け。
4. ボタンAを親に対して水平に制約。
5. ボタンAを親に対して垂直に制約
6. ボタンBをAに対して垂直に制約。
7. ボタンBを親に対して水平に制約。

チェーンの制約をする

チェーンのスタイルは下図の種類があります。

Spread・Spread Inside・Packedチェーン

下記の手順で水平軸のチェーンの制約をしています。この方法ではSpread・Spread Inside・Packedのスタイルが選択できます。例はSpreadチェーンになってます。

1. ビューを複数選択。
2. 水平軸のチェーンを追加。
3. チェーンのスタイルを設定。
4. ビューを親に対して垂直に制約。

Packedチェーンのバイアス

Packedチェーンのバイアスにするには、［Chain Style］を［Packed］にして、複数選択したまま動かします。

Weightedチェーン

Weightedチェーンを作るメニューは見当たりませんでしたが手動で属性を追加すれば可能です。

1. ［Chain Style］を［Spread］にする。
2. 各ビューのlayout_width属性かlayout_height属性を0dpに設定する。(例：水平軸のチェーンならlayout_width属性を0dpにする)
3. 各ビューにlayout_constraintHorizontal_weight属性かlayout_constraintVertical_weight属性を追加する。(例：水平軸のチェーンならlayout_constraintHorizontal_weight属性を追加)
4. 各ビューに手順③のパラメーターに重みを設定する。

見た目上では手順②にした時点でWeightedチェーンの状態になりますが、weight属性が自動で入ってくれない為手動で追加しています。

ビューをアスペクト比のサイズする

下記の手順でビューをアスペクト比に設定しています。縦のサイズの比率に合わせて幅を変更する設定をしています。最初に親などに制約しないとちゃんと機能しないです。layout_height属性でwrap_contentをしてる場合は画面サイズから適度な大きさになりますがサイズ指定する事もできます。0dpを指定すると画面一杯になります。

比率を入力するlayout_constraintDimensionRatio属性の所が赤くエラーになっていますが、この入力値で間違えてないです。XMLコード側でもコンパイルしてもエラーは出ていません。この属性はfloat値でも指定可能なんですがそちらで入力しろと言っています。float値を入れるとエラーは解消されますがアスペクト比が変更出来なくなるので不具合だと思います。

1. ビューを親に水平に制約。
2. ビューを親に垂直に制約。
3. layout_width属性を0dpにする。
4. 比率の入力欄を表示。
5. 比率を入力。
6. サイズを指定したい場合はlayout_height属性にサイズを入力。

ビューをグループ化する

下記の手順でビューをグループ化しています。

1. グループを追加。
2. ビューを複数選択。
3. ビューをグループに紐付け。

XMLコードで記述する

Android Studioでは設定できない配置パターン、細かな設定が必要な場合や操作がわからない場合はXMLコードに直接記述してしまった方が早いかもしれません。現にこのページは全ての配置パターンを載せていません😓XMLでの書き方は下記の記事へどうぞ。