ConstraintLayout布局

ConstraintLayout API DOCS

1.ConstraintLayout 简介

一个新的ViewGroup，位于android.support.constraint包下。1.解决现有布局嵌套问题 了解使用 ConstraintLayout 的性能优势。2.可使用布局编辑器拖动控件完成布局。

2.开始使用

在SDK->SDK Tools->Support Repository->ConstraintLayout Install下

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

3.属性介绍

现可用约束

• Relative positioning
• Margins
• Centering positioning
• Circular positioning
• Visibility behavior
• Dimension constraints
• Chains
• Virtual Helpers objects
• Optimizer

1.Relative positioning

属性位置.png

属性意义和RelativeLayout属性类似。属性值可选id或者parent

 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

例子：app:layout_constraintLeft_toLeftOf的意义是：该控件左侧依靠在谁左侧

btn1居中，btn2在btn1右侧

效果.png

2.Margins

Margins.png

可用属性

属性
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

特有属性：当 View.GONE时可以使用这部分属性设置一个gone margin
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

当btn2依赖的btn1为GONE时，使用app:layout_goneMarginLeft属性。不为GONE时使用android:layout_marginLeft属性

效果.png

3.Centering positioning and bias

layout_constraintVertical_bias
layout_constraintHorizontal_bias

Center.png

.Centering positioning and bias.png

左侧依赖于父布局左侧，右侧依赖于父布局右侧，水平偏移10%

效果.png

4.Circular positioning

image.png

layout_constraintCircle: 依赖View的ID
layout_constraintCircleRadius: 偏移角度
layout_constraintCircleAngle:半径

image.png

5.Visibility behavior

详情见2Margins

image.png

6.Dimensions constraints

当View为WRAP_CONTENT时可使用
android:minWidth 
android:minHeight
android:maxWidth
android:maxHeight

Widgets dimension constraints

android:layout_width和android:layout_height可以设置3种值：

1. 指定具体大小：120dp
2. WRAP_CONTENT
3. 0dp：代表“MATCH_CONSTRAINT”

image.png

图a：WRAP_CONTENT
图b：0dp
图c：0dp+margin
ConstraintLayout不再推荐子View使用MATCH_PARENT

WRAP_CONTENT : enforcing constraints

控件使用WRAP_CONTENT 时，maxWidth和minHeight 不起作用。可以使用
app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”

image.png

MATCH_CONSTRAINT dimensions

当控件设置属性为MATCH_CONSTRAINT时，可以使用

layout_constraintWidth_min
layout_constraintHeight_min 
layout_constraintWidth_max 
layout_constraintHeight_max 
layout_constraintWidth_percent ：0-1之间，parent的几%
layout_constraintHeight_percent ：0-1之间，parent的几%

image.png

Ratio

image.png