constraintLayout简单但强大的约束布局

前言

哇,习惯了使用LinearLayout,RelateLayout,FrameLayout,很早就听说constraintLayout约束布局出来了,但是一直没使用过,今天试了一下,确实非常强大,绝对是RelateLayout的加强升级版,对于复杂的界面,绝对能减少布局的层级嵌套,大大提高app性能,但使用起来还是非常简单的。

基本属性

app:layout_constraintLeft_toLeftOf

表示此控件的左边框与指定控件的左边框对齐
app:layout_constraintLeft_toLeftOf = “parent”表示贴在布局的左边框,其实就是与左边框产生约束,类似于layout_alignParentLeft=”true”

app:layout_constraintLeft_toRightOf

表示此控件的左边框在指定控件的右边(整体在右)

app:layout_constraintRight_toLeftOf

表示此控件的右边框在指定控件的左边(整体在左)

app:layout_constraintRight_toRightOf

表示此控件的右边框与指定控件的右边框对齐
app:layout_constraintRight_toRightOf = “parent”表示贴在布局的右边框,其实就是与右边框产生约束,类似于layout_alignParentRight=”true”

app:layout_constraintTop_toTopOf

表示此控件的上边框和指定控件的上边框对齐
app:layout_constraintTop_toTopOf = “parent”表示贴在布局的上边框,其实就是与上边框产生约束,类似于layout_alignParentTop=”true”

app:layout_constraintTop_toBottomOf

表示此控件的上边框在指定控件的下边(整体在下)

app:layout_constraintBottom_toBottomOf

表示此控件的下边框和指定控件的下边框对齐
app:layout_constraintBottom_toBottomOf = “parent”表示贴在布局的下边框,其实就是与下边框产生约束,类似于layout_alignParentBottom=”true”

app:layout_constraintBottom_toTopOf

表示此控件的下边框在指定控件的上边(整体在上)

app:layout_constraintBaseline_toBaselineOf

表示此控件与指定控件水平对齐
实现:点击该button按钮,下方会出现 x,ab两个图标,x表示去掉所有约束,ab表示切换显示横条还是四个点,点击ab在button中间会出现一根横条,然后把该控件和指定控件的横条相连就行了。

tools:layout_editor_absoluteX

表示此控件在布局中X轴的绝对坐标点

tools:layout_editor_absoluteY

表示此控件在布局中Y轴的绝对坐标点

app:layout_constraintGuide_begin

表示布局中引导线距离左边框的距离(dp)
实现:先通过Add Vertical Guideline 或者 Add Horizontal Guideline添加一条竖直方向的或者水平方向的引导线,然后移动这根线,默认就是设置其距左边框的距离,点击这条引导线,上面有一个小圆,点击小圆有三种类型(<,>,%)左箭头对应的就是这个属性

app:layout_constraintGuide_end

表示布局中引导线距离右边框的距离(dp)
实现:点击这条引导线,上面有一个小圆,点击小圆有三种类型(<,>,%)右箭头对应的就是这个属性

app:layout_constraintGuide_percent

表示在整个布局中引导线距离左边框的百分百(如:app:layout_constraintGuide_percent=”0.5”表示距离左边框50%的位置)
实现:点击这条引导线,上面有一个小圆,点击小圆有三种类型(<,>,%)%对应的就是这个属性

app:layout_constraintStart_toEndOf(不怎么用)

表示此控件的左边界在某个控件右边界的右边,及表示此控件在某个控件的右边,这个和app:layout_constraintLeft_toRightOf类似啊,所以感觉用不到

app:layout_constraintStart_toStartOf(不怎么用)

表示此控件的左边界与某个控件的左边界在同一垂直线上,这个和app:layout_constraintLeft_toLeftOf类似啊,所以感觉用不到

app:layout_constraintEnd_toStartOf(不怎么用)

同理

app:layout_constraintEnd_toEndOf(不怎么用)

同理

app:layout_constraintHorizontal_bias

当该控件的左右边都设置了约束,才能使用该属性,表示此控件在布局中的水平方向上的偏移百分量

app:layout_constraintVertical_bias

当该控件的左右边都设置了约束,才能使用该属性,表示此控件在布局中的竖直方向上的偏移百分量

app:layout_constraintDimensionRatio

表示两个控件的纵横比,而使用则需要把宽(layout_width)或者高(layout_height)设置为0dp,根据另一个属性和比例, 计算当前属性, 如 app:layout_constraintDimensionRatio=”6:3” 表示宽比高为6:3

goneMargin属性

一共支持的属性如下:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

比如A,B两个view,B在A的右边,这时候如果A消失了,但是你想让B在父布局的右边多少距离,就可以使用这个属性,很神奇。

creator迷之属性

app:layout_constraintBaseline_creator=”12”
app:layout_constraintTop_creator=”12”
app:layout_constraintBottom_creator=”12”
app:layout_constraintLeft_creator=”12”
app:layout_constraintRight_creator=”12”
这几个属性在当前版本并没有任何作用

自动添加约束

自动添加约束的方式主要有两种,一种叫Autoconnect,一种叫Inference,其实就是两个按钮
Autoconnect默认关闭,需要手动打开
Inference系统会帮你将布局的view都添加约束,但是并不一定是你想要的。

差不多这样,基本这些属性就够用了,也试着拖拽着使用了一下,大致都了解了,想要使用这个布局,光看是不行的,还是要写个Demo自己用用这些属性,用了就知道,什么效果了。