Android
ConstraintLayout

ConstraintLayoutのCenteringとbiasの基本

検証環境

この記事の内容は、以下の環境で検証した。
* Android Studio 3.0.2
* constraint-layout 1.0.2

はじめに

ConstrantLayoutには様々な設定項目があります。
下記の記事で記述したように、今回は「Centeringとbias」のみについて説明します。

ConstraintLayoutを理解する前に・・・

また、レイアウトの配置やViewの基礎知識は下記を参照してください。

ConstraintLayoutのRelative positioningの基本

また本記事は水平方向によるCenteringについてのみ説明します。
水平方向で実現できることは垂直方向でも可能です。また、設定項目を変更するだけで実現できるため、この記事では水平方向のみの説明をします。

基本的なCentering方法

今回は他の記事で説明した内容が多く踏まれています。
基本的なCenteringは他の記事で説明した内容で説明が可能です。
設定項目や実装イメージは下図のとおりです。

basic_centering.png

layout_constraintLeft_toRightOf、layout_constraintRight_toRightOf、layout_constraintStart_toEndOf、layout_constraintEnd_toStartOfなどを利用してparentを両端を指定すれば、Centeringされます。
Window幅を自動で計算し、中央に配置してくれます。

CenteringされたViewの位置を調整(bias)する

位置を調整するには、 layout_constraintHorizontal_bias で設定します。
layout_constraintHorizontal_biasには 0.0 から 1.0 の値を設定します。1.0を超えてしまった例も提示します。
設定値と見た目、Constraingの線のイメージは以下のとおりです。

設定値 見た目 Constraintの線
0.25 0.25.png 0.25d.png
0.5 0.5.png 0.5d.png
0.75 0.75.png 0.75d.png
1.0 1.0.png 1.0d.png
1.2 1.2.png 1.2d.png

上記の表からわかることが2つあります。
1つ目は、1.0より大きな値を指定すると、画面外に表示されてしまうことです。

2つ目は、Constraintの線の絵のしたにSliderが存在します。設定値に合わせて位置が変わっています。
GUIでも設定が可能です。この場合、値は1〜100となります。

CenteringしたViewとmargin

既にmarginについては、別の記事で説明しています。
このような自動で計算してCenteringされたViewが存在する場合、解像度から端末ごとに表示される位置が多少変わります。
例えば、「表示する画像が大きいのだが最低でも52dpはmarginをとりたい」なんてことがあります。
このような要件にも対応できます。

実際に対応した例が以下のイメージとなります。

basic_centering_margin.png

図からも理解できるように、marginをとりつつ余った領域でCenteringが行われています。

複数のViewをRelative positionで配置したときのbiasについて

まずは、複数のViewを配置しCetnering方法ですが基本的には変わりません。
各々を繋いで、両端のViewがParentに接続するだけで複数のViewを含めたCenteringが可能です。
注意点があります!
この様なケースの場合、biasは有効になりません。

実際に対応した例が以下のイメージとなります。

basic_multi_centering.png

Designタブのイメージから見て取れるように、お互いのViewが線でつながっていて、中央に配置されています。

複数のViewを配置したときの別の例

同じ高さの位置で1つだけCenteringし、一つのViewは右寄せの場合は下記の様になります。
この時、 CetneringしているViewはbiasが有効になります。

実際に対応した例が以下のイメージとなります。

basic_multi_centering_option.png

まとめ

LinearLayoutなどで中央揃えするより簡単に配置できるように感じます。biasも最初はわかりづらいですが、実際に動かしてみると意外と単純なように思えます。ここまでの記事でだいぶ柔軟な記述方法ができるように感じます。

参考

今回使用したアイコンはIcons8を使用しています。
Icons8のライセンスは、 CC BY-ND 3.0です。
https://icons8.com/

ConstraintLayout
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html