美文网首页
AutoLayout简洁之道

AutoLayout简洁之道

作者: 君赏 | 来源:发表于2015-11-26 11:57 被阅读135次

我也是前几天才有空了解了一下AutoLyout,虽然现在布局已经入门,但是道行尚浅,不足请之处,我会更新文档。
其实XIB和代码都可以用AutoLayout,现在代码自己不习惯,因为XIB可以一眼的看出来是什么约束。

感谢@广州-八爷提醒文章的错误

需要用到的功能

QQ20151126-0.png

1.是IOS8新出的,属于表格一样的布局,我们暂时不用多管。
2.是进行两个试图进行约束的
3.是对于单个试图进行约束的,默认相对于父试图。
4.是对于约束更新和擅长管理的。

1.两个试图相对布局

QQ20151126-1.png

红线圈着是我们常用的约束分别代表着
1.左对齐Leading Edges
2.右对齐Tralling Edges
3.上对齐Top Edges
4.下对齐Buttom Edges
5.水平对齐Horizontal Centers
6.竖直对齐Vertical Centers

勾选就是我们约束了这个条件 后面可以设置约束的距离大小 默认为0

2.相对于最近试图布局

QQ20151126-2.png

红线是我们单个布局最长用到的

分别代表着:
1,距离最近试图顶部

  1. 距离最近试图底部
  2. 距离最近试图左边
  3. 距离最近试图右边

Constrain to margins默认是勾选,会默认多8距离,因为苹果认为大屏幕的有点距离好看。你如果觉得定位试图不准,可以取消。

1。设置宽度 Width
2 . 设置高度 Height

  1. 设置宽度一样(只能选中多个试图布局才能用) Equal Widths
  2. 设置高度一样(只能选中多个试图布局才能用) Equal Heights

约束管理

1.约束更新 ,删除
因为截图不了,就不上图了。

实例说明:

设置下面图广告条高度140 左边和父试图对齐 右边于父试图对齐 上和父试图对齐

QQ20151126-3.png

方案1:

1.选中广告条试图。

2.选择 QQ20151126-4.png QQ20151126-5.png

1.取消了Constrain to margins
2.设置上对齐0
3.设置左对齐0
4.设置右对齐0
5.设置高度140

怎么才能约束成功 其实原理就是用约束控制Frame.我们都知道Frame有坐标,大小控制。上面添加的约束为什么会成功呢。
相对于父试图上对其和左对齐就确定了坐标。
相对齐父试图左对齐和右对齐就确定了高度
设置了高度就确定了高度。
从而确定了这个试图的FRAME。

方案二

1.选中父试图和广告图
2.选择

QQ20151126-6.png QQ20151126-7.png

1.设置了左对齐
2.设置了右对齐
3.设置了顶部对齐。

你们问了这个和上面不是一样的吗。上面的默认是相对于父试图。这个是相对于你选中的试图。现在选中的和父试图是一个,所以意义是一样的。

我们虽然设置了左右对齐设置了宽度
顶部对齐和左对齐确定了为了但是没有设置高度
再次选择pan


QQ20151126-4.png QQ20151126-8.png

我们选中广告条设置高度位140。
我们确定了这个试图的FRAME,从而也约束成功了。

案例2:

QQ20151126-3.png

现在我希望这个广告条是我们宽度的一半

确定宽度和位置还是和之前的一样。但是现在高度不确定了。

我们选中父试图和广告条。

QQ20151126-9.png

约束如上,让两个高度相等。

QQ20151126-10.png

我们点击上图的红线位置。

QQ20151126-11.png

修改高度参数如上。

我们设置试图的高度等于父试图高度。Mutiplier设置位0.5。
我们以为试图的高度位宽度的一半也就是0.5。我们试图的宽度等于父试图的宽度。因为我们参考父试图设置。

我们没办法参考自己的高度和宽度的,因为还没确定下来具体的值。

未完待续

相关文章

  • AutoLayout简洁之道

    我也是前几天才有空了解了一下AutoLyout,虽然现在布局已经入门,但是道行尚浅,不足请之处,我会更新文档。其实...

  • 从Autolayout到Masonry

    目录 一、Autolayout的使用对比了一下Autolayout和Masonry,突出Masonry代码的简洁性...

  • 代码简洁之道

    第一章 有意义的命名(起名是门艺术) 示例代码为伪代码,懂就好 名副其实目的:只需要一个好名称就能知道发什么了什么...

  • 11.29 简洁之道

    如何才能够做到心中的简洁: 1、少即是多 生活用品,包括衣服、鞋子、裤子等,只留下必须的几件,轮换穿着,避免囤积导...

  • JavaScript简洁之道

    1. 强类型检查 用===代替 == 2.变量 用知名其意的方式为变量命名,通过这种方式,当一个人看到它们时,易于...

  • 代码简洁之道

    第一章 整洁代码 第二章 有意义的命名 名副其实 问题不再于代码的简洁度,而在于代码的模糊度。即上下文在代码中未被...

  • iOS Autolayout之Masonry解读

    Masonry Masonry是公认非常简洁优美的一款Autolayout框架 我推荐大家重点学习这个框架 我会把...

  • 《童区寄传》关键词:关注古代散文的简洁之道·纯熟的简洁之道

    《童区寄传》关键词:关注古代散文的简洁之道·纯熟的简洁之道 1.按照标题来说,这是一篇传记。传记当然就是为人立传。...

  • Masonry布局控件frame为0的问题

    Masonry 是对 autolayout 的封装,优雅的链式语法和简洁易用的接口让我们在做UI开发时节省了不少时...

  • 代码简洁之道 - 笔记

    1. 什么是整洁代码 我喜欢优雅和高效的代码。代码逻辑应当直截了当,叫缺陷难以隐藏;尽量减少依赖关系,使之便于维护...

网友评论

      本文标题:AutoLayout简洁之道

      本文链接:https://www.haomeiwen.com/subject/cmkdhttx.html