# ConstraintLayoutDemo

**Repository Path**: LiuLinXi/ConstraintLayoutDemo

## Basic Information

- **Project Name**: ConstraintLayoutDemo
- **Description**: ConstraintLayout的一些使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ConstraintLayout

## 1.ConstraintLayout的性能优势

### Android 如何绘制视图

### 1.测量（大小）

-   系统自顶向下遍历视图树，以确定每个 ViewGroup 和 View 元素应当有**多大**。在测量 ViewGroup 的同时也会测量其子对象。
    

### 2.布局（位置）

-   系统执行另一个自顶向下的遍历操作，每个 ViewGroup 都根据测量阶段中所确定的大小来确定其子对象的**位置**。
    

### 3.绘制

-   系统再次执行一个自顶向下的遍历操作。对于视图树中的每个对象，系统会为其**创建一个 Canvas 对象**，以便向 GPU 发送一个**绘制命令列表**。这些命令包含系统在前面 2 个阶段中确定的 ViewGroup 和 View 对象的大小和位置。
    

### tips

-   绘制过程中的每个阶段都需要对视图树执行一次自顶向下的遍历操作。因此，视图层次结构中嵌入（或**嵌套**）的视图越多，设备绘制视图所需的时间和计算功耗也就越多
    
-   使用 ConstraintLayout 来构建相同的布局，允许构建复杂的布局，而不必嵌套 View 和 ViewGroup 元素。
    

## 2.ConstraintLayout的使用

参考[谷歌文档](https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html#RelativePositioning)

### 2.1相对定位约束

![相对定位约束](https://images.gitee.com/uploads/images/2019/0322/213025_e676151e_1812582.png)

-   `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`
    

上面的采用id或者parent相对约束

例如`layout_constraintLeft_toLeftOf`理解为该控件的的左边在某控件（id/parent）的左边

### 2.2边距

![边距](https://images.gitee.com/uploads/images/2019/0322/213024_35897e5f_1812582.png)

-   `android:layout_marginStart`
    
-   `android:layout_marginEnd`
    
-   `android:layout_marginLeft`
    
-   `android:layout_marginTop`
    
-   `android:layout_marginRight`
    
-   `android:layout_marginBottom`
    
-   注意margin只能是>0
    

当参考的Widget可见性设置为View.GONE时也可以设置间距

-   `layout_goneMarginStart`
    
-   `layout_goneMarginEnd`
    
-   `layout_goneMarginLeft`
    
-   `layout_goneMarginTop`
    
-   `layout_goneMarginRight`
    
-   `layout_goneMarginBottom`
    

### 2.3居中和偏离定位

居中定位：

![居中效果](https://images.gitee.com/uploads/images/2019/0322/213024_ad8d7199_1812582.png)

偏移（默认50%）

-   `layout_constraintHorizontal_bias`
    
-   `layout_constraintVertical_bias`
    

![偏移0.3的位置](https://images.gitee.com/uploads/images/2019/0322/213025_bf250069_1812582.png)

### 2.4圆形定位（1.1增加）

以角度和距离约束窗口小部件中心相对于另一个窗口小部件中心

属性如下：

-   `layout_constraintCircle`：引用另一个小部件ID
    
-   `layout_constraintCircleRadius`：到其他窗口小部件中心的距离
    
-   `layout_constraintCircleAngle`：小部件应该处于哪个角度（以度为单位，从0到360）
    

![图示](https://images.gitee.com/uploads/images/2019/0322/213024_41ac78d8_1812582.png)

![圆形定位](https://images.gitee.com/uploads/images/2019/0322/213024_b8754cd0_1812582.png)

### 2.5可见性处理

`ConstraintLayout`具有标记为小部件的特定处理`View.GONE`。

使用gone设置的距离仍然有效

-   `layout_goneMarginStart`
    
-   `layout_goneMarginEnd`
    
-   `layout_goneMarginLeft`
    
-   `layout_goneMarginTop`
    
-   `layout_goneMarginRight`
    
-   `layout_goneMarginBottom`
    

![A设置GONE后](https://images.gitee.com/uploads/images/2019/0322/213025_ffa74922_1812582.png)

### 2.6尺寸限制

设置布局的最大最小尺寸，将使用这些最小和最大尺寸在`WRAP_CONTENT`中。

-   `android:minWidth`设置布局的最小宽度
    
-   `android:minHeight`设置布局的最小高度
    
-   `android:maxWidth`设置布局的最大宽度
    
-   `android:maxHeight`设置布局的最大高度
    

`android:layout_width`和`android:layout_height`属性来指定小部件的大小时：

-   使用特定尺寸（文字值，例如`123dp`或`Dimension`参考）
    
-   使用`WRAP_CONTENT`，这将要求小部件计算自己的大小
    
-   使用`0dp`，相当于“`MATCH_CONSTRAINT`”（不推荐直接使用“`MATCH_CONSTRAINT`”）
    

![](https://images.gitee.com/uploads/images/2019/0322/213025_3172d26e_1812582.png)

#### WRAP_CONTENT：强制约束（***在1.1中添加***）

如果将维度设置为`WRAP_CONTENT`，则在1.1之前的版本中，它们将被视为文字尺寸 - 这意味着约束不会限制生成的尺寸。虽然通常这足够（并且更快），但在某些情况下，您可能希望使用`WRAP_CONTENT`，但仍然强制执行约束来限制结果维度。在这种情况下，您可以添加一个相应的属性：

-   `app:layout_constrainedWidth=”true|false”`
    
-   `app:layout_constrainedHeight=”true|false”`
    

#### MATCH_CONSTRAINT尺寸（***1.1中添加***）

当维度设置为时`MATCH_CONSTRAINT`，默认行为是使结果大小占用所有可用空间。还有几个额外的修饰符：

-   `layout_constraintWidth_min`和`layout_constraintHeight_min`：将设置此尺寸的最小大小
    
-   `layout_constraintWidth_max`和`layout_constraintHeight_max`：将设置此尺寸的最大大小
    
-   `layout_constraintWidth_percent`和`layout_constraintHeight_percent`：将此尺寸的大小设置为父级的百分比
    

##### 最小和最大

为min和max指示的值可以是dp中的尺寸，也可以是“wrap”，它将使用与其相同的值`WRAP_CONTENT`。

##### 百分比

要使用百分比，您需要设置以下内容：

-   尺寸应设置为`MATCH_CONSTRAINT`（0dp）
    
-   默认值应设置为百分比`app:layout_constraintWidth_default="percent"`或`app:layout_constraintHeight_default="percent"`
    
    （**注意：**这在1.1-beta1和1.1-beta2中是必需的，但如果定义了percent属性，则在以下版本中不需要）
    
-   然后将`layout_constraintWidth_percent`或`layout_constraintHeight_percent`属性设置为0到1之间的值
    

### 2.7比例

将按钮的高度设置为与其宽度相同。

-   浮点值，表示宽度和高度之间的比率
    
-   “宽度：高度”形式的比率
    

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

### 2.8链

#### 链

一组小部件通过双向连接链接在一起

![链](https://images.gitee.com/uploads/images/2019/0322/213025_7dfda362_1812582.png)

#### 链头

链由链的第一个元素（链的“头部”）上设置的属性控制：

![链头](https://images.gitee.com/uploads/images/2019/0322/213025_e5c2ace5_1812582.png)

头部是水平链的最左侧小部件，垂直链的最顶部小部件。

#### 链中的边距

如果在连接上指定了边距，则会使用设定的边距。在扩散链的情况下，会根据设置留空间。

#### 链式

设置属性`layout_constraintHorizontal_chainStyle`或`layout_constraintVertical_chainStyle`链的第一个元素时，链的行为将根据指定的样式（默认值`CHAIN_SPREAD`）更改。

-   `CHAIN_SPREAD`- 元素将展开（默认样式）
    
-   加权链入`CHAIN_SPREAD`模式，如果设置了一些小部件`MATCH_CONSTRAINT`，它们将分割可用空间
    
-   `CHAIN_SPREAD_INSIDE`- 类似，但链的端点不会散开
    
-   `CHAIN_PACKED`- 链条的元素将被包装在一起。然后，子项的水平或垂直偏差属性将影响打包元素的定位
    
![](https://images.gitee.com/uploads/images/2019/0322/213025_c680a0ff_1812582.png)

#### 加权链

链的默认行为是在可用空间中平均分布元素。如果使用了一个或多个元素`MATCH_CONSTRAINT`，它们将使用可用的空白空间（在它们之间平均分配）。属性`layout_constraintHorizontal_weight`和`layout_constraintVertical_weight`将控制如何将空间利用的元素之间进行分配`MATCH_CONSTRAINT`。例如，在包含两个元素的链上使用`MATCH_CONSTRAINT`，第一个元素使用权重2，第二个元素使用权重1，第一个元素占用的空间将是第二个元素占用的空间的两倍。

#### 边距和链条（***1.1***）

在链中的元素上使用边距时，边距是相加的。

例如，在水平链上，如果一个元素定义了10dp的右边距，而下一个元素定义了5dp的左边距，则这两个元素之间产生的边距为15dp。

在计算链用于定位项目的剩余空间时，会同时考虑项目及其边距。剩余空间不包含边距。

2.9虚拟助手对象

除了之前详述的内在功能外，您还可以使用特殊的辅助对象`ConstraintLayout`来帮助您进行布局。目前，该`Guideline`对象允许您创建相对于`ConstraintLayout`容器定位的水平和垂直准线。然后可以通过将小部件限制为这样的指导来定位小部件。在**1.1中**，`Barrier`也`Group`被添加了。

#### GuideLine

-   `layout_constraintGuide_begin`
    
-   `layout_constraintGuide_end`
    
-   `layout_constraintGuide_percent `

```java
<android.support.constraint.Guideline
   android:id="@+id/guideline"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   app:layout_constraintGuide_end="206dp" />
 <android.support.constraint.Guideline
   android:id="@+id/guideline_horizontal"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   app:layout_constraintGuide_percent="0.5" />

```

#### Barrier

Barrier是一个类似于屏障的东西.它和Guideline比起来更加灵活.它可以用来约束多个view.

属性：

-   `barrierDirection`
    
    取值有top、bottom、left、right、start、end，用于控制 Barrier 相对于给定的 View 的位置。比如在上面的栗子中，Barrier 应该在 姓名TextView 的右侧，因此这里取值right（也可end，可随意使用.这个right和end的问题,其实在RelativeLayout中就有体现,在RelativeLayout中写left或者right时会给你一个警告,让你换成start和end）。
    
-   `constraint_referenced_ids`
    
    取值是要依赖的控件的id（不需要@+id/）。Barrier 将会使用ids中最大的一个的宽（高）作为自己的位置。


```java
<TextView
 android:id="@+id/tv_name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dp"
 android:text="姓名"
 app:layout_constraintBaseline_toBaselineOf="@id/et_name"
 app:layout_constraintTop_toTopOf="parent" />
 <TextView
 android:id="@+id/tv_address"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dp"
 android:text="实际地址"
 app:layout_constraintBaseline_toBaselineOf="@id/et_address"
 app:layout_constraintTop_toBottomOf="@id/tv_name" />
 <EditText
 android:id="@+id/et_name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:hint="写下你的姓名"
 app:layout_constraintLeft_toRightOf="@id/barrier" />
 <EditText
 android:id="@+id/et_address"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:hint="写下你的地址"
 app:layout_constraintLeft_toRightOf="@id/barrier"
 app:layout_constraintTop_toBottomOf="@id/et_name" />
 <android.support.constraint.Barrier
 android:id="@+id/barrier"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:barrierDirection="right"
 app:constraint_referenced_ids="tv_name,tv_address" />
```

#### Group

可以把View放到里面,然后Group可以同时控制这些view的隐藏.


```java
<android.support.constraint.Group
 android:id="@+id/group"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:visibility="visible"
 app:constraint_referenced_ids="button1,button2" />
```