1.普通用法

layout_constraintLeft_toLeftOf
第一个left: 代表是自身组件
第二个toLeft:代表对方组件
举例:app:layout_constraintLeft_toRightOf="@+id/b" 代表自身的左边依赖对方组件(b)的右边。以下控件同理。

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

1.1 layout_constraintBaseline_toBaselineOf 基线对齐

layout_constraintBaseline_toBaselineOf自身的基线和对方的基线对齐

1.2 margin 间距

注意:必须先添加约束布局的位置关联关系,margin才生效。

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

1.3 gonemargin

gonemargin 当该组件依赖一个隐藏的对象时,给它设置一个间距。
eg: 当b组件为gone时,居左边保持11dp,当b组件不显示,goneMarginLeft不生效。

   <TextView
        android:id="@+id/d"
        app:layout_constraintLeft_toRightOf="@+id/b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_goneMarginLeft="11dp"
        android:text="DDD"
        />

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

2.高级用法

2.1 居中定位

在RelativeLayout中,把控件放在布局中间的方法是把layout_centerInParent设为true,而在ConstraintLayout中的写法是:左右的关联关系都要设置。

<android.support.constraint.ConstraintLayout ...>
   <Button android:id="@+id/button" ...
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

2.2 bias 偏移

本来默认居中定位,左右间距各一半,50%,设置横向偏移为0.3,也就是左边偏移量为30%,所以view会相对中间的位置向左偏移20%,最终是左边间距为30%。

横向偏移:app:layout_constraintHorizontal_bias
竖向偏移:layout_constraintVertical_bias

<android.support.constraint.ConstraintLayout ...>
     <Button android:id="@+id/button" ...
            app:layout_constraintHorizontal_bias="0.3"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>
    </>

2.3 Circular positioning (Added in 1.1) 圆形定位

此处不好理解,借用官方图片
layout_constraintCircle : references another widget id 以Id为中心的圆,形成依赖关系
layout_constraintCircleRadius : the distance to the other widget center 半径
layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360) 度数

在这里插入图片描述
A组件是一个长方形组件,B组件位置是在以A中心半径为100dp画圆,且方向为45度,(注意这个度数是顺时针方向的)且B组件也是说的中心点。

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />
         

2.4 Minimum dimensions on ConstraintLayout·最小尺寸

android:minWidth set the minimum width for the layout
android:minHeight set the minimum height for the layout
android:maxWidth set the maximum width for the layout
android:maxHeight set the maximum height for the layout

2.5 布局尺寸 Widgets dimension constraints

组件尺寸有三种:
Using a specific dimension (either a literal value such as 123dp or a Dimension reference) 固定尺寸
Using WRAP_CONTENT, which will ask the widget to compute its own size 自身计算尺寸
Using 0dp, which is the equivalent of “MATCH_CONSTRAINT” 0dp代表充满

2.6 Ratio比例

设置view 的宽高为1:1

<Button android:layout_width="wrap_content"
      android:layout_height="0dp"
      app:layout_constraintDimensionRatio="1:1" />

2.7 Chains

A set of widgets are considered a chain if they are linked together via a bi-directional connection

如果多个组件通过双向连接链接在一起,则被视为链。

横向链接,竖向链接

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle 

Chain heads 链头
Chains are controlled by attributes set on the first element of the chain (the “head” of the chain):
链的控制在第一个元素里书写。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout  >
    <TextView
        app:layout_constraintHorizontal_chainStyle="packed"
  	... />

    <TextView
     
    <TextView
        />
</androidx.constraintlayout.widget.ConstraintLayout>

代码里面其实只有三种:
CHAIN_SPREAD – 元素之间的空间将会均匀分布,这是系统默认的排列方式
CHAIN_INSIDE – 首尾的两条链将不会分配空间,其余内部的链将均匀分配空间。
CHAIN_PACKED – 首尾两条链将会分配空间,链内部将不会分配空间

在这里插入图片描述

2.8 Margins and chains

当链里使用margin,默认链的剩余空间是不计算margin值的。

When using margins on elements in a chain, the margins are additive.

For example, on a horizontal chain, if one element defines a right margin of 10dp and the next element defines a left margin of 5dp, the resulting margin between those two elements is 15dp.

An item plus its margins are considered together when calculating leftover space used by chains to position items. The leftover space does not contain the margins.

2.9 Optimizer

当我们使用 MATCH_CONSTRAINT 时,ConstraintLayout 将对控件进行 2 次测量,ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化,可设置的值有:
none:无优化
standard:仅优化直接约束和屏障约束(默认)
direct:优化直接约束
barrier:优化屏障约束
chain:优化链约束
dimensions:优化尺寸测量

参考:https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#Chains

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐