zukkeyの技術奮闘記

”当たり前”が誰かのためになる、はず

ConstraintLayoutを学ぶ-基礎編 #1

はじめに

お久しぶりです。三日ごとに投稿するつもりがこの間一気に投稿してしまったので、ネタが尽き新規に始める時間が取れず更新が遅れていました。(言い訳タイム終了)

 

 

ようやく時間が取れたので今回は、ConstraintLayoutを作成したサンプルをもとに紹介していきたいと思います。

 

 

ConstraintLayoutとは

 Qiitaにすでに先人がまとめてくれていたので詳しくはこちらを参照ください

qiita.com

 

この記事によると、

iOSでいうところのStoryboardのAutoLayoutのような機能をもったレイアウトです。
具体的な特徴として

  • AutoConnectという機能を使って最適なレイアウトを調整できる
  • Android Studioが自動的に一番フラットなxmlを生成してくれる
  • Inferenceという機能で全体の整合性も調整できる
  • API 9 までのバックポート対応
  • 同梱ライブラリではなく、導入してもサイズが小さい (100kb)

ということが挙げられます。

といった特徴があります。

 

また、こちらの記事によると

 

developers-jp.googleblog.com

 

こんなことがわかっているそうです。

パフォーマンスの比較から、ConstraintLayout は RelativeLayout より計測フェーズと配置フェーズが約 40% 早くなっていることがわかります。

 

アニメーションをつけたり、機能が多くなってくるとパフォーマンスによってうまく機能しなくなることがありますので、これからはなるべくConstraintLayoutを用いられるだけ用いた方が良いと思うので今回は学んだことを書き残して行きたいと思います。

 

各属性の理解から始める

今回はこちらのスライドを参考にとりあえず試してみる。

 

speakerdeck.com

 

今回は、TextViewを使ってとりあえず試していこうと思う。

 

まずは画面中央にTextViewを配置していく

 以下のような画面を作る

f:id:rozkey59:20180303164700p:plain

 

書いたコードは以下になる

 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_dark"
android:text="サンプル"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
/>

</android.support.constraint.ConstraintLayout>
</layout>

 

layout_constraintxxxxxxに入る部分が指定したい子ビューのどこに制約を決めるか、つまり今回であればTextViewの上なのか下なのかなど制約をきめたい部分を定義する。

 

layout_constraintxxx_toyyyOfのyyyに入る部分は他のどのビューに対して制約をかけるのかを指定する。

今回はセンターに置くためにparent、つまり親ビューを指定して真ん中に表示するようにしている。

 

比率を変える

次は縦横の比率を以下のように変えてみます

 

f:id:rozkey59:20180303170312p:plain

 

 

コードで書くとこのようになります

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.constraint.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_dark"
android:text="サンプル"
app:layout_constraintVertical_bias="0.3"
app:layout_constraintHorizontal_bias="0.7"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>

</android.support.constraint.ConstraintLayout>
</layout>

 

先ほどと違うのは、layout_constraintVertical_biasとlayout_constraintHorizontal_biasの属性が加わったことです。

 

layout_constraintVertical_biasは垂直方向の比率を変えることができ、画像でいうと赤色の矢印のような比率で変えることができます。今回は、0.3で指定したので上が0.3、下が0.7の比率に指定しています。

 

layout_constraintHorizontal_biasは水平方向の比率を変えることができ、画像でいうと黒の矢印のような比率で変えることができます。今回は、0.7で指定したので左が0.7、右が0.3の比率に指定しています。

 

上下左右にいっぱいに広げる

今度は上下左右にいっぱいに広げるように指定します

 

f:id:rozkey59:20180303171200p:plain

 

コードで書くと以下のようになります

 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/holo_red_light"
android:text="サンプル"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>

</android.support.constraint.ConstraintLayout>
</layout>

 

上下左右に広げたい場合は、widthとheightを0dpにすることで広げることができます。

 

match constraintでサイズを指定する

先ほど行ったconstraintいっぱいに広げた際に以下のようにサイズを指定することもできます

 

f:id:rozkey59:20180303171849p:plain

 

コードで書くと以下のようになります

 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/holo_purple"
android:text="サンプル"
app:layout_constraintWidth_max="300dp"
app:layout_constraintHeight_max="300dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>

</android.support.constraint.ConstraintLayout>
</layout>

 

layout_constraintWidth_maxでmatch constraintの時の幅を指定することができ、layout_constraintHeight_maxでmatch constraintの時の高さを指定することができます

 

 

さいごに

今回は、ConstraintLayoutの基本の部分をサンプルを作成して実際にやってみたことの紹介でした。

今後もやってみたことや、実際にプロジェクトでやってみた際にハマったことなども書いて行きたいと思います。

 

また、今回作成したサンプルは以下のGitHubに置いてあるのでクローンしてビルドすることで試すこともできます。

GitHub - yutaro6547/ConstraintLayoutSamples