Android 之约束布局

简单介绍

约束布局 ConstraintLayout 是一个ViewGroup,主要解决布局嵌套过多，从而在布局加载时，就要耗费了许多内存，影响了项目的整体的一个客户体验感，以及屏幕适配。所以约束布局也是项目中，比不可少的部分！

这里有官方文档，帮助大家更详细的去了解一下：

https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout

手动操作：https://blog.csdn.net/guolin_blog/article/details/53122387

---

如何使用

1.第一步添加依赖、布局设置为ConstranitLaoyout：

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

 

2.相对定位：相对定位在约束布局中是最基本的模块，主要分为横向、纵向的约束关系：

（1）相对定位的属性：

   

 

• 横向： left、Right、Start、End.

layout_constraintLeft_toLeftOf //控件1的左侧放置到控件2的左边
layout_constraintLeft_toRightOf //控件1的左侧放置到控件2的右边

layout_constraintRight_toLeftOf //控件1的右侧放置到控件2的左边
layout_constraintRight_toRightOf //控件1的右侧放置到控件2的右边

layout_constraintTop_toTopOf //控件1的顶部放置到控件2的顶部
layout_constraintTop_toBottomOf //控件1的顶部放置到控件2的底部

layout_constraintBottom_toTopOf //控件1的底部放置到控件2的顶部
layout_constraintBottom_toBottomOf //控件1的底部放置到控件2的底部

 

• 纵向：Top、Bottom、Baseline：

layout_constraintStart_toEndOf //控件1的起始边放置到控件2的尾部
layout_constraintStart_toStartOf //控件1的起始边放置到控件2的起始边

layout_constraintEnd_toStartOf //控件1的尾部放置到控件2的起始边
layout_constraintEnd_toEndOf //控件1的尾部放置到控件2的尾部

//Baseline指的是文本基线，当两个文本高度不同，也可以对齐的方式
layout_constraintBaseline_toBaselineOf 

 

• 角度定位：可以用一个角度和一个距离来约束两个空间的中心

app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"（角度）
app:layout_constraintCircleRadius="150dp"（距离）

 

3.边距：

• margin

ConstraintLayout的边距常用属性如下：
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

这里注意了控件必须在布局里约束一个相对位置，否则外边距不生效的。

 

•  GONE MARGIN 那么这里介绍这个特性，在其他布局中有一个这样的问题，就是当控件A向控件B添加了约束，控件B隐藏后，控件B并不能改变他的边距，导致布局不美观，那么GONE MARGIN 就很好的解决了这个问题。

 ConstraintLayout的Gone margin常用属性如下：
 layout_goneMarginStart
 layout_goneMarginEnd
 layout_goneMarginLeft
 layout_goneMarginTop
 layout_goneMarginRight
 layout_goneMarginBottom

4.居中和倾向

• 居中

 

一般我们在其他布局当中只需要把layout_centerInParent设为true即可，那么在约束布局当中需要在两个控件之间添加约束

 ConstraintLayout的居中常用属性如下：
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"

     ConstraintLayout的倾向常用属性如下：
 layout_constraintHorizontal_bias //垂直偏移
 layout_constraintVertical_bias //水平偏移


     5.尺寸约束
 
  
 
   
使用指定的尺寸
 
   
使用wrap_content，让控件自己计算大小
 
   
android:minWidth 最小的宽度
 android:minHeight 最小的高度
 android:maxWidth 最大的宽度
 android:maxHeight 最大的高度
 
   
这些最小尺寸当ConstraintLayout被设置为WRAP_CONTENT时有效
 
   
注意！当ConstraintLayout为1.1版本以下时，使用这些属性需要加上强制约束，如下所示：
 app:constrainedWidth=”true”
 app:constrainedHeight=”true”
 
   
宽高比：当宽或高至少有一个尺寸被设置为0dp时，可以通过属性layout_constraintDimensionRatio设置宽高比
 
  
 
  

 
  
 宽设置为0dp，宽高比设置为1:1，这个时候TextView1是一个正方形。
 
  
比例的设置有两种格式：
 
  
 
   
宽度与高度的比，可理解为受约束的一方尺寸：另一方尺寸       
 
   
受约束的一方尺寸/另一方尺寸得到的浮点数值
 
   
app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
 app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3
 
  
 
  
 6.优化
 
  
 
   
 Barrier优化屏障约束：
 
  
 
  
 
  
 代码如下：
 
  


    

    

    
 
  
app:barrierDirection为屏障所在的位置，可设置的值有：bottom、end、left、right、start、top
 app:constraint_referenced_ids为屏障引用的控件，可设置多个(用“,”隔开)
 
  
   
 
  
         
 
  
  代码如下：当设置了group 将其中两个TextView隐藏
 
  
 
   
 Groupp可以把多个控件归为一组，方便隐藏或显示一组控件:
 
  
 
  

 
  
结果如下：
 
  
 
 
  
 
 
  
 
   
 Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置
 
  
 
  


    
 
  
新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content="@+id/textview"，这时TextView会跑到屏幕的左上角 
 
  
 
  
 
 
  
 
   
 Guideline像辅助线一样，在预览的时候帮助你完成布局
 
   
 
Guildline的主要属性：
 android:orientation 水平vertical，垂直horizontal
 layout_constraintGuide_begin 开始位置
 layout_constraintGuide_end 结束位置
 layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)
 
 
   
 
部分转载于：https://www.jianshu.com/p/38ee0aa654a8
 
 
   
 
https://www.jianshu.com/p/17ec9bd6ca8a