Android-约束布局ConstraintLayout的使用

Android-约束布局ConstraintLayout的使用

1. 是什么

简单一句话说明就是google在17年推出的一个新的布局,就像相对布局和线性布局一样。

2.有什么用,我干嘛用它

  • 谷歌推出它主要是为了解决嵌套布局引起的性能问题,用来优化app的性能的。
  • 比较灵活,使用方便,可视化编辑。
  • 自己刚开始也是比较拒绝的,到现在谷歌已经把它作为默认布局了,跟着谷歌走不会错的,用的多了你就会发现从难受到真香了。

3.使用步骤和一些平时使用

添加依赖:(现在项目已经默认添加了)

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

下面说一下常用的一些功能和部件:

  • 约束建立
    约束布局嘛,没有了相对布局的那些相对的属性,但是他的约束属性用起来跟相对布局感觉很相似。

-下面是他的基本的约束属性,在约束布局中,至少需要建立两个方向的约束,横向和竖向。
-从字面意思基本就能理解了,就是跟谁建立约束,它的值可以填parent和相对控件的@+id/xxx。
-Android有LTR和RTL两种布局方式,在LTR中 left = start,在RTL中 right = start。如果在布局的时候需要适配不同的国家,建议使用start和end。
-如果你喜欢界面拖拽的方式,可以选择在Design界面进行上下左右的拖拽建立约束,也是很方便的。

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_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
layout_constraintBaseline_toBaselineOf 

-特别说明一下layout_constraintBaseline_toBaselineOf
基线的对齐,比如两个文本大小不一致,但是要显示为文字底部平行,可以用此属性
Android-约束布局ConstraintLayout的使用

-如果要实现水平居中,很简单,只需要建立左右约束即可
Android-约束布局ConstraintLayout的使用

-如果要实现一个控件相对与上方的图片下方的线垂直居中,你就会发现它的强大之处,只需要上下方建立对上方图片的下方约束即可。
Android-约束布局ConstraintLayout的使用

  • 角度定位
    角度定位我们可以使用一个角度值和一个距离值来达到两个控件的相对位置,指的是中心位置。

-属性主要有3个
layout_constraintCircle(相对的控件id)
layout_constraintCircleAngle(角度,从正上方顺时针)
layout_constraintCircleRadius(中心点距离)

如图:
Android-约束布局ConstraintLayout的使用

  • goneMargin
    字面意思就是消失的时候的外边距,是约束的控件消失的时候自己的外边距。也有上下左右四个方向的属性。
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
  • chain
    链,当多个控件建立横向或者纵向两两相互约束的时候就形成了一条链,此时可以使用chainStyle来改变整个链的样式,有三种分别是:

-spread—— 展开元素 (默认)
Android-约束布局ConstraintLayout的使用

-spread_inside—— 展开元素,但链的两端贴近parent
Android-约束布局ConstraintLayout的使用

-packed—— 链的元素将被打包在一起
Android-约束布局ConstraintLayout的使用

  • Barrier
    英文翻译:障碍物,屏障,界线。可以建立相对于几个控件的上下左右的一个屏障,然后其他控件可以与这个屏障建立约束。

-barrierDirection 方向
-constraint_referenced_ids 建立屏障的控件id用“,”进行分割
Android-约束布局ConstraintLayout的使用

  • Group
    组的意思,可以将多个控件通过id绑定为一个组,然后进行相关的操作,例如隐藏和显示。

-constraint_referenced_ids 绑定的id,用“,”进行分割
Android-约束布局ConstraintLayout的使用

  • Guideline
    辅助线,跟ps里的辅助线类似。不会显示,只是辅助做页面用的。

-orientation 水平和垂直方向
-layout_constraintGuide_begin 开始位置,可以理解为边距
-layout_constraintGuide_end 结束位置,如果是竖直的,则会直接跑到右边,这两个设置一个即可,都设置begin生效
Android-约束布局ConstraintLayout的使用

-layout_constraintGuide_percent 距离百分比
Android-约束布局ConstraintLayout的使用

  • Placeholder
    占位符。此控件可以设置另一个控件的id,让其他控件变到这个位置。如下,我设置了一个Placeholder,点击下方Button,中间的ImageView将会移动到Placeholder。

Android-约束布局ConstraintLayout的使用

button.setOnClickListener {
            placeholder.setContentId(R.id.imageView)
        }
  • Flow
    一种虚拟布局,专门用来构建链式排版效果,当出现空间不足的情况时,它能够自动换行,甚至是自动延展到屏幕的另一区域。平时我们用的流式布局就可以用它完成,或者一些标签长短不一致的情况。

-flow_wrapMode 有三种
none 所有引用的视图以一条链的方式进行布局,如果内容溢出则溢出内容不可见
Android-约束布局ConstraintLayout的使用

chain 当出现溢出时,溢出的内容会自动换行,以新的一条链的方式进行布局
Android-约束布局ConstraintLayout的使用

aligned 同 chain 类似,但是不以行而是以列的方式进行布局
Android-约束布局ConstraintLayout的使用

-constraint_referenced_ids 设置id,这些控件不需要设置左右上下方向的约束。
-flow_horizontalGap 水平间隔
-flow_verticalGap 竖直间隔
-flow_HorizontalStyle 链的类型,与上面chain一样,在flow_wrapMode="chain"时,还可以设置flow_firstHorizontalStyle 第一行的链类型

  • Layer
    图层。它并不会对视图进行布局,而是对多个视图同时进行变换操作。 旋转 (rotate)、 平移 (translate)或 缩放 (scale)操作。

总结

以上就是ConstraintLayout常用的一些属性和控件,并且伴随着MotionLayout,做动画非常的强大。没用过的赶紧行动起来吧。

上一篇:NJU Static Program Analysis 03: Data Flow Analysis I


下一篇:如何通过云效Flow完成自动化构建—构建集群