ConstraintLayout使用详解

2019-04-08 本文已影响0人星月下的青草

ConstraintLayout基本使用

Relative positioning

约束：view 在垂直方向，或在水平方向，相对于其他view 的关系(相互的)

在这里插入图片描述

Centering and Margins

Margins(偏移)

在有约束的情况下才能有效果
效果：

在这里插入图片描述

示例：

<View
        android:id="@+id/test"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


<View
        android:id="@+id/test1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toRightOf="@+id/test"
        android:layout_marginStart="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

margin with gone

当与之相关联的view状态为GONE时如果需要可以使用一下属性设置margin

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

效果：

在这里插入图片描述

居中

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

在这里插入图片描述

垂直居中类似

偏移占比 (Bias)

调整view 位置，不仅可以使用居中，margin 等，还可以使用百分比：

layout_constraintHorizontal_bias  
layout_constraintVertical_bias

上面两个属性取值范围 [0,1] 0 : 最左或最上， 1：最右或最下

偷个例子：

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

在这里插入图片描述

Chains

Creating a chain

<View
        android:id="@+id/test"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/test1"
        app:layout_constraintBottom_toBottomOf="parent"/>


<View
        android:id="@+id/test1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toRightOf="@+id/test"
        android:layout_marginStart="10dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

类似效果：

在这里插入图片描述

Chain Style

在链的第一个元素上设置属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle时，链的行为将根据指定的样式更改（默认为spread）
spread : 所有元素分布开
packed ：所有元素在一起
spread_inside : （同spread ）首尾元素除外

在这里插入图片描述

Chain heads

Chain heads 指chain中水平最左，垂直最上的view

Chain margin

上面可以看出，chain 中的左中右的间距都是相同的（平分剩下的空间），当chain 中的view 设置margin 的时候会把除去margin 后剩余空间平分分配。
效果：

在这里插入图片描述

weightd chain

链的默认行为是在可用空间中平均分布元素。如果一个或多个元素使用MATCH_CONSTRAINT，它们将使用可用的空白空间（在它们之间平均分配）。layout_constraintHorizontal_weight和layout_constraintVertical_weight属性将控制如何使用MATCH_CONSTRAINT在元素之间分配空间。例如，在使用MATCH_CONSTRAINT的包含两个元素的链上，第一个元素使用权重2，第二个元素使用权重1，第一个元素占用的空间将是第二个元素占用的空间的两倍。

例如

<View
        android:id="@+id/button1"
        android:layout_width="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_height="100dp"/>

<View
        android:id="@+id/button2"
        android:layout_width="0dp"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@color/colorAccent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_height="100dp"/>

Circular positioning (Added in 1.1)

您可以以角度和距离约束控件中心相对于另一个控件的中心。这使你可以将控件放在圆上。
可以使用以下属性：

layout_constraintCircle : 另一个控件的ID  
layout_constraintCircleRadius : 相对另一控件中心的距离
layout_constraintCircleAngle : 位于另一控件的角度位置

示例

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

在这里插入图片描述
Note: 0度角为正上方，向右为增大方向，如果设置为负数（-90 会按照绝对值来计算）

Dimensions constraints（尺寸限制）

ConstraintLayout 自身的尺寸约束

最大最小宽高设置

android:minWidth 
android:minHeight 
android:maxWidth 
android:maxHeight

设置方式类似其他布局只有在其尺寸设置为WRAP_CONTENT作用

控件的尺寸约束

固定尺寸（123dp）

WRAP_CONTENT
0dp(MATCH_CONSTRAINT) 相当于MATCH_PARENT

**Note **：不建议对ConstraintLayout中包含的小部件使用MATCH_PARENT。可以通过使用MATCH_CONSTRAINT来定义类似的行为，其中相应的左/右或上/下约束被设置为"parent"。 ** (即：约束边作为其大小) **

WRAP_CONTENT

enforcing constraints（强制约束）

一般情况下使用WRAP_CONTENT ，表示在可用剩余空间下任意大小
如果想要在使用WRAP_CONTENT的时候限制一个大小范围使用一下方式：

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”

再配合最大最小的最大最小宽度去设置：

layout_constraintWidth_min 
layout_constraintHeight_min  
layout_constraintWidth_max
layout_constraintHeight_max

MATCH_CONSTRAINT

Percent dimension（百分比尺寸设置）

要使用百分比，您需要设置以下内容：

尺寸应设置为MATCH_CONSTRAINT（0dp）
默认值应设置为app app：layout_constraintWidth_default =“percent”或app：layout_constraintHeight_default =“percent”
然后将layout_constraintWidth_percent或layout_constraintHeight_percent属性设置为0到1之间的值

比率 Ratio

可以将控件的一个维度定义为另一个维度的比率。
需要将至少一个约束维度设置为0dp（即MATCH_CONSTRAINT），并将属性layout_constraintDimensionRatio设置为给定比率。
例如：

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

另一种表示方式：

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

浮点值，表示宽度和高度之间的比率

如果两个尺寸都设置为MATCH_CONSTRAINT（0dp），也可以使用比率。
在这种情况下，系统设置最大尺寸以满足所有约束并保持指定的纵横比。要根据另一个的尺寸约束一个特定边，可以预先附加W，“或H，分别约束宽度或高度。

例如，如果一个维度受两个目标约束（例如，宽度为0dp并且以父对象为中心）你可以通过在比率前添加字母W（用于约束宽度）或H（用于约束高度）来指示哪一边应该被约束，用逗号分隔：

<Button android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

Virtual Helper objects

GuildeLine

作用：辅助布局

设置guildeLine 方向

**通过 orientation的属性设置水平或者垂直 **
水平guildeLine 高度为0 宽度为parent
垂直guildeLine 宽度为0 高度为 parent
eg:

<android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="horizontal"/>

确定guildeLine 位置

三种方式：

layout_constraintGuide_begin
layout_constraintGuide_end
layout_constraintGuide_percent [0,1]

Barrier

屏障

使用场景

参考博客

Placeholder

顾名思义：就是占位图

使用示例

<android.support.constraint.Placeholder
    android:id="@+id/imageHolder"
    android:layout_width="100dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_height="100dp"/>

<ImageView
    android:id="@+id/image"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_width="100dp"
    android:src="@mipmap/ic_launcher"
    android:layout_height="100dp"/>

image.setOnClickListener { 
    imageHolder.setContentId(R.id.image)
}

Group

作用：主要用来控制一组控件的可见性。

示例

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
            android:id="@+id/buttonA"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_width="wrap_content"
            android:text="buttonA"
            android:layout_height="wrap_content"/>

    <Button
            android:id="@+id/buttonB"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_width="wrap_content"
            android:text="buttonB"
            android:layout_height="wrap_content"/>


    <android.support.constraint.Group
            android:id="@+id/group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            app:constraint_referenced_ids="buttonA,buttonB"/>

</android.support.constraint.ConstraintLayout>

Group 的可见性对应着与其关联的几个控件，方便的显示隐藏多个控件。

注意：ConstraintLayout可用作支持库，可以在API级别9（Gingerbread）的Android系统上使用

ConstraintLayout使用详解

ConstraintLayout基本使用

Relative positioning

约束：view 在垂直方向，或在水平方向，相对于其他view 的关系(相互的)

相关属性

示例：

Centering and Margins

Margins(偏移)

margin with gone

居中

偏移占比 (Bias)

Chains

Chain Style

Chain heads

Chain margin

weightd chain

Circular positioning (Added in 1.1)

示例

Dimensions constraints（尺寸限制）

ConstraintLayout 自身的尺寸约束

控件的尺寸约束

固定尺寸（123dp）

WRAP_CONTENT

MATCH_CONSTRAINT

Virtual Helper objects

GuildeLine

设置guildeLine 方向

确定guildeLine 位置

Barrier

使用场景

Placeholder

使用示例

Group

示例

猜你喜欢

热点阅读

ConstraintLayout使用详解

ConstraintLayout基本使用

Relative positioning

约束 ：view 在垂直方向 ，或在水平方向，相对于其他view 的关系(相互的)

相关属性

示例 ：

Centering and Margins

Margins(偏移)

margin with gone

居中

偏移占比 (Bias)

Chains

Chain Style

Chain heads

Chain margin

weightd chain

Circular positioning (Added in 1.1)

示例

Dimensions constraints（尺寸限制）

ConstraintLayout 自身的尺寸约束

控件的尺寸约束

固定尺寸 （123dp）

WRAP_CONTENT

MATCH_CONSTRAINT

Virtual Helper objects

GuildeLine

设置guildeLine 方向

确定guildeLine 位置

Barrier

使用场景

Placeholder

使用示例

Group

示例

猜你喜欢

热点阅读

约束：view 在垂直方向，或在水平方向，相对于其他view 的关系(相互的)

示例：

固定尺寸（123dp）