一起学习ConstraintLayout

之前和朋友聊到ConstraintLayout，他说用了之后你就不想用RelativeLayout了，今天抽空对着官方文档学一遍。

1、Relative positioning

1、ConstraintLayout提供了如下位置相关属性

• 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
• layout_constraintStart_toEndOf
• layout_constraintStart_toStartOf
• layout_constraintEnd_toStartOf
• layout_constraintEnd_toEndOf
  见名知意，比如 layout_constraintLeft_toLeftOf=“@+id/xxx”，表示约束View的左边在id为xxx的view的左边。

2、layout_constraintLeft_toLeftOf=“@+id/xxx”可以不指定id，可以为layout_constraintLeft_toLeftOf=“parent”，这样可以做居中效果，如下：

• 水平居中

  <android.support.constraint.ConstraintLayout ...>
         <Button android:id="@+id/button" ...
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintRight_toRightOf="parent"/>
     </>
  

• 垂直居中

  <android.support.constraint.ConstraintLayout ...>
         <Button android:id="@+id/button" ...
             app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintBottom_toBottomOf="parent"/>
     </>
  

• 整体居中就四个全加上

2、layout_goneMargin

1、ConstraintLayout提供如下属性，用于比如View B 约束在View A右边，假如有个需求当A Gone的时候，B需要个marge left，这时候使用layout_goneMarginLeft即可。

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

3、Bias

1、ConstraintLayout提供如下属性，类型百分比

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

2、示例及效果

<android.support.constraint.ConstraintLayout ...>
         <Button android:id="@+id/button" ...
             app:layout_constraintHorizontal_bias="0.3"
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintRight_toRightOf="parent/>
     </>

TIM截图20171220143404.png

4、Circular positioning

1、ConstraintLayout提供如下属性，用于View B 在View A 某个角度半径为xx的位置上。

• layout_constraintCircle
• layout_constraintCircleRadius
• layout_constraintCircleAngle

2、示例及效果

<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
  app:layout_constraintCircle="@+id/buttonA"
  app:layout_constraintCircleRadius="100dp"
  app:layout_constraintCircleAngle="45" />

TIM截图20171220143828.png

5、Visibility behavior

1、通常我们使用RelativeLayout，View B 处于 View A 右边，当A Gone的时候，B会失去相对关系，而ConstraintLayout则不会，看下面效果图，A处于Gone状态，B的约束效果还是作用。

TIM截图20171220144909.png

6、Ratio

1、ConstraintLayout提供比例属性

• 高根据宽的值按比例显示

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:background="@android:color/darker_gray"
    android:text="Hello World!"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintTop_toTopOf="parent"
    />
  

TIM截图20171220153731.png

• 宽根据高的值按比例显示

  <TextView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@android:color/darker_gray"
    android:text="Hello World!"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintTop_toTopOf="parent"
    />
  

TIM截图20171220153844.png

2、若宽和高都为0dp，app:layout_constraintDimensionRatio分两种情况，H表示高宽比，W表示宽高比，前提条件要0dp和 center on parent

 <Button android:layout_width="0dp"
               android:layout_height="0dp"
               app:layout_constraintDimensionRatio="H,16:9"
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintTop_toTopOf="parent"/>

7、Chains

1、Chain Style

• 第一个TextView为head，它的layout_constraintHorizontal_chainStyle决定了链风格

  <TextView
    android:text="11111"
    android:background="@color/colorPrimary"
    android:layout_width="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tv2"
    app:layout_constraintHorizontal_chainStyle="spread"
    android:layout_height="wrap_content"
    android:id="@+id/tv1"
  />
  
  
    <TextView
        android:text="2222"
        android:background="@color/colorAccent"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv2"
        app:layout_constraintRight_toLeftOf="@+id/tv3"
        />
  
    <TextView
        android:text="3333"
        android:background="@android:color/darker_gray"
        android:layout_width="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_height="wrap_content"
       android:id="@+id/tv3"
        app:layout_constraintLeft_toRightOf="@+id/tv2"/>
  

TIM截图20171220170911.png

• 默认风格是spread，其他风格效果

  
  TIM截图20171220171138.png

2、Weighted chains

• 如上面例子，layout_width或layout_height改为0dp，使用layout_constraintHorizontal_weight或layout_constraintVertical_weight即可。