关于ConstraintLayout 2.0新增的属性

constraintlayout2.0

ConstraintLayout2.0新增了一个helper类, 里面为我们定义了两个便于开发的类, Flow和Layer, 怀着激动的心情,来看看吧~

Flow (VirtualLayout)

某个开发需求的UI样式

解释: 开发过程中,我们最碰到的可能是这种UI样式, 在个人中心或者哪儿, 要摆上这么多个icon,文字等, 传统的写法, 用Relative, 或者Linear都会嵌套, 复制很多无脑的代码, 在2.0中,我们使用一个简单的view就可以一步搞定, 再也不用想着怎么摆放的相互布局啦

上代码:

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

    <android.support.constraint.helper.Flow
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:flow_wrapMode="aligned"
            android:padding="20.0dp"
            android:layout_width="0dp"
            app:flow_verticalGap="20.0dp"
            app:flow_horizontalGap="20.0dp"
            app:constraint_referenced_ids="tv1,tv2,tv3,tv4,tv5"
            android:layout_height="wrap_content"/>


    <TextView
            android:id="@+id/tv1"
            android:text="Hello World!"
            style="@style/text_stytle"/>

    <TextView
            android:id="@+id/tv4"
            android:text="Hello World!"
            style="@style/text_stytle"/>
    <TextView
            android:id="@+id/tv2"
            android:text="Hello World!"
            style="@style/text_stytle"/>

    <TextView
            android:id="@+id/tv3"
            android:text="Hello World!"
            style="@style/text_stytle"/>
    <TextView
            android:id="@+id/tv5"
            android:text="Hello World!"
            style="@style/text_stytle"/>


</android.support.constraint.ConstraintLayout>

写出来的效果

image.png

关键的一个属性: app:flow_wrapMode
有三个值, 分别是none, aligned,chain

none:把app:constraint_referenced_ids组成一天链式, 一直向后排序, 元素比较少,界面较为简单时可以使用

none

aligned: 以对齐的方式, 自动折行排序, 上面代码就是使用的这种方式

aligned

chain: 自动折行, 但是不会对齐

chain

优势:

1. 减少布局的嵌套, flow和排序的view是在统一层级view, 不需要嵌套分分搞定
2. 减少了排列view之间布局的相互位置依赖关系, 可以随意变换位置, 只需要更改app:constraint_referenced_ids中的顺序即可
3. 设置padding, 背景等, 和viewgroup具有相同的属性功能

补充: 近期发现一个问题, 当元素的宽度不是固定大小时, wrap_content的情况下, 不管是使用哪种方式,元素之间的间隔无法做到相同, 所以感觉这个属性只有在固定宽度时使用较佳

未完待续 ~~~~