ConstraintLayoutメモ

# 基本

* 親の左に紐付いている

<img width="324" alt="スクリーンショット 2019-03-23 13.15.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/fa241fa1-1963-e43a-6523-39ad354ade78.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

# 基本

* 親の左右に紐付いている
* 紐付いている空間の真ん中に配置される

<img width="350" alt="スクリーンショット 2019-03-23 11.55.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/0db66427-087c-53eb-7321-f53fad33692f.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

# layout_constraintHorizontal_bias / layout_constraintVertical_bias

* 紐付いている空間に配置される場所を調整する
* layout_constraintHorizontal_biasが0で左、1が右となり、小数で微調整可能
* layout_constraintVertical_biasが0で上、1が下となり、小数で微調整可能

<img width="324" alt="スクリーンショット 2019-03-23 13.15.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/fa241fa1-1963-e43a-6523-39ad354ade78.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

<img width="324" alt="スクリーンショット 2019-03-23 13.16.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/777658c6-010b-ca13-4acb-842ede1a8f3c.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

# chain（app:layout_constraintHorizontal_chainStyle="spread"）

* Viewどおしを紐付けることによってchainとなる
* chainが未指定の場合、デフォルトでapp:layout_constraintHorizontal_chainStyle="spread"となる
* spreadは余白が均等になるように配置される

<img width="325" alt="スクリーンショット 2019-03-23 14.17.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/82cbe141-4709-ffbf-cb60-a43873af411f.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/red_view"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/red_view"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/text_view"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

# app:layout_constraintHorizontal_chainStyle="packed"

* chainしたViewどおしがくっついて配置される

<img width="325" alt="スクリーンショット 2019-03-23 14.28.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/068c96ac-5227-7e14-9912-c9eb4bfd2213.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/red_view"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/red_view"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/text_view"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

### app:layout_constraintHorizontal_bias

* chainしたまとまりでbiasが機能する

<img width="320" alt="スクリーンショット 2019-03-23 14.50.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/1e209f7c-245e-fa3f-ff02-817bc2ed5281.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/red_view"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/red_view"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/text_view"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

# app:layout_constrainedWidth

*　ｔext_viewの文言が長くなった場合、red_viewが画面外にはみ出す

<img width="317" alt="スクリーンショット 2019-03-23 15.16.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/9c7fc900-e948-6b23-42ed-6a6054c8b994.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!Hello World!HelloHello World!Hello World!HelloHello World!Hello World!Hello"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/red_view"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/red_view"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/text_view"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```

* app:layout_constrainedWidthをtrueで指定することで制約を強制し、red_viewはparentからはみ出しません

<img width="330" alt="スクリーンショット 2019-03-23 15.43.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/149856/81f6fcc2-83f0-919e-c376-53093419cb1d.png">

```xml
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!Hello World!HelloHello World!Hello World!HelloHello World!Hello World!Hello"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/red_view"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/red_view"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/text_view"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
```