ConstraintLayout的使用

最新推荐文章于 2024-05-05 10:04:46 发布

Fredlxy_007

最新推荐文章于 2024-05-05 10:04:46 发布

阅读量1.2k

点赞数

分类专栏： Android 文章标签： Constraint as 布局

本文链接：https://blog.csdn.net/Fredlxy_007/article/details/69267755

版权

Android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

ConstraintLayout是什么？

ConstraintLayout允许我们只需要一个View层级而无需嵌套多个view，就可以创建一个庞大而又复杂的布局，这和RelativeLayout有点像，里面的子View会根据它们之间的关系来排列。但ConstraintLayout相对于RelativeLayout会更加灵活，使用AS的布局编辑器时，ConstraintLayout会更简单。

使用AS的布局编辑器来新建ConstraintLayout布局效率是很高的，只需要轻松地拖拽控件就可以实现，我们无需去通过繁琐地编辑XML布局去实现一个ConstraintLayout布局。

何谓约束？

为了确认一个view在ConstraintLayout中的位置，你一定至少要给view添加一个横向或垂直的约束，每一个约束都代表着这个view相对于其它view、父布局、或者不可见的guideline之间的联系或者对其关系。每个约束定义了view沿着横轴和纵轴的位置，所以每个view都必须至少要有一个横轴或众轴的约束，但通常情况下会有多个约束。

使用环境
* Android SDK Version 2.3+ (API Version>= 9)
* Android Studio 2.3+

如何新建一个带有ConstraintLayout布局的项目？

依次点击 Tools > Android > SDK Manager.
点击SDK Tools
展开Support Repository ，选中ConstraintLayout for Android和 Solver for ConstraintLayout

图片.png

点击ok，让AS去下载相关jar包
build.gradle 配置

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.1'
}

ConstraintLayout各种布局约束介绍

Relative positioning（相对定位约束）

相对定位约束就是控件的边被其它控件的边约束，相对定位约束在ConstraintLayout很常见，可以约束view相对于其它view的位置，你可以这样在横轴和纵轴约束你的控件：

1. Horizontal Axis: Left, Right, Start and End sides
2. Vertical Axis: top, bottom sides and text baseline

举个例子，假如B相对于A，在其右边

图片.png

在ConstraintLayout中只需要添加以下代码就可以实现

<Button android:id="@+id/buttonA" ... />
         <Button android:id="@+id/buttonB" ...
                 app:layout_constraintLeft_toRightOf="@+id/buttonA" />

上面这段代码的意思就是告诉系统我们想让按钮B的左边被约束在按钮A的右边。

其它约束的列表如下：

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

这些约束不用刻意去记它，只要明白中间代表控件的约束类型，最后代表约束条件。拿layout_constraintLeft_toLeftOf 来举例，constraintLeft代表的横向轴上的左边约束类型，条件是在相对于某个控件在其左边。使用了layout_constraintLeft_toLeftOf 的控件，是告诉系统希望其左边相对于其它控件，在其左边。

Margins

用于设定有约束关系的两个控件之间的margin值

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

Margins when connected to a GONE widget

如果一个位置约束的目标控件的visiable为Gone，这种情况下，也可以给它设置margin属性值。

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

Centering positioning and bias

设置两个相反(相对)的约束，可以让控件居中显示。例如：同时给控件设置layout_constraintLeft_toLeftOf值为parent和layout_constraintRight_toRightOf的值为parent，那么该控件就水平居中显示了，竖直居中也同理也是可以实现的。

  <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button17"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

图片.png

Bias

设置两个相对的约束，可以让控件居中显示，也就是偏移50%水平或者垂直显示。但如果想让控件偏移30%显示该怎么办？通过下面的属性可以轻易完成：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

这两个属性的值设置的在0~1之间变化，如果想设置水平偏移30%，那么就设置layout_constraintHorizontal_bias 值为0.3，居中显示则为0.5

图片.png

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

注意：别忘记添加layout_constraintLeft_toLeftOf和layout_constraintRight_toRightOf这两个约束

Dimensions constraints

可以给ConstraintLayout设置一个最小的宽度和高度，但是只有当设置的最小值对应属性为“WRAP_CONTENT”时才会生效。

android:minWidth set the minimum width for the layout
android:minHeight set the minimum height for the layout

Widgets dimension constraints

给ConstraintLayout中的控件设置宽(android:layout_width)和高(android:layout_height)有以下三种方式可以实现：

设置固定的尺寸，比如123dp
WRAP_CONTENT 自适应尺寸
设置为0dp，想让控件填充父布局，设置android:layout_width = “0dp”就可以实现了，这和一般的控件就不太一样。

说明：ConstraintLayout不支持MATCH_PARENT属性，因为我们可以通过 设置两个相反的left/right 或 top/bottom约束实现。

图片.png

Ratio（比例）

我们还可以给控件的宽和高设置一个比例（ratdio）要达到这个效果，至少要把约束控件的宽或者高其中一个设置为0dp，然后再添加layout_constraintDimentionRatio属性设置（宽:高）的值。

   <Button
        android:text="A"
        android:layout_width="300dp"
        android:layout_height="0dp"
        android:id="@+id/button17"
        app:layout_constraintDimensionRatio="1:1"/>

这个布局中，Button的宽度 = 1 * 300dp = 300dp，而高度是自适应的。
ratdio的写法：

可以是一个float值，值为宽和高的比例表示的float值上面的那个比例可以用1来表示。
也可以直接设置比，例如 1:1

同时我们也可以同时设置控件的宽和高都为0dp，然后把ratio可以用”H/W,16:9”来表示，前面如果是H，那么16:9是高:宽；如果前面是W，那么16:9是宽和高的比例。

 <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"/>

chains

由多条约束首尾相连组成的一条横向或者竖直的约束链，其中首个元素称之为chain head。

图片.png

当我们给chain head设置layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle，整条链的状态将会发生改变。

CHAIN_SPREAD – 元素之间的空间将会均匀分布，这是系统默认的排列方式
CHAIN_SPREAD – 首尾的两条链将不会分配空间，其余内部的链将均匀分配空间。
CHAIN_PACKED – 首尾两条链将会分配空间，链内部将不会分配空间
Weight 通过设置的weight值来分配元素的宽或者高

图片.png

注意：

(1) layout_constraintHorizontal_chainStyle属性值是小写的，文档里给出的是大写的。

(2) weight样式的实现有一个前提，chainStyle必须为默认的spread样式

(3) 设置Weight样式时记得把元素中的宽或者设置成0dp

下面是layout_constraintHorizontal_chainStyle为spread_inside样式代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:text="A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button16"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button17" />


    <Button
        android:text="B"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button17"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button16"
        app:layout_constraintRight_toLeftOf="@+id/button36"
        android:layout_marginTop="16dp" />

    <Button
        android:text="C"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toRightOf="@+id/button17"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/button36" />


</android.support.constraint.ConstraintLayout>

weight样式实现

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:text="A"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="2"
        android:id="@+id/button16"
        app:layout_constraintHorizontal_chainStyle="spread"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button17" />


    <Button
        android:text="B"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="1"
        android:id="@+id/button17"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button16"
        app:layout_constraintRight_toLeftOf="@+id/button36"
        android:layout_marginTop="16dp" />

    <Button
        android:text="C"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="1"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toRightOf="@+id/button17"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/button36" />


</android.support.constraint.ConstraintLayout>

Fredlxy_007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ConstraintLayout的使用

ConstraintLayout是什么？ConstraintLayout允许我们只需要一个View层级而无需嵌套多个view，就可以创建一个庞大而又复杂的布局，这和RelativeLayout有点像，里面的子View会根据它们之间的关系来排列。但ConstraintLayout相对于RelativeLayout会更加灵活，使用AS的布局编辑器时，ConstraintLayout会更简单。使用AS的布
复制链接

扫一扫

专栏目录