ConstraintLayoutでできないことを探してみた

個人的にはRelativeLayoutで書くとかなり自由度が上がると思っているので、RelativeLayoutでできることをConstraintLayoutでできるか試してみました。

以前書いたやつ
RelativeLayoutの使いどころ

結論から言うと、できないことはないんじゃないかなと思います。
ただ、使いづらい部分や細かい改修のときにどうなるかといった不安は若干ながらあるかなといった印象です。

複数のviewを並べてセンターにする

こういうの。LinearLayoutだとネストが増えます。

LinearLayoutの場合

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="スター" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/btn_star" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/btn_star" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/btn_star" />
    </LinearLayout>
</LinearLayout>

RelativeLayoutの場合

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="スター" />

    <!-- 真ん中 -->
    <ImageView
        android:id="@+id/star2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/text"
        android:src="@android:drawable/btn_star" />

    <!-- 左 -->
    <ImageView
        android:id="@+id/star1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@id/star2"
        android:layout_below="@id/text"
        android:src="@android:drawable/btn_star" />

    <!-- 右 -->
    <ImageView
        android:id="@+id/star3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/star2"
        android:layout_below="@id/text"
        android:src="@android:drawable/btn_star" />
</RelativeLayout>

ConstraintLayoutの場合

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:text="スター"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <ImageView
        android:src="@android:drawable/btn_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintLeft_toLeftOf="parent" />

    <ImageView
        android:src="@android:drawable/btn_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        app:layout_constraintBottom_toBottomOf="@+id/imageView1"
        app:layout_constraintTop_toTopOf="@+id/imageView1" />

    <ImageView
        android:src="@android:drawable/btn_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView3"
        app:layout_constraintBottom_toBottomOf="@+id/imageView1"
        app:layout_constraintTop_toTopOf="@+id/imageView1"
        app:layout_constraintLeft_toRightOf="@+id/textView" />
</android.support.constraint.ConstraintLayout>

できてる！

アプリを真似してみる

大丈夫そうな気がしてきたので、愛用してる食べログアプリのレイアウトをRelativeLayoutとConstraitLayoutでつくってみました。

検索結果に出てくるセルの１つを目視でつくりました。
画像とか細かい部分は適当です。左がRelative、右がConstraintです。
　

書いたソースはこちらに置きました。
https://github.com/kojimamasahiro/CopyTabelogLayout

ネストに関しては、どちらも同じ数となりました。
なかなかいいかもしれません。

おわりに

いいとこ
・楽しくできる。直観的に使えるので楽しかったです。
・ちゃんとレイアウトがつくれてる。ネストも少ない。

わるいとこ
・制約で紐づいているViewまで変更がかかってしまう。
・重い。制約をつけるときのアニメーションが重いのかな？

慣れてるというのもありますが、結局RelativeLayoutでつくるほうが早くできました。
いじってると勝手に他のところまで変更を加えることがあるので、そこがつらかったです。

まあ、まだベータ版っぽいので、正式版が出たら採用してもいいのかなと思います。

ConstraintLayoutのいいところの１つに、ネストが一番少ないレイアウトを自動で作成してくれるようなので、正式版が出たら、ネストが減らないか現状のアプリのlayoutをConstraintLayoutにして確認したいと思います。