Android——ConstraintLayout(约束布局)

1. 介绍

约束布局ConstraintLayout 是一个ViewGroup,可以在Api9以上的Android系统使用它,它的出现主要是为了解决布局嵌套过多的问题,以灵活的方式定位和调整小部件。从 Android Studio 2.3 起,官方的模板默认使用 ConstraintLayout。
官方文档:ConstraintLayout

2. 基本属性及其使用

要在 ConstraintLayout 中定义某个视图的位置,必须为该视图添加至少一个水平约束条件和一个垂直约束条件。每个约束条件均表示与其他视图、父布局或隐形引导线之间连接或对齐方式。每个约束条件均定义了视图在竖轴或者横轴上的位置;因此每个视图在每个轴上都必须至少有一个约束条件,但通常情况下会需要更多约束条件。

2.1 相对定位
1. layout_constraintLeft_toLeftOf
   当前View的左侧和另一个View的左侧位置对齐
   与RelativeLayout的alignLeft属性相似
2. layout_constraintLeft_toRightOf 
   当前view的左侧会在另一个View的右侧位置
   与RelativeLayout的toRightOf属性相似
3. layout_constraintRight_toLeftOf 
   当前view的右侧会在另一个View的左侧位置 
   与RelativeLayout的toLeftOf属性相似
4. layout_constraintRight_toRightOf 
   当前View的右侧和另一个View的右侧位置对其
   与RelativeLayout的alignRight属性相似
5. layout_constraintTop_toTopOf 
   头部对齐,与alignTop相似
6. layout_constraintTop_toBottomOf 
   当前View在另一个View的下侧 与below相似
7. layout_constraintBottom_toTopOf 
   当前View在另一个View的上方 与above相似
8. layout_constraintBottom_toBottomOf 
   底部对齐,与alignBottom属性相似
9. layout_constraintBaseline_toBaselineOf 
   文字底部对齐,与alignBaseLine属性相似
10. layout_constraintStart_toEndOf 
   同left_toRightOf
11. layout_constraintStart_toStartOf 
   同left_toLeftOf
12. layout_constraintEnd_toStartOf 
   同right_toLeftOf
13. layout_constraintEnd_toEndOf 
   同right_toRightOf
2.2 角度定位
layout_constraintCircle : 引用另一个小部件 id
layout_constraintCircleRadius : 到另一个小部件中心的距离
layout_constraintCircleAngle : 小部件应该在哪个角度(以度为单位,从 0 到 360)

<TextView
        android:id="@+id/textView1"
        .../>
<TextView
        android:id="@+id/textView2"
        ...
        app:layout_constraintCircle="@+id/textView1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="150dp"/>
2.3 边距
android:layout_marginStart //距离开始
android:layout_marginEnd //距离结束
android:layout_marginLeft //距离左边
android:layout_marginTop //距离上边
android:layout_marginRight //距离右边
android:layout_marginBottom //距离下边
android:layout_marginBaseline //距离基线

看起来跟别的布局没有什么差别,但实际上控件在ConstraintLayout里面要实现margin,必须先约束该控件在ConstraintLayout里的位置,举个例子:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#E8C99B"
        android:gravity="center"
        android:text="textview1"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="100dp"/>
</android.support.constraint.ConstraintLayout>

不可见性行为(goneMargin)
goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值,属性如下:

layout_goneMarginStart //距离开始
layout_goneMarginEnd  
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
2.4居中和偏移
//垂直居中
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

//水平居中
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

//垂直水平居中
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

layout_constraintHorizontal_bias //水平方向偏移
layout_constraintVertical_bias //垂直方向偏移

2.5 尺寸约束
  • 使用指定的尺寸
  • 使用wrap_content,让控件自己计算大小
    当控件的高度或宽度为wrap_content时,可以使用下列属性来控制最大、最小的高度或宽度:
android:minWidth 最小的宽度
android:minHeight 最小的高度
android:maxWidth 最大的宽度
android:maxHeight 最大的高度
  • 使用 0dp (MATCH_CONSTRAINT)
    官方不推荐在ConstraintLayout中使用match_parent,可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent,举个例子:
<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        ......
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  • 宽高比
    当宽或高至少有一个尺寸被设置为0dp时,可以通过属性layout_constraintDimensionRatio设置宽高比,举个例子:
<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        ......
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constrainedWidth="true"
        app:layout_constrainedHeight="true"/>
2.6 链

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

chains提供了3种样式,分别是:

spread 展开元素 (默认)
spread_inside 展开元素,但链的两端贴近parent
packet 链的元素将被打包在一起。

2.7 权重
layout_constraintHorizontal_weight

假如我们想要这样的效果:两个TextView 平分屏幕,权重1:1

注意点:

1.这两个TextView的 android:layout_width="0dp"

2.这两个TextView的 app:layout_constraintHorizontal_weight="1"

3.这两个TextView互相加约束

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tv2"
app:layout_constraintTop_toTopOf="parent" />

app:layout_constraintLeft_toRightOf="@+id/tv1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
2.8 layout_optimizationLevel

layout_optimizationLevel是一个标签,用于配置优化级别。它的可选值如下:

barriers:找出xml中的屏障,并用简单的约束取代它们
direct:优化那些直接连接到固定元素的元素,例如屏幕边缘或引导线,并继续优化直接连接到它们的任何元素。
standard:这是包含 barriers 和 direct 的默认优化级别。
dimensions:通过计算维度来优化布局传递。
chains:计算出如何布置固定尺寸的元素链。
使用方法如下:

<android.support.constraint.ConstraintLayout 
   app:layout_optimizationLevel="standard|dimensions|chains"

3. Group

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

<androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="tv1,tv2,tv3" />

4. Placeholder

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

特殊的是这个属性:app:content = "@+id/tv1"

    <androidx.constraintlayout.widget.Placeholder
        android:layout_width="wrap_content"
        android:id="@+id/placeholder"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:content = "@+id/tv1"
        android:layout_height="wrap_content"/>

5. Guideline

Guideline是只能用在ConstraintLayout布局里面的一个工具类,用于辅助布局,类似为辅助线,可以设置android:orientation属性来确定是横向的还是纵向的。

  • 当设置为vertical的时候,Guideline的宽度为0,高度是parent也就是ConstraintLayout的高度
  • 同样设置为horizontal的时候,高度为0,宽度是parent的宽度

重要的是Guideline是不会显示到界面上的,默认是GONE的。

Guideline还有三个重要的属性,每个Guideline只能指定其中一个:

  • layout_constraintGuide_begin,指定左侧或顶部的固定距离,如100dp,在距离左侧或者顶部100dp的位置会出现一条辅助线
  • layout_constraintGuide_end,指定右侧或底部的固定距离,如30dp,在距离右侧或底部30dp的位置会出现一条辅助线
  • layout_constraintGuide_percent,指定在父控件中的宽度或高度的百分比,如0.8,表示距离顶部或者左侧的80%的距离。

6.Barrier 约束屏障

参考:大佬的博客

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容