前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ConstraintLayout(约束布局)的使用

ConstraintLayout(约束布局)的使用

作者头像
用户1205080
发布2018-10-18 15:27:45
2.2K0
发布2018-10-18 15:27:45
举报
文章被收录于专栏:编码前线

概述

ConstraintLayout(约束布局)的出现是为了在Android应用布局中保持扁平的层次结构,减少布局的嵌套,为应用创建响应快速而灵敏的界面。ConstraintLayout可以替代其他布局。

导库

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

ConstraintLayout的用法

Relative position

ConstraintLayout具有RelativeLayout的能力,可以将一个控件置于相对于另一个控件的位置。

示例:将B按钮放在A按钮的右边

代码语言:javascript
复制
<Buttonandroid:id="@+id/buttonA".../>

<Buttonandroid: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

这些属性会引用另一个控件的id或者parent(这会引用父容器,即ConstraintLayout)

代码语言:javascript
复制
<Buttonandroid:id="@+id/buttonB"...
       app:layout_constraintLeft_toLeftOf="parent"/>
Margins

在ConstraintLayout中,layout_margin及其子属性的作用都被复写,margin属性只对其相约束的View起作用。

示例1:有约束属性

示例2:没有约束属性,margin就会失效

GONE Margins

当被约束的目标对象的可见性为View.GONE,可以使用gone margin来设置,它只会在目标Target为GONE的时候生效。

相关属性

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

示例1

示例2

Bias

在ConstraintLayout中没有直接的属性让一个控件水平居中,或者竖直居中,可以使用如下方式:

如果想要将控件在水平方向偏向左、或者在竖直方向偏向一个方向,就可以配合使用bias属性:

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

居中情况下,bias的默认值为0.5,取值范围是0~1,是以left或top为始起边界。

示例

Circular positioning(圆形定位)

可以使用角度和距离来约束一个控件相对于另一个控件的位置。

相关属性

  • layout_constraintCircle:参照控件的id
  • layout_constraintCircleRadius:两个控件中心连线的距离
  • layout_constraintCircleAngle:当前View的中心与目标View的中心的连线与Y轴方向的夹角(取值:0~360)

示例

Dimensions constraints

ConstraintLayout中有3中方式来设置子View的宽高尺寸:

  • Xdp,X为具体数值
  • WARP_CONTENT
  • 0dp,0dp代表MATCH_CONSTRAINT,ConstraintLayout不推荐使用MATCH_PARENT
MATCH_CONSTRAINT

示例1:0dp的使用,可以看到,View的宽度就是父容器的宽度

示例2:B按钮被拉伸

当控件的尺寸被设置为MATCH_CONSTRAINT时,默认情况下尺寸会被设置成占用所有可用空间,可用使用下面几个属性进行约束:

  • layout_constraintWidth_min
  • layout_constraintHeight_min
  • layout_constraintWidth_max
  • layout_constraintHeight_max
  • layout_constraintWidth_percent
  • layout_constraintHeight_percent
WRAP_CONTENT : enforcing constraints(强制约束)

如果一个View的尺寸被设置为wrap_content,那么当View的内容太多时,可能会超出约束规定的范围,约束布局提供了两个属性来限制View的尺寸:

  • layout_constrainedWidth="true|false",默认为false
  • layout_constrainedHeight="true|false",默认为false

示例1:默认情况下,B控件由于内容较多,高度超出了约束规定的范围。

示例2:限制高度

Percent dimension

使用百分比步骤

  • 需要将宽或高设置为MATCH_CONSTRAINT(0dp)
  • 设置layout_constraintWidth_percentlayout_constraintHeight_percent,值为0~1

示例

Ratio

ConstrainLayout提供了ratio属性,用来限制View的宽高比例。 使用Ratio属性,宽高两个尺寸中至少要一个是MATCH_CONSTRAINT(0dp) 默认情况下,1:2,表示宽:高,宽为1,高为2 宽高都为MATCH_CONSTRAINT时,可以在比例前加W或者H: W,1:2:表示宽=2,高=1,即H:W = 1:2 H,1:2:表示高=2,宽=1,即W:H = 1:2

示例1:2:1

示例2:H,16:9(宽度占满父控件,约束高度为宽的9/16)

示例2:W,1:5(高度占满父控件,宽度为高度的1/5)

示例3:指定宽度为屏幕一半,并保持比例

Chains

链使我们能够对一组在水平或竖直方向互相关联的控件的属性进行统一管理。 成为链条的条件: 一组控件它们通过一个双向的约束关系链接起来,并且链的属性由一条链的头结点控制。

示例

Chain style

设定链条样式的属性:

  • layout_constraintHorizontal_chainStyle:水平链条的样式
  • layout_constraintVertical_chainStyle:竖直链条的样式

链的样式:

Weighted chains

权重链,宽或高需要设置为MATCH_CONSTRAINT。 使用layout_constraintHorizontal_weightlayout_constraintVertical_weight设置对应的权重

示例

constraint其他组件的用法

Guideline

Guideline,是一个辅助控件,可见性为GONE,主要作用是充当一个锚点。

设置Guidline的方向

  • android:orientation="horizontal":高度0dp,宽度与父容器等宽
  • android:orientation="vertical":宽度0dp,高度与父容器等高

设置Guidline的位置

  • layout_constraintGuide_begin:距离父容器左边或者顶部的距离
  • layout_constraintGuide_end:距离父容器右边或者底部的距离
  • layout_constraintGuide_percent:距离父容器左边或者顶部的距离占父容器的宽或者高的百分比

示例

Barrier

Barrier,译为屏障,是一个虚拟的辅助控件,用来防止它引用的View的位置超过自己。

相关属性

  • barrierDirection="left | top | right | bottom | start | end":设置屏障的方向
  • constraint_referenced_ids="id1,id2,...,idn":设置要限制在屏障内的控件

示例

Group

Group,用于控制多个控件的可见性。

Placeholder

Placeholder,占位符,可以用来放置其他View,用这个可以写一些布局模板。

示例

模板文件:

tools:parentTag:设为ConstraintLayout,使得编辑器将当前merge标签当做约束布局来预览。 content:是要填入这个占位符的View的id。

引用模板:

参考链接

  1. https://developer.android.com/reference/android/support/constraint/ConstraintLayout
  2. https://www.jianshu.com/p/a74557359882
  3. https://blog.csdn.net/lmj623565791/article/details/78011599
  4. https://blog.csdn.net/guolin_blog/article/details/53122387
  5. https://mp.weixin.qq.com/s/gGR2itbY7hh9fo61SxaMQQ?token=804846867&lang=zh_CN
  6. https://www.jianshu.com/p/4290b86289c8
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-09-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编码前线 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 导库
  • ConstraintLayout的用法
    • Relative position
      • Margins
        • GONE Margins
          • Bias
            • Circular positioning(圆形定位)
              • Dimensions constraints
                • MATCH_CONSTRAINT
                • WRAP_CONTENT : enforcing constraints(强制约束)
                • Percent dimension
              • Ratio
                • Chains
                  • Chain style
                  • Weighted chains
              • constraint其他组件的用法
                • Guideline
                  • Barrier
                    • Group
                      • Placeholder
                      • 参考链接
                      相关产品与服务
                      容器服务
                      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档