ConstraintLayuot學習

ConstraintLayuot學習
- 一. Constraints(條件限制)
  - 1.1 布局代碼
  - 1.2 結果
- 二. Chains鍊
  - 2.1 布局代碼
  - 2.2 結果
  - 2.3 Chains鍊的三種形式
    - 2.3.1 spread形式
      - 截圖
      - 代碼
      - 注意
    - 2.3.2 spread_in形式
      - 截圖
      - 代碼
    - 2.3.3 packed形式
      - 截圖
      - 代碼
      - 注意
- 三. GuideLine
  - 3.1 代碼
  - 3.2 效果
- 四. Dimensions
  - 4.1 xml代碼
  - 4.2 效果
  - 4.3 注意
- 五. Barriers(栅欄)
  - 5.1 Barriers來由
  - 5.2 Barrier的xml代碼
  - 5.3 效果
  - 5.4 注意
- 六. Placeholders（1.1.x）
  - 6.1 代碼
  - 6.2 效果
    - 6.2.1 模闆的效果
    - 6.2.2 使用效果
    - 6.2.3 注意
  - 6.3 動态映射
- 七. Groups(1.1.x）
  - 7.1 代碼
- 八. Circular positioning(1.1.x）
  - 8.1 代碼
  - 8.2 效果:
- 九. Percent dimensions(1.1.x）
  - 9.1 代碼
  - 9.2 效果
- 十. Gradle配置

一. Constraints(條件限制)

1.1 布局代碼

<?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"
  tools:context=".MainActivity">

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />

  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    tools:text="TextView" />
</android.support.constraint.ConstraintLayout>

1.2 結果

ConstraintLayuot學習ConstraintLayuot學習

layout_constraintLeft_toLeftOf=“xx”可以是父容器也可以是一個id，表示自己的左邊和xx的左邊對齊,這個有點像相對布局

二. Chains鍊

2.1 布局代碼

<?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">

    <Button
        android:id="@+id/buttonA"
        android:layout_width="126dp"
        android:layout_height="128dp"
        android:text="buttonA"
        app:layout_constraintBottom_toTopOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonB"

        app:layout_constraintBottom_toTopOf="@+id/buttonC"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>

    <Button
        android:id="@+id/buttonC"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonC"

        app:layout_constraintBottom_toTopOf="@+id/buttonD"
        app:layout_constraintTop_toBottomOf="@+id/buttonB"
        tools:text="buttonC"
        />

    <Button
        android:id="@+id/buttonD"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonD"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonC"
        tools:text="buttonD"
        />
</android.support.constraint.ConstraintLayout>

隻是把每個view的上下對齊對象指定了，它會在每個view中間加上相同大小的間隙

2.2 結果

ConstraintLayuot學習ConstraintLayuot學習

注：如果某一個view加上了margin_top的話，間隙會把margin_top減掉，再除以4

2.3 Chains鍊的三種形式

spread
spread_inside
packed

2.3.1 spread形式

該形式是預設形式，每個子View都有上下邊距，邊距相等，效果和前面的一樣：

截圖

ConstraintLayuot學習ConstraintLayuot學習

代碼

xml代碼

<?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">

    <Button
        android:id="@+id/buttonA"
        android:layout_width="126dp"
        android:layout_height="128dp"
        android:text="buttonA"
        app:layout_constraintBottom_toTopOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonB"

        app:layout_constraintBottom_toTopOf="@+id/buttonC"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>

    <Button
        android:id="@+id/buttonC"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonC"
        app:layout_constraintBottom_toTopOf="@+id/buttonD"
        app:layout_constraintTop_toBottomOf="@+id/buttonB"
        tools:text="buttonC"
        />

    <Button
        android:id="@+id/buttonD"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonD"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonC"
        tools:text="buttonD"
        />
</android.support.constraint.ConstraintLayout>

注意

第16行，因為是縱向，一定要用layout_constraintVertical_chainStyle
隻需要第一個View寫明layout_constraintVertical_chainStyle，其它的View不管用

來看Mark Allison大神說的一句話

Also on textView there is app:layout_constraintHorizontal_chainStyle="spread" which specifies the spread mode; you can manually(手動地) set this to spread_inside or packed to specify(指定) different chain modes. This must always be done on the View at the head of the chain - in other words the first item in the chain.

一定要是第一個子View寫layout_constraintVertical_chainStyle才有效

2.3.2 spread_in形式

該形式是和spread的差別是邊沿的兩個View不會有間隙

截圖

ConstraintLayuot學習ConstraintLayuot學習

代碼

<?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">

    <Button
        android:id="@+id/buttonA"
        android:layout_width="126dp"
        android:layout_height="128dp"
        android:text="buttonA"
        app:layout_constraintBottom_toTopOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread_inside"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonB"
        app:layout_constraintBottom_toTopOf="@+id/buttonC"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>

    <Button
        android:id="@+id/buttonC"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonC"
        app:layout_constraintBottom_toTopOf="@+id/buttonD"
        app:layout_constraintTop_toBottomOf="@+id/buttonB"
        tools:text="buttonC"
        />

    <Button
        android:id="@+id/buttonD"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonD"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonC"
        tools:text="buttonD"
        />
</android.support.constraint.ConstraintLayout>

同樣，隻需要在第一個元素裡添加此屬性

2.3.3 packed形式

該形式是所有元素緊湊的放一起，上下留邊沿

截圖

ConstraintLayuot學習ConstraintLayuot學習

代碼

<?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">

    <Button
        android:id="@+id/buttonA"
        android:layout_width="126dp"
        android:layout_height="128dp"
        android:text="buttonA"
        app:layout_constraintBottom_toTopOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.23"
        app:layout_constraintVertical_chainStyle="packed"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonB"
        app:layout_constraintBottom_toTopOf="@+id/buttonC"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>

    <Button
        android:id="@+id/buttonC"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonC"
        app:layout_constraintBottom_toTopOf="@+id/buttonD"
        app:layout_constraintTop_toBottomOf="@+id/buttonB"
        tools:text="buttonC"
        />

    <Button
        android:id="@+id/buttonD"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonD"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonC"
        tools:text="buttonD"
        />
</android.support.constraint.ConstraintLayout>

注意

也隻要在第一個元素裡申明
還可以用layout_constraintVertical_bias來表示上下的間隙比例，0.5表示上下相等

三. GuideLine

guideline 隻是用來輔助布局的，并不會在運作時顯示出來，它是一條橫向或縱向的直線

3.1 代碼

<?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">

    <android.support.constraint.Guideline
        android:id="@+id/guide_line_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="56dp"
        />

    <android.support.constraint.Guideline
        android:id="@+id/guide_line_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="64dp"/>

    <Button
        android:id="@+id/buttonA"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="buttonA"

        app:layout_constraintLeft_toRightOf="@+id/guide_line_2"
        app:layout_constraintTop_toBottomOf="@+id/guide_line_1"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="buttonB"
        app:layout_constraintLeft_toRightOf="@+id/guide_line_2"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>


</android.support.constraint.ConstraintLayout>

android:orientation="horizontal" 表示它的方向
app:layout_constraintGuide_begin="56dp" 表示它離起點多遠；如果是橫向表示它離頂端的距離，如果是縱向，表示離左邊的距離
還可以用 layout_constraintGuide_percent 來表示位置，0.5表示在中間

3.2 效果

ConstraintLayuot學習ConstraintLayuot學習

四. Dimensions

比如想顯示一張圖檔，它的寬度固定，高度也不确定，你唯一确定的是它的寬高比。一般可能通過複寫ImageView，然後根據圖檔的寬度和寬高比來算出高度，或是通過PercentLayout來實作，ConstraintLayout也支援

4.1 xml代碼

<?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">


    <android.support.constraint.Guideline
        android:id="@+id/guide_line_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="113dp"/>

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@color/colorAccent"
        app:layout_constraintDimensionRatio="h,4:3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/guide_line_2"
        app:layout_constraintTop_toTopOf="parent"
        />

</android.support.constraint.ConstraintLayout>

4.2 效果

ConstraintLayuot學習ConstraintLayuot學習

4.3 注意

layout_constraintDimensionRatio="h,4:3" 表示橫向，4:3
一定要把 layout_width 寫成0
這裡把左邊和guideline對齊，目的就是讓ImageView的亮度是動态的，不同手機它的寬度不一樣。

五. Barriers(栅欄)

5.1 Barriers來由

一個官方的例子：三個TextView，左邊兩個，分别為TextView1,TextView2,右邊一個為TextView3;怎麼做到TextView3在TextView1和TextView2的右邊，TextView會随着文字的長度變化而變化，在英文的情況下，textView1比TextView2長，但是有些語言TextView2比TextView1長，如果沒有Barriers，我們可能會用LinearLayout去嵌套TextView1和TextView2，那就會多一層，是以有了Barriers。

英文環境下

ConstraintLayuot學習ConstraintLayuot學習

其它語言環境下

ConstraintLayuot學習ConstraintLayuot學習

5.2 Barrier的xml代碼

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="warehouse"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="hospital hospital"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView2,textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="lorem_ipsum"
        app:layout_constraintStart_toEndOf="@+id/barrier7"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

5.3 效果

ConstraintLayuot學習ConstraintLayuot學習

5.4 注意

constraint_referenced_ids="textView2,textView1" 表示要包的view
app:layout_constraintStart_toEndOf="@+id/barrier7" 表示在barrier7的左邊(從左到右的語言)

六. Placeholders（1.1.x）

placeholder在1.1.x裡才有，就是一個模闆xml檔案，每個元素都用placeHolder代替，當需要用這個模闆的時候才指定元素

6.1 代碼

模闆：

constraint_placeholder.xml

<?xml version="1.0" encoding="utf-8"?>
<merge 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"
       tools:layout_editor_absoluteX="0dp"
       tools:layout_editor_absoluteY="81dp"
       tools:parentTag="android.support.constraint.ConstraintLayout">

    <android.support.constraint.Placeholder
        android:id="@+id/template_main_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:content="@+id/top_image"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <android.support.constraint.Placeholder
        android:id="@+id/template_save"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/save"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_delete"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_delete"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/delete"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_cancel"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_save"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_cancel"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/cancel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_edit"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_delete"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_edit"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/edit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_cancel"
        />

</merge>

使用模闆

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/root"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">

    <include layout="@layout/constraint_placeholder"/>

    <ImageView
        android:id="@+id/top_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher_notify"
        />

    <ImageButton
        android:id="@+id/save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:srcCompat="@drawable/ic_launcher_notify"/>

    <ImageButton
        android:id="@+id/edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_launcher_notify"/>

    <ImageButton
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"

        app:srcCompat="@drawable/ic_launcher_notify"/>

    <ImageButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"

        app:srcCompat="@drawable/ic_launcher_notify"/>


</android.support.constraint.ConstraintLayout>

6.2 效果

6.2.1 模闆的效果

ConstraintLayuot學習ConstraintLayuot學習

6.2.2 使用效果

ConstraintLayuot學習ConstraintLayuot學習

6.2.3 注意

tools:parentTag="android.support.constraint.ConstraintLayout" 這個是用來看視圖的
<include layout="@layout/constraint_placeholder"/> 真實布局裡要include進來
app:content="@+id/top_image" 表示與哪個view對應

6.3 動态映射

也可以通過java代碼動态映射，并通過TransitionManager實作動畫

constraint_placeholder.xml

<?xml version="1.0" encoding="utf-8"?>
<merge 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"
       tools:layout_editor_absoluteX="0dp"
       tools:layout_editor_absoluteY="81dp"
       tools:parentTag="android.support.constraint.ConstraintLayout">

    <android.support.constraint.Placeholder
        android:id="@+id/template_main_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:content="@+id/top_image"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <android.support.constraint.Placeholder
        android:id="@+id/theImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintTop_toBottomOf="@+id/template_main_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <android.support.constraint.Placeholder
        android:id="@+id/template_save"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/save"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_delete"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_delete"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/delete"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_cancel"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_save"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_cancel"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/cancel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_edit"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_delete"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_edit"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/edit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_cancel"
        />

</merge>

constraint_holder_use.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/root"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">

    <include layout="@layout/constraint_placeholder"/>

    <ImageView
        android:id="@+id/top_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"
        android:scaleType="fitXY"
        />

    <ImageButton
        android:id="@+id/save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <ImageButton
        android:id="@+id/edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"

        />

    <ImageButton
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/ic_launcher_notify"/>

    <ImageButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"
        />

    <ImageView
        android:id="@+id/theImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"
        android:visibility="visible"/>

    <ImageView
        android:id="@+id/theImageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:background="@mipmap/ic_launcher_round"
        android:visibility="visible"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

kotlin代碼：

package com.seekting.demo2019

import android.app.Activity
import android.os.Bundle
import android.support.constraint.Placeholder
import android.transition.TransitionManager
import android.view.ViewGroup
import android.widget.ImageView

class ConstraintLayoutActivity : Activity() {

    lateinit var theImage: Placeholder
    lateinit var saveImage: ImageView
    lateinit var editImage: ImageView
    lateinit var rootView: ViewGroup
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.constraint_holder_use)
        theImage = findViewById(R.id.theImage)
        saveImage = findViewById(R.id.save)
        editImage = findViewById(R.id.edit)
        rootView = findViewById(R.id.root)

        saveImage.setOnClickListener({
            TransitionManager.beginDelayedTransition(rootView)

            theImage.setContentId(R.id.theImageView)
        })
        editImage.setOnClickListener({
            TransitionManager.beginDelayedTransition(rootView)
            theImage.setContentId(R.id.theImageView1)
        })
    }
}

效果：

ConstraintLayuot學習ConstraintLayuot學習

七. Groups(1.1.x）

通過group能把幾個平級的view圈在一起

7.1 代碼

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/textView1"
        app:layout_constraintDimensionRatio="h,4:3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="warehouse"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/img"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hospital hospital"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1"/>

    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="textView2,textView1"/>

    <Button
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="點選隐藏Group"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"/>

</android.support.constraint.ConstraintLayout>

java代碼

fun group() {
       setContentView(R.layout.constraint_group)
       group = findViewById(R.id.group)
       textView3 = findViewById(R.id.textView3)
       textView3.setOnClickListener({
           val visibility = group.visibility
           if (visibility == View.GONE) {
               group.visibility = View.VISIBLE
           } else {
               group.visibility = View.GONE
           }
       })
   }

八. Circular positioning(1.1.x）

8.1 代碼

<?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"
    >

    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@mipmap/ic_launcher"
        />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintCircle="@+id/image1"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp"
        tools:src="@mipmap/ic_launcher_round"


        />

</android.support.constraint.ConstraintLayout>

8.2 效果:

ConstraintLayuot學習ConstraintLayuot學習

九. Percent dimensions(1.1.x）

9.1 代碼

<?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:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5"
        tools:text="textView1"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.2"
        tools:text="textView1"/>
</android.support.constraint.ConstraintLayout>

9.2 效果

ConstraintLayuot學習ConstraintLayuot學習

十. Gradle配置

dependencies {
  // other libs...
  implementation 'com.android.support.constraint:constraint-layout:1.1.0'
  // other libs...
}

ConstraintLayuot學習ConstraintLayuot學習

ConstraintLayuot學習

一. Constraints(條件限制)

1.1 布局代碼

1.2 結果

二. Chains鍊

2.1 布局代碼

2.2 結果

2.3 Chains鍊的三種形式

2.3.1 spread形式

截圖

代碼

注意

2.3.2 spread_in形式

截圖

代碼

2.3.3 packed形式

截圖

代碼

注意

三. GuideLine

3.1 代碼

3.2 效果

四. Dimensions

4.1 xml代碼

4.2 效果

4.3 注意

五. Barriers(栅欄)

5.1 Barriers來由

5.2 Barrier的xml代碼

5.3 效果

5.4 注意

六. Placeholders（1.1.x）

6.1 代碼

6.2 效果

6.2.1 模闆的效果

6.2.2 使用效果

6.2.3 注意

6.3 動态映射

七. Groups(1.1.x）

7.1 代碼

八. Circular positioning(1.1.x）

8.1 代碼

8.2 效果:

九. Percent dimensions(1.1.x）

9.1 代碼

9.2 效果

十. Gradle配置

繼續閱讀