ConstraintLayout2.0的使用

最新推荐文章于 2023-01-09 16:36:37 发布

Mr_Tony

最新推荐文章于 2023-01-09 16:36:37 发布

阅读量898

点赞数

分类专栏： JetPack 文章标签： android

本文链接：https://blog.csdn.net/Mr_Tony/article/details/125133580

版权

JetPack 专栏收录该内容

85 篇文章 35 订阅

订阅专栏

文章目录

一、前言
二、ImageFilterButton、ImageFilterView
三、Layer
四、Flow
五、参考链接

一、前言

ConstraintLayout除了之前的一些约束布局的特性以及、Group之外记录一些新版本的特性

二、ImageFilterButton、ImageFilterView

ImageFilterView、ImageFilterButton分别对应ImageView、ImageViewButton。主要用来处理圆角、色差、放大缩小的特性。这里只列举ImageViewFilterView的使用方式，ImageFilterButton的使用方式差不多。参考代码如下:

  <androidx.constraintlayout.utils.widget.ImageFilterButton
        android:id="@+id/btnImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/img"
        app:imageRotate="90"
        app:imageZoom="1.5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:roundPercent="0.5"
        app:round="10dp"/>

各个属性的含义如下(该内容引用自圆角控件之ImageFilterView详解):

圆角大小app:round：取值0-size/2之间，超过就没什么意义了，默认0，就是方形；对于正方形来说，取值size/2就是圆形, 圆角是针对View的, 将View绘制成圆角.
圆角比例app:roundPercent：取值0-1之间，超过1就没什么意义了，默认0就是方形，1是圆形图片。和app:round意思一样，只不过一个是具体的大小，一个是百分比。
缩放app:imageZoom：放大或缩小图片大小，比如：2表示图片放大到原来的2倍，0.5表示图片缩小到原来的一半。View的大小不变，只是显示的图片缩放了。
旋转app:imageRotate：旋转图片的角度，比如90，表示图片旋转90度。View的角度和大小是不变的。
交叉图app:altSrc：需要跟app:crossfade共同使用，app:crossfade取值0-1,默认0为交叉图完全透明，不展示。取值1交叉图完全展示，覆盖到src上。
饱和度app:saturation：float型，默认1，取值0为灰阶样式，大于1的数值都是超饱和状态，色彩非常艳丽，有点辣眼睛。
亮度app:brightness：float型，默认1，值越大亮度越高。
色温app:warmth：float型，默认值1，小于1是冷色调，大于1是暖色调。
对比度app:contrast：float型，默认1，取值0相当于图片变全黑，大于1都是高对比度状态。
app:overlay，官方释义：定义alt图像是在原始图像的顶部淡入，还是与其交叉淡入。默认值为true。对于半透明对象设置为false。

三、Layer

有时候我们对一些批量的控件进行显示隐藏的话可以使用 Group，但是该控件无法渲然颜色，使用Layer可以对一些控件进行渲染公共的颜色。以下是具体的代码示例:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ConstraintLayout2Activity">

    <androidx.constraintlayout.helper.widget.Layer
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#fe3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:constraint_referenced_ids="tv1,tv2"/>

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tv1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="50dp"
        android:layout_marginStart="50dp"/>

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tv2"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="50dp"
        android:layout_marginStart="50dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

可选属性有以下操作(该内容引用自 # Constraintlayout 新特性：Barrier、Group、Layer、Flow、ImageFilterView等):

 设置背景色
 支持elevation属性
 设置可见性
 支持补间动画（alpha 是layer1动，scale,rotation,transaction是其中的每个控件同时动）
 多个图层同时包含同一个控件
 图层本身支持事
 支持padding、不支持margin、不支持大小

四、Flow

Flow是一个流式布局，跟ChipGroup、Chip有点类似。可以制作不规则的布局。也跟前端中的Flex布局有点类似。有以下可选属性:

app:constraint_referenced_ids 指定引用的控件id或其它Flow 的id等，也可以通过tag引用.
- 被引用的控件原来的方位约束会失效
- 按引用的顺序排列
app:flow_wrapMode指定控件排列时自适应方式，不同方式可用的配套属性也不一样。
- none : 简单地把constraint_referenced_ids里面的元素组成chain,即使空间不够
- chain : 根据空间的大小和元素的大小组成一条或者多条 chain
- aligned : chain类似，但是会对齐
android:orientation 指定Flow的方向
Gap展示了Flow中每个元素直接的间隔，这个间隔包含horizontalGap和verticalGap两种，你可以在原有Chain Style的基础上进行额外设置
- app:flow_horizontalGap="30dp" 水平间隔
- app:flow_verticalGap="30dp" 垂直间隔
  以下内容参考(ConstraintLayout2.0进阶之路-欢迎新同学)

Style:当wrapMode设置为ALIGNED或CHAIN时，根据Flow的orientation，可以设置相应的flow_verticalStyle和flow_horizontalStyle，此时，这个Style与Chains中的Style枚举一样，可以设置spread、spread_inside和packed，效果也和Chains的效果一样。
+ flow_firstHorizontalStyle：约束第一条水平链，当有多条链（多行）时，只约束第一条链（第一行），其他链（其他行）不约束
+ flow_lastHorizontalStyle：约束最后一条水平链，当有多条链（多行）时，只约束最后一条链（最后一行），其他链（其他行）不约束
+ flow_horizontalStyle：约束所有水平链
+ flow_firstVerticalStyle：同水平约束
+ flow_lastVerticalStyle：同水平约束
+ flow_verticalStyle：约束所有垂直链

Bias: 当Style设置为Packed时，可以通过Bias来设置位移的权重，这个效果与Chains的效果也是一样的。

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent" //这里注意不要使用wrap_content，否则没有空余空间
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:constraint_referenced_ids="tv1,tv2,tv3,tv4"
        app:flow_horizontalStyle="packed"
        app:flow_horizontalBias="0.2"，表示左侧空余空间占20%，右侧占80%
        app:layout_constraintTop_toTopOf="parent" />

app:flow_horizontalBias
app:flow_verticalBias
app:flow_firstHorizontalBias
app:flow_firstVerticalBias
app:flow_lastHorizontalBias
app:flow_lastVerticalBias

Alignment:这里的Alignment指的是Flow方向的法向方向的对齐方式，如果指定Flow的方向，是不会生效的，例如Flow的orientation是vertical，那么设置flow_horizontalAlign才会生效。
- flow_verticalAlign 垂直方向对齐,取值有：top、bottom、center、baseline;
- flow_horizontalAlign 水平方向对齐,取值有：start、end、center;
- 对齐方向一般与链的方向相反才可生效，例如垂直链样式，一般对齐View的左右边和中间。
maxElementsWrap:表示当前方向上最大的元素数量，这个属性在固定行或固定列数量的时候，是非常有用的。