ConstraintLayout核心用法详解（四）：ConstraintSet、MotionLayout与Flow

整理旧电脑上的一些笔记前言ConstraintLayout 核心用法详解一相对定位、边距、偏移与环形定位ConstraintLayout核心用法详解二尺寸约束与链约束ConstraintLayout核心用法详解三引导线、屏障、组和占位今天继续整理ConstraintLayout。ConstraintLayout的特点扁平布局无嵌套一个层级就可以绘制复杂布局渲染性能高集合了线性布局、相对布局、百分比布局的特点和大多数功能支持可视化环境下拖拽绘制约束布局轻松地为应用中使用的 UI 组件添加动画效果。1.ConstraintSet在之前对ConstraintLayout的介绍中我们都是在XML中使用ConstraintLayout但某些时候我们需要动态的创建布局LinearLayout或RelativeLayout等布局中我们会采用LayoutParams的方式来动态创建。但在ConstraintLayout布局中这种时候就需要使用ConstraintSet。ConstraintSet为ConstraintLayout定义了一系列的约束。我们可以使用ConstraintSet来创建并保存约束条件然后将它应用到已经存在的ConstraintLayout上。ConstraintSet支持3种方式创建手动创建c new ConstraintSet(); c.connect(…)从 R.layout.xxx 对象创建c.clone(context,R.layout.xxx)从一个 ConstraintLayout 创建c.clone(mConstraintLayout)。ConstraintSet关键方法介绍clone(layout)复制已有的 ConstraintLayout 约束信息connect(startId,startSide,endId,endSide)在两个控件间建立约束(包括 PARENT);constrainWidth(viewId,width)设置View的宽度(支持 dimension、MATCH_CONSTRAINT、WRAP_CONTENT)constrainHeight(viewId,height)设置View的高度(支持 dimension、MATCH_CONSTRAINT、WRAP_CONTENT)applyTo(constraintLayout)将约束应用到 ConstraintLayout。代码示例vallayoutConstraintLayout(this)valtv1TextView(this)tv1.textHellotv1.idView.generateViewId()valtv2TextView(this)tv2.textConstraintSettv2.idView.generateViewId()valconstraintSetConstraintSet()layout.addView(tv1)layout.addView(tv2)constraintSet.clone(layout)//创建约束constraintSet.connect(tv1.id,ConstraintSet.TOP,ConstraintSet.PARENT_ID,ConstraintSet.TOP)constraintSet.connect(tv2.id,ConstraintSet.TOP,ConstraintSet.PARENT_ID,ConstraintSet.TOP)constraintSet.connect(tv1.id,ConstraintSet.START,ConstraintSet.PARENT_ID,ConstraintSet.START)constraintSet.connect(tv2.id,ConstraintSet.START,tv1.id,ConstraintSet.END,20)//tv1设置宽度和高度constraintSet.constrainWidth(tv1.id,ConstraintSet.WRAP_CONTENT)constraintSet.constrainHeight(tv1.id,ConstraintSet.WRAP_CONTENT)//tv2设置宽度和高度constraintSet.constrainWidth(tv2.id,ConstraintSet.WRAP_CONTENT)constraintSet.constrainHeight(tv2.id,ConstraintSet.WRAP_CONTENT)constraintSet.applyTo(layout)setContentView(layout)效果截图2.MotionLayout2018年的 Google I/O 大会上 ConstraintLayout 2.0首次公开亮相2.0官方提供了许多新特性MotionLayout就是其中的核心之一。既然已经有了强大的ConstraintLayoutAndroid为何又要引入MotionLayout布局MotionLayout被用来解决什么问题MotionLayout不是为了取代任何布局它是为了补充 Android 开发过程中一个长期被诟病的问题创建复杂且流畅的动画和视图移动。在过去的 Android 复杂动画实现方式中主要是ValueAnimator或ObjectAnimator这类属性动画想要实现复杂动画需要写很多代码而且动画代码逻辑分散不利于维护。想要实现动画手势交互更是需要手动计算位移和速度十分繁琐易出错。而现在移动端一个明显的趋势就是更加注重“用户体验”在功能趋同的时代良好用户体验成为了关键的差异化因素。高性能的硬件支撑、用户追求的直觉式和沉浸式、iOS的珠玉在前…一切的一切都迫使 Android 必须提供能简单方便写出复杂动画的控件给开发者使用。MotionLayout也就由此而来了。MotionLayout 继承自 ConstraintLayout它提供管理运动和控件动画的特性可以用于实现复杂、可交互的动画。MotionLayout的知识点很多下面我们先简单来入门使用下MotionLayout添加依赖//groovyimplementationandroidx.constraintlayout:constraintlayout:2.2.1//Kotlinimplementation(androidx.constraintlayout:constraintlayout:2.2.1)将MotionLayout作为XML布局的根目录MotionLayout作为XML如 activity_main.xml的根布局并定义宽高属性、ID和layoutDescription。?xml version1.0 encodingutf-8?androidx.constraintlayout.motion.widget.MotionLayoutxmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:idid/motion_layoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:layoutDescriptionxml/scene_01/androidx.constraintlayout.motion.widget.MotionLayout布局写好后我们来了解app:layoutDescription属性干嘛的app:layoutDescription属性引用了MotionScene(运动场景文件)MotionScene会包含一个或多个 元素每个元素定义了运动序列的开始和结束状态、两者之间的过渡。为了将布局和动画分开每个MotionLayout都会单独引用一个MotionScene。创建scene_01.xml可以直接在activity_main.xml的根布局MotionLayout里面直接写app:layoutDescription“xml/scene_01”然后借助AS编辑器的代码提示来直接创建 XML 资源文件。也可以点击app-res(右键)-New-Android Resource Directory在弹出的对话框中 Resource type下拉选择 xml。scene_01位置在app/res/xml目录下下面是官网示例中的scene_01.xml内容?xml version1.0 encodingutf-8?MotionScenexmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:motionhttp://schemas.android.com/apk/res-autoTransitionmotion:constraintSetStartid/startmotion:constraintSetEndid/endmotion:duration1000OnSwipemotion:touchAnchorIdid/buttonmotion:touchAnchorSiderightmotion:dragDirectiondragRight//TransitionConstraintSetandroid:idid/startConstraintandroid:idid/buttonandroid:layout_width64dpandroid:layout_height64dpandroid:layout_marginStart8dpmotion:layout_constraintBottom_toBottomOfparentmotion:layout_constraintStart_toStartOfparentmotion:layout_constraintTop_toTopOfparent//ConstraintSetConstraintSetandroid:idid/endConstraintandroid:idid/buttonandroid:layout_width64dpandroid:layout_height64dpandroid:layout_marginEnd8dpmotion:layout_constraintBottom_toBottomOfparentmotion:layout_constraintEnd_toEndOfparentmotion:layout_constraintTop_toTopOfparent//ConstraintSet/MotionScene上面的MotionScene示例描述了一个水平运动。包含运动的基本定义motion:constraintSetStart运动的开始端值为下面中定义的motion:constraintSetEnd运动的结束端值为下面中定义的motion:duration完成动作所需要的时间(毫秒)为动作创建触控控件motion:touchAnchorId定义用户可以滑动和拖动的视图motion:touchAnchorSide表示视图正在从右侧拖动motion:dragDirection表示拖动的进度方向定义运动的各种限制条件的位置。如上面示例中开始和结束都使用了motion:layout_constraintBottom_toBottomOfparent和motion:layout_constraintTop_toTopOf“parent” 实现垂直居中。运行效果由于篇幅限制本篇不会再介绍更多MotionLayout的内容有兴趣的可以去官网示例中先学习后续也会继续发布一些个人对MotionLayout使用内容。3.Flow同样是 ConstraintLayout 2.0官方提供了另一个重要新特性FlowVirtual Layout。Flow同Guideline、Group一样都是作为虚拟布局助手来使用的它可以高效、灵活的实现链式排列如LinearLayout、GridLayout能够自动换行和根据约束条件动态调整 child view 位置。先来介绍一下Flow相关属性app:flow_wrapMode“none|chain|aligned”none-不换行默认,chain-链式换行aligned-对齐换行app:flow_horizontalGap“dimension”设置视图之间的水平间距app:flow_verticalGap“dimension”设置视图之间的垂直间距app:flow_horizontalStyle“spread|spread_inside|packed”定义链的样式app:flow_maxElementsWrap“”强制指定每行最多放置多少个元素app:constraint_referenced_ids“id1,id2,id3…”Flow管理和排列的viewId代码示例?xml version1.0 encodingutf-8?androidx.constraintlayout.widget.ConstraintLayoutxmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:idid/mainandroid:layout_widthmatch_parentandroid:layout_heightmatch_parenttools:context.ui.constraintlayout.FlowActivityTextViewandroid:idid/tv_sportandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text体育app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_cookieandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text美食app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_cameraandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text摄影app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_newsandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text新闻app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_comicandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text漫画app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_showsandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text综艺app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_wallpaperandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text壁纸app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_digitalandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text数码app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_gameandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text游戏app:drawableStartCompatdrawable/ic_tags/TextViewandroid:idid/tv_petandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:gravitycenter_verticalandroid:text宠物app:drawableStartCompatdrawable/ic_tags/androidx.constraintlayout.helper.widget.Flowandroid:layout_width0dpandroid:layout_heightwrap_contentapp:constraint_referenced_idstv_sport,tv_cookie,tv_camera,tv_news,tv_comic,tv_shows,tv_wallpaper,tv_digital,tv_game,tv_petapp:flow_horizontalGap10dpapp:flow_horizontalStylespreadapp:flow_verticalGap20dpapp:flow_wrapModechainapp:layout_constraintEnd_toEndOfparentapp:layout_constraintStart_toStartOfparentapp:layout_constraintTop_toTopOfparent//androidx.constraintlayout.widget.ConstraintLayout效果图4. 参考资料Developer-ConstraintSethttps://developer.android.google.cn/reference/androidx/constraintlayout/widget/ConstraintSetDeveloper-ConstraintLayouthttps://developer.android.google.cn/reference/androidx/constraintlayout/widget/ConstraintLayoutConstraintLayout历史版本https://developer.android.google.cn/jetpack/androidx/releases/constraintlayout?hlzh_cnMotionLayouthttps://developer.android.google.cn/develop/ui/views/animations/motionlayoutMotionLayot Examplehttps://developer.android.google.cn/develop/ui/views/animations/motionlayout/examplesFlowhttps://developer.android.google.cn/reference/androidx/constraintlayout/core/widgets/Flow?hlen