1.簡介

ConstraintLayout是一個ViewGroup，翻譯為約束布局，約束布局的出現(xiàn)主要是為了解決布局嵌套過深的情況，自android studio2.3開始，新建布局文件默認根ViewGroup就是它

2.基本屬性

2.1 相對定位

例如TextView2需要放在TextView1后方，可以使用app:layout_constraintStart_toEndOf

Start_toEndOf

<TextView
    android:id="@+id/txt1"
    android:text="Text1"/>
<TextView
    android:id="@+id/txt2"
    android:text="Text2"
    app:layout_constraintStart_toEndOf="@id/txt1"/>

相似的屬性有：

• layout_constraintLeft_toLeftOf
• layout_constraintLeft_toRightOf
• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf：對TextView有效，基線對齊
• layout_constraintStart_toEndOf
• layout_constraintStart_toStartOf
• layout_constraintEnd_toStartOf
• layout_constraintEnd_toEndOf

如果是依賴父布局的話可以使用parent

app:layout_constraintStart_toEndOf="parent"

2.2間距margins

margin和其它布局方式一樣，支持的屬性有：

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom

但是ConstraintLayout多了一種間距goneMargin，用來指定當依賴的控件visibility為gone時的間距，此屬性當且僅當依賴控件為gone時生效，支持屬性：

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

2.3居中定位和偏移bias

如果想相對于一個依賴的控件垂直居中，例如想要相對于根布局水平居中，使用

水平居中

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

如果是別的控件，填對應(yīng)控件id即可
如果想要距離左邊偏移30%，則可以使用

向左偏移30%

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.3"

2.4圓形定位

一般APP都有這樣的功能：在人物頭像右下角顯示一個等級標識
用圓形定位就很容易實現(xiàn)這種效果，圓形定位相關(guān)屬性有三個：

• layout_constraintCircle : 制定依賴控件的id

• layout_constraintCircleRadius : 距離依賴控件中心點的距離

• layout_constraintCircleAngle : 指定位于依賴控件的方向（0-360）

  
  
  圓形定位

  <ImageView
      android:id="@+id/img1"
      android:layout_width="50dp"
      android:layout_height="50dp"
      android:src="@mipmap/ic_launcher_round"/>
  <ImageView
      android:layout_width="20dp"
      android:layout_height="20dp"
      android:src="@drawable/shape_circle"
      app:layout_constraintCircle="@id/img1"
      app:layout_constraintCircleRadius="30dp"
      app:layout_constraintCircleAngle="135"/>
  

2.5百分比尺寸

前提條件：

• 寬或高需要設(shè)置為MATCH_PARENT（即設(shè)置為0dp）

• 設(shè)置屬性layout_constraintWidth_percent 或者 layout_constraintHeight_percent（值為[0,1)）

  
  
  百分比尺寸

  <Button
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintWidth_percent="0.8"
      app:layout_constraintHeight_percent="0.2"/>
  

2.6比例尺寸

顧名思義就是按比例設(shè)置尺寸，相關(guān)屬性：

• app:layout_constraintDimensionRatio
  一般情況下寬和高一個設(shè)置0dp一個設(shè)置WRAP_CONTENT即可

  
  
  寬：高=1：2

  <Button
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintDimensionRatio="1:2"/>
  

如果兩個都設(shè)置為0dp的話

2.7chains

chains提供水平或垂直方向上的一組控件的排列方式

默認方式：spread

spread(默認方式)

<Button
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn1"
    app:layout_constraintEnd_toStartOf="@id/btn2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_chainStyle="spread"/>
<Button
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn2"
    app:layout_constraintEnd_toStartOf="@id/btn3"
    app:layout_constraintStart_toEndOf="@id/btn1"/>

<Button
    android:id="@+id/btn3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/btn2"/>

方式：spread-inside

spread-inside

app:layout_constraintHorizontal_chainStyle="spread_inside"

方式：packed

packed

app:layout_constraintHorizontal_chainStyle="packed"

方式：weighted chain

該形式只在spread mode下體現(xiàn)出來，比如可以設(shè)置btn1和btn2的寬度為MATCH_PARENT(0dp)來平分剩余的空間

Weighted chain

<Button
    android:id="@+id/btn1"
    android:layout_width="0dp"
    android:text="btn1"
    app:layout_constraintEnd_toStartOf="@id/btn2"
    app:layout_constraintStart_toStartOf="parent"/>
<Button
    android:id="@+id/btn2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="btn2"
    app:layout_constraintEnd_toStartOf="@id/btn3"
    app:layout_constraintStart_toEndOf="@id/btn1"/>

3輔助控件

3.1Barrier

有下面一個場景：有兩行長度不一的文本現(xiàn)在要在兩行文本后面添加一個文本，需要后添加的文本保證位于兩行文本較長的后方

text內(nèi)容比text2長

text2內(nèi)容比text1長

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="txt1,txt2"/>

用到的屬性有兩個:

• app:barrierDirection="end" ：指定界限方向 left|start|right|end|top|bottom
• app:constraint_referenced_ids="txt1,txt2"：指定id集合，用‘,’隔開

3.2Group

group制定一組控件，可以設(shè)置該組控件的可見性

• app:constraint_referenced_ids="txt1,txt2" ：指定id集合，用‘,’隔開
• android:visibility="gone"

3.3Guideline

guideline是一條看不見的線，可以設(shè)置其位置，然后讓其余控件依賴此guideline從而進行布局
相關(guān)屬性有三個

• android:orientation：指定guideline方向 horizontal|vertical
• app:layout_constraintGuide_begin：指定guideline距離布局左邊位置(dp) 優(yōu)先級>layout_constraintGuide_end
• app:layout_constraintGuide_end：指定guideline距離布局右邊位置(dp) 優(yōu)先級最低
• app:layout_constraintGuide_percent：以小數(shù)形式(0-1)指定位置 優(yōu)先級最高