Android ConstraintLayout约束布局简单使用介绍

前言

什么是约束布局（ConstraintLayout）

我们可以理解为增强版/升级版的相对布局（RelativeLayout）。

Android Studio 从版本2.3开始创建xml默认的根布局就是约束布局，相信大家对相对布局已经是使用的非常6了，所有在使用约束布局的话就会比较轻松。
那么既然已经有相对布局了，为什么还要用约束布局呢？最核心就是：

让布局扁平化，减少布局嵌套的层次，提高渲染效率，提升应用性能。

所以说约束布局还是很有必要学一学的，最起码在性能优化方面是很有帮助的。
下面就一起开始学习吧！

ConstraintLayout 官方文档

废话不多说，直接进入主题。

举个最简单的栗子：
将一个在ConstraintLayout中居中，如下：

居中

代码很简单，就是给TextView添加上下左右边界的约束即可。所以写约束布局就是写控件的边界约束。

下面我们先介绍下约束属性的写法以及含义。

app:layout_constraintStart_toStartOf="parent"

我们来解释下属性：
第一个start代表的是控件自身的约束方向。
第二个start代表的目标控件的约束方向。
第三个parent代表的是和那个控件建立约束。如果是父控件，就填parent，如果是其他控件，就填写控件的id。

下面我们就以最实用的现实场景来简单学习下ConstraintLayout。

控件水平排列
代码如下：

效果如下：

水平排列

同理垂直方向上的排列就不多说了。

垂直方向居中
代码如下：
```
  

  
 
```

效果如下：

垂直方向居中

重点：让控件自身的上边界和先边界分别和目标控件的上下边界进行对应约束即可。

垂直居中的同时，高度一致
```
  

  
```

效果如下：

垂直居中且高度相等

其实很简单，只需要将控件自身的高度设置为0dp即可，0dp的意思就是match constraint，就是充满约束。

基于某个控件的下边界线居中
代码如下：
```
 


  

  
```

效果如下：

边界居中

重点：控件自身的垂直约束方向都和目标控件的底边建立约束即可。

权重平分空间
宽度相同，平分间距。
代码如下：
```
  

  

  
```

效果如下：

同等宽度间距平分

控件宽度平分，只需要改变上述代码中的android:layout_width="0dp"即可实现。
代码如下：

效果图如下：

平分空间

重点：让宽度为0dp，充满约束即可。

根据不同的权重实现不同比例的平分，这里的权重的使用必须是充满约束才会生效，即宽度为0dp，而且约束布局的权重分为垂直和水平两个方向。
代码如下：

效果图如下：

权重平分

这里只写了水平方向上的权重，垂直方向上的权重同理。

不同大小文字的对齐（基准线对齐）
代码如下：
```
  

  

  

  

 
```

效果如下：

文字基准线对齐

角度定位
使用角度定位需要3个条件：1.圆心 2.半径 3.角度。其中角度是从正上方顺时针开始的。
代码如下：
```
  

  

  
```
说明：

layout_constraintCircle 以哪个view为圆心
layout_constraintCircleRadius 圆的半径
layout_constraintCircleAngle 旋转角度，以第一象限顺时针开始。

效果如下：

角度定位
约束宽度
一个文本的长度不能超过图片的宽度。
代码如下：
```
  

  
```

效果如下：

约束宽度

可以看到文本的整体的宽度被约束为和上面的图片等宽，高度的约束也是同理。

bias，约束倾向，取值范围：0.0-1.0。 0.0最左侧，1.0最右侧。一般配合约束宽度来使用。
看下聊天的UI效果如下：

聊天

文字短的时候包裹内容，超过最大宽度换行展示。
代码如下：
```
  

  
```

效果如下：

短文字效果

短文字长度效果
中等文字效果

中等文字长度效果
超长文字效果

超长文字长度效果

水平方向上的约束倾向如上，垂直方向上的约束倾向同理。

GoneMargin。当约束目标控件隐藏时，控件自身可以保留一定的间距。
代码如下：
```
  

  
```

效果如下：

正常情况

GoneMargin1
当约束控件隐藏，但是不加GoneMargin属性。

GoneMargin2
当约束控件隐藏，加上GoneMargin属性。

GoneMargin3

可以看出来GoneMargin的作用了吧。

约束链风格 ChainStyle
风格：packed（打包，组合），spread（扩散，默认），spread_inside（内部扩散）。而且约束链风格必须写在第一个控件上才有效。
1. 组件组合后居中
  代码如下：
```
  

  
```
  效果如下：
  
  垂直方向约束链风格
  
  而且还支持约束倾向bias.水平方向同理。
  1. 组件内部扩散
    代码如下：
```
 


  

  

  
```
  效果如下：
  
  spread_inside
  
  垂直方向同理。
控件宽高比例保持一致， DimensionRatio
使用这个属性的前提是，控件的宽或者高至少有一个是充满约束的，即为0dp。
代码如下：
```
  
```

宽高比：2:1
效果如下：

DimensionRatio

如果宽和高都是0dp，DimensionRatio需要加上“H,2:1”，这个H说明高度是计算出来的，也就是说宽度充满约束，这里就不再演示了。

百分比布局，宽度或者高度占parent的百分比
这个百分比始终是针对parent的百分比，而且使用百分比的前提是宽度或者高度必须充满约束，即0dp。
代码如下：
```
 
 

  

  
```

效果如下：

百分比

第一个View 宽度占parent 的30%，第二个View宽度占parent的50%，垂直方向上的百分比同理。

GuideLine（基准线/辅助线）
这个是辅助控件，辅助控件之间的约束，而不是一个真正的控件。
下面举一个简单的UI栗子，比如登录页面。
代码如下：
```
  

  

  

  

  
```

效果如下：

GuidLine

Group
当某一种状态下需要多好多控件进行隐藏和显示时，可以使用Group，来统一显示和隐藏。
代码如下:
```
  

  

  

  

  

  
```

效果如下：
设置Group1的visibility=visible时，效果如下：

Visible

设置Group1的visibility=gone时，效果如下：

Gone

Layer
也是一个约束辅助，它的使用和Group类似，只不过layer可以对整体进行旋转，平移等常用的操作。
代码如下：

public class CommonTest extends FragmentActivity {

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.common_constraint_layout_demo);
      findViewById(R.id.layer).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              //旋转45d°
              findViewById(R.id.layer).setRotation(45);
              //X轴向右平移100px
              findViewById(R.id.layer).setTranslationX(100);
              //Y轴向下平移100px
              findViewById(R.id.layer).setTranslationY(100);
          }
      });
  }
}

效果如下：

Layer

Barrier
屏障,栅栏。给约束控件设置约束上的屏障，已达到约束位置的目的。
代码如下：
```
  

  

  

  

  

 
```

效果如下：

Barrier

像：Group，Layer，Barrier都是以ID的引用来实现的，所以如果使用了特殊的混淆工具，对id资源进行了混淆，这里就需要注意下，不然运行起来会找不到id的。

Placeholder
占位符。
代码如下：

 public class CommonTest extends FragmentActivity {

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.common_constraint_layout_demo);
  }

  public void onClick(View view) {
      findViewById(R.id.placeholder).setContentId(view.getId());
  }
}

效果如下：

Placeholder

当点击下面3个view其中一个view的时候，被点击的view会被替换到上面的Placeholder所在的位置。

Android ConstraintLayout约束布局简单使用介绍

前言

你可能感兴趣的:(Android ConstraintLayout约束布局简单使用介绍)