ConstraintLayout概要

2020-07-03 10:22:35 浏览数 (1)

简介

约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。

在开发过程中经常能遇到一些复杂的UI，可能会出现布局嵌套过多的问题，嵌套得越多，设备绘制视图所需的时间和计算功耗也就越多。

ConstraintLayout减少层级从而提升渲染的时间。

还有一点就是ConstraintLayout可以按照比例约束控件位置和尺寸，能够更好地适配屏幕大小不同的机型。

使用

代码语言：javascript复制
implementation 'com.android.support.constraint:constraint-layout:1.1.3'

定位

相对定位

跟定位常见的约束

  • 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_constraintBaseline_toBaselineOf
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf

They all take a reference id to another widget, or the parent (which will reference the parent container, i.e. the ConstraintLayout):

代码语言：javascript复制
<Button android:id="@ id/buttonB" ...
        app:layout_constraintLeft_toLeftOf="parent" />

Baseline指的是文本基线，主要用于文本对齐

代码语言：javascript复制
<TextView
        android:id="@ id/TextView1"
        .../>

<TextView
        android:id="@ id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@ id/TextView1" 
        app:layout_constraintBaseline_toBaselineOf="@ id/TextView1"/>

角度定位

角度定位指的是可以用一个角度和一个距离来约束两个空间的中心。举个例子：

代码语言：javascript复制
<TextView
    android:id="@ id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<TextView
    android:id="@ id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintCircle="@ id/TextView1"
    app:layout_constraintCircleAngle="120"
    app:layout_constraintCircleRadius="150dp" />

上面例子中的TextView2用到了3个属性：

  • app:layout_constraintCircle=”@ id/TextView1”
  • app:layout_constraintCircleAngle=”120”（角度）
  • app:layout_constraintCircleRadius=”150dp”（距离）

指的是TextView2的中心在TextView1的中心(垂直方向顺时针)的120度，距离为150dp

两个组件居中对齐就可以设置90度角度来实现

goneMargin

goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值，属性如下：

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

也就是说组件在gone时，margin才生效

居中

在RelativeLayout中，把控件放在布局中间的方法是把layout_centerInParent设为true，而在ConstraintLayout中的写法是：

代码语言：javascript复制
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

可以这样理解

所有的约束都是橡皮筋，上下左右都有橡皮筋的时候就居中了。

偏移

使用layout_marginLeft="100dp"向右偏移了100dp。

除了这种偏移外，ConstraintLayout还提供了另外一种偏移的属性：

  • layout_constraintHorizontal_bias 水平偏移
  • layout_constraintVertical_bias 垂直偏移

说明

layout_constraintHorizontal_bias赋一个范围为 0-1 的值 假如赋值为0，则TextView1在布局的最左侧 假如赋值为1，则TextView1在布局的最右侧 假如假如赋值为0.5，则水平居中，假如假如赋值为0.3，则更倾向于左侧 垂直偏移同理。

尺寸约束

控件的尺寸可以通过四种不同方式指定：

  • 使用指定的尺寸
  • 使用wrap_content，让控件自己计算大小 当控件的高度或宽度为wrap_content时，可以使用下列属性来控制最大、最小的高度或宽度：
    • android:minWidth 最小的宽度
    • android:minHeight 最小的高度
    • android:maxWidth 最大的宽度
    • android:maxHeight 最大的高度

    注意！当ConstraintLayout为1.1版本以下时，使用这些属性需要加上强制约束，如下所示：

    • app:constrainedWidth=”true”
    • app:constrainedHeight=”true”
  • 使用 0dp (MATCH_CONSTRAINT) 官方不推荐在ConstraintLayout中使用match_parent，可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent
  • 宽高比 当宽或高至少有一个尺寸被设置为0dp时，可以通过属性layout_constraintDimensionRatio设置宽高比

宽设置为0dp，宽高比设置为1:1，这个时候TextView1是一个正方形

除此之外，在设置宽高比的值的时候，还可以在前面加W或H，分别指定宽度或高度限制。 例如：

  • app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
  • app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

链

链间距

比如代码

代码语言：javascript复制
<TextView
    android:id="@ id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@ id/TextView2" />

<TextView
    android:id="@ id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@ id/TextView1"
    app:layout_constraintRight_toLeftOf="@ id/TextView3"
    app:layout_constraintRight_toRightOf="parent" />

<TextView
    android:id="@ id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@ id/TextView2"
    app:layout_constraintRight_toRightOf="parent" />

一条链的第一个控件是这条链的链头，我们可以在链头中设置 layout_constraintHorizontal_chainStyle来改变整条链的样式。

chains提供了3种样式，分别是：

  • CHAIN_SPREAD —— 展开元素 (默认)；
  • CHAIN_SPREAD_INSIDE —— 展开元素，但链的两端贴近parent；
  • CHAIN_PACKED —— 链的元素将被打包在一起。

权重链

除了样式链外，还可以创建一个权重链。 可以留意到上面所用到的3个TextView宽度都为wrap_content，如果我们把宽度都设为0dp，这个时候可以在每个TextView中设置横向权重layout_constraintHorizontal_weight(constraintVertical为纵向)来创建一个权重链，

如下所示：

代码语言：javascript复制
<TextView
    android:id="@ id/TextView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@ id/TextView2"
    app:layout_constraintHorizontal_weight="2" />

<TextView
    android:id="@ id/TextView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@ id/TextView1"
    app:layout_constraintRight_toLeftOf="@ id/TextView3"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="3" />

<TextView
    android:id="@ id/TextView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@ id/TextView2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="4" />

说明

这和LinearLayout的权重类似

辅助工具

Optimizer

当我们使用 MATCH_CONSTRAINT 时，ConstraintLayout 将对控件进行 2 次测量，ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化，可设置的值有：

  • none：无优化
  • standard：仅优化直接约束和屏障约束（默认）
  • direct：优化直接约束
  • barrier：优化屏障约束
  • chain：优化链约束
  • dimensions：优化尺寸测量

Barrier

假设有3个控件ABC，C在AB的右边，但是AB的宽是不固定的，这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障

这个时候C只要约束在Barrier的右边就可以了

代码语言：javascript复制
<TextView
    android:id="@ id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<TextView
    android:id="@ id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@ id/TextView1" />

<android.support.constraint.Barrier
    android:id="@ id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:constraint_referenced_ids="TextView1,TextView2" />

<TextView
    android:id="@ id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@ id/barrier" />

app:barrierDirection为屏障所在的位置，可设置的值有：bottom、end、left、right、start、top app:constraint_referenced_ids为屏障引用的控件，可设置多个(用“,”隔开)

Group

Group可以把多个控件归为一组，方便隐藏或显示一组控件

代码语言：javascript复制
<TextView
    android:id="@ id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<TextView
    android:id="@ id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@ id/TextView1" />

<TextView
    android:id="@ id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/TextView2" />

<android.support.constraint.Group
    android:id="@ id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="invisible"
    app:constraint_referenced_ids="TextView1,TextView3" />

Placeholder

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置。举个例子：

代码语言：javascript复制
<android.support.constraint.Placeholder
    android:id="@ id/placeholder"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:content="@ id/textview"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@ id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#cccccc"
    android:padding="16dp"
    android:text="TextView"
    android:textColor="#000000"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content=”@ id/textview”，这时TextView会跑到屏幕的左上角。

Guideline

Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）。 Guildline的主要属性：

  • android:orientation 垂直vertical，水平horizontal
  • layout_constraintGuide_begin 开始位置
  • layout_constraintGuide_end 结束位置
  • layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)

举个例子：

代码语言：javascript复制
<android.support.constraint.Guideline
    android:id="@ id/guideline1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="50dp" />

<android.support.constraint.Guideline
    android:id="@ id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

guideline1为水平辅助线，开始位置是距离顶部50dp，guideline2位垂直辅助线，开始位置为屏幕宽的0.5(中点位置)，效果如下：

编程算法 textview android css

0 人点赞