转自：Constraint Layout 2.0 several new features-2
Constraint Layout Practice and Summary-1
Constraint Layout 2.0 several new features-2
Flow
Flow是虚拟布局(virtual layout，因此不会将级别添加到布局层次结构中)。类似于一个链，可以快速的横向或纵向布局constraint_referenced_ids里面所有的elements，通过flow_wrapMode可以指定三种展示方式。
- wrap none: 简单的创建一个链，所有引用的视图以一条链的方式进行布局，如果内容溢出则溢出内容不可见。
- wrap chain: 根据空间的大小创建一个或多个链，当出现溢出时，溢出的内容会自动换行，以新的一条链的方式进行布局。
- wrap aligned: 与wrap chain相似，列的元素会对齐。
// 省略width、height、textColor等代码
三种展示方式的效果(图片来自网络)：
4.gif
还可以配合其他属性进行不同需求的展示：
- flow_horizontalStyle = "spread|spread_inside|packed"
- flow_verticalStyle = "spread|spread_inside|packed"
- flow_horizontalBias = "float"
- flow_verticalBias = "float"
- flow_horizontalGap = "dimension"
- flow_verticalGap = "dimension"
- flow_horizontalAlign = "start|end"
- flow_verticalAlign = "top|bottom|center|baseline
Layer
作为一种新的辅助工具，可以让您在多个视图上创建一个虚拟的图层。同Flow不同，它并不会对视图进行布局，而是对多个视图同时进行变换(transformation)操作，比如多个视图整体进行旋转(rotate)、平移(translate)或缩放(scale)操作，Layer 将会是最佳的选择。
// 部分代码省略
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_layer)
layerDemo()
}
/**
* 执行layer区域动画
*/
private fun layerDemo() {
val layer = findViewById(R.id.layer)
val valueAnimator = ValueAnimator.ofFloat(0f, 60f, -30f, 0f, -20f, 0f, -8f, 0f)
valueAnimator.addUpdateListener(AnimatorUpdateListener { animation ->
if (null == animation.animatedValue) {
return@AnimatorUpdateListener
}
val animatedValue = animation.animatedValue.toString().toFloat()
layer.translationX = animatedValue
})
valueAnimator.duration = 800
valueAnimator.start()
}
执行效果如下，所有控件类似snack移动效果。
6.png
ConstraintHelper
Flow和Layer均继承自ConstraintHelper，类属于辅助工具类，而且可以自定义实现。
1、ConstraintHelper持有view的引用，所以可以获取views(getViews)对其进行操作，提供了·onLayout·前后的回调(updatePreLayout)。
以下是对view作出CircularReveal的效果，ViewAnimationUtils给我们提供了createCircularReveal这个函数，
class CircularAnimationHelper @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : ConstraintHelper(context, attrs, defStyleAttr) {
// updatePostLayout会在onLayout之后调用,在这里做动画
override fun updatePostLayout(container: ConstraintLayout) {
super.updatePostLayout(container)
val views = getViews(container)
views.forEach {
// 计算出中心点centerX,centerY和endRadius(半径)
val createCircularReveal = ViewAnimationUtils.createCircularReveal(it, it.width / 2,
it.height / 2, 0f,
hypot((it.height / 2).toDouble(), (it.width / 2).toDouble()).toFloat()
);
createCircularReveal.duration = 1000 + Random.nextLong(500) * Random.nextInt(5)
createCircularReveal.start()
}
}
}
2、CircularRevealHelper可以直接在xml里面使用,在constraint_referenced_ids里面指定需要做动画view。如果有其他view也有同样的需求则直接复用即可。
3、执行效果，由中心向四周扩散和飞入效果
5.gif
7.gif
ImageFilterView
An ImageView that can display, combine and filter images. Added in 2.0
Subclass of ImageView to handle various common filtering operations
一个可以显示，合并和过滤的图像，放在utils.widget目录中的一个View，继承自AppCompatImageView。
属性
| Attributes | Meaning |
|---|---|
| altSrc | 提供src图像的替代图像以允许淡入淡出 |
| saturation | 设置图像的饱和度。 0 =灰度，1 =原始，2 =超饱和 |
| brightness | 设置图像的亮度。 0 =黑色，1 =原始，2 =两倍的亮度 |
| warmth | 调整图像的表观色温。 1 =中性，2 =温暖，.5 =冷 |
| contrast | 设置对比度。 1 =不变，0 =灰色，2 =高对比度 |
| crossfade | 设置两个图像之间的当前混合。 0 = src 1 = altSrc图片 |
| round | 用于实现圆角，以 dimension 为值, call the TransitionListener with this trigger id |
| roundPercent | 用于实现圆角，取值在0f-1f之间，为1f时将形成一张圆形图片 |
| overlay | 定义替换图像是在原始图像上淡入淡出还是与其交叉淡入淡出。 默认为true。对于半透明对象设置为false |
布局中添加ImageFilterView，
// activity_image_filter.xml
通过seekbar来更改属性值演示效果。
class ImageFilterActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_image_filter)
val iv1: ImageFilterView = findViewById(R.id.iv_1)
// ...Omit code
val seekBar: SeekBar = findViewById(R.id.seekbar)
seekBar.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
if (fromUser) {
// 如果是用户行为触发的,才作相应操作。false为code执行。
val realProgress = (progress / 100.0).toFloat()
iv1.saturation = realProgress * 10
iv2.brightness = 1 - realProgress
iv3.warmth = realProgress * 20
iv4.contrast = realProgress * 2
iv5.round = realProgress * 100
iv6.roundPercent = realProgress
iv7.crossfade = realProgress
}
}
override fun onStartTrackingTouch(seekBar: SeekBar?) {
// TODO("not yet implemented")
}
override fun onStopTrackingTouch(seekBar: SeekBar?) {
}
})
}
执行效果
8.gif
输出是最好的输入方式！