ConstraintLayout 指南

原文

  • 每个View起码需要一个水平约束和一个垂直约束,没有约束View在运行的时候会显示在(0, 0)坐标(虽然编辑界面显示的位置是你拖拽的位置)。

  • 使用Autoconnect and infer constraints 特性布局编辑器(Layout Editor)会自动帮你添加约束

  • 布局编辑器中每个控件会在四角显示重设大小的标识(正方形),在每条边中间显示约束设置的标识(圆形)

  • 添加约束:点击约束圆点,拖动到锚点上。可用的锚点有:别的View的边界、布局的边界、参考线(guideline)。

  • 约束规则:
    1、每个View必须至少有两个约束,一个水平约束一个垂直约束
    2、约束点只能和同个平面的锚点之间产生约束,即View的垂直平面只能与另一个垂直平面产生约束,基准线也只能和另一个基准线产生约束
    3、每个约束点只能用于一个约束,但是不同的View可以约束到同一个锚点上

  • 取消约束:点击View上对应约束点,或是点击清除所有约束的按钮

  • 如果在相反方向上添加了约束后,约束指示线变成像弹簧一样弯曲的线的话,通常是因为View设置成了 "fixed" 或者 "wrap content",这时View会在约束范围居中。如果想拉伸它的尺寸来适应约束范围,"把尺寸改为 match constraints"。如果想保持当前尺寸不变不让View居中, 调整约束偏移

  • 如果想对齐到一个View的中间,则两边都添加约束

  • 可以添加水平方向或者垂直方向的参考线,参考线对App用户不可见,参考线相对布局边缘的位置可以用 dp 单位或者百分比表示。点击参考线的圆点切换表示方式,拖拽圆点移动参考线位置

  • 调整约束偏移:在属性窗口拖动偏移滑块

  • View有三种尺寸模式
    1、Wrap Content: 自适应内容
    2、Match Constraints: View可以在宽度或者高度方向在计算了边距后根据需要进行扩展来适应约束,如果该方向只有一个约束,View会适应它的内容。这个模式可以在宽度和高度两个方向使用,同时你也可以设置一个尺寸比例
    3、Fixed: 固定大小
    点击图标可以切换这三种模式

The Properties window includes controls for 1 size ratio, 2 delete constraint, 3 height/width mode, 4 margins, and 5 constraint bias.
  • 设置尺寸比例:只有一个方向设置为 Match Constraints 时,点击 Toggle Aspect Ratio Constraint 开关,输入宽高比。如果两个方向都设置为 Match Constraints,则需要选择一个方向作为基准
The view is set to a 16:9 aspect with the width based on a ratio of the height.
  • 边距:在Material Design中边距的尺寸一般为 8dp 的倍数

  • 用链(Chain)控制线性组
    一个链允许你使用以下样式水平或者垂直放置一组View:
    1、Spread: 均与分布。默认模式。
    2、Spread inside: 第一个和最后一个附着在其约束上,其余的均与分布。
    3、Weighted: 当链设置为 spreadspread inside 模式时,你通过设置一个或多个View的尺寸为 "match constraints" (0dp) 来填补剩余的空间。默认模式下,剩余空间会在设置了 "match constraints" 尺寸的View间平均分配,但你可以通过 layout_constraintHorizontal_weightlayout_constraintVertical_weight 给每个 View 指定不同的重要程度。 同 linear layout类似。
    4、Packed: View 打包在一起,可以给他们整体设置偏移

    Examples of each chain style

  • 快速创建一组 View 的链:将它们全选,右击任一 View 选择 Center HorizontallyCenter Vertically 即可分别创建水平方向和垂直方向的链

  • 使用链的一些考虑事项:
    1、一个 View 既可以属于一条水平链也可以属于一条垂直链,可以很轻松的创建灵活的网格布局
    2、一条链只有当其每个端点都在同一轴向上约束到别的对象上的时候才能正确工作
    3、虽然链的方向可以是水平或者是垂直,用它不代表所有的 View 在那个方向对齐。所以确保你引入了别的约束来为每个 View 取得合适的方向,例如 alignment constraints

  • 链的头:水平方向第一个或垂直方向第一个 View

  • 不再支持 MATCH_PARENT

  • 支持 View.GONE,gone 的 View 被认为只剩一个点,且它的 margin 全部失效。layout_goneMargin 可重设因为某个 View gone 之后补位的 View 的margin与之前的 View 不同的问题

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

推荐阅读更多精彩内容