前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AutoLayout简洁之道

AutoLayout简洁之道

作者头像
君赏
发布2018-08-31 16:09:50
5390
发布2018-08-31 16:09:50
举报
文章被收录于专栏:君赏技术博客君赏技术博客

我也是前几天才有空了解了一下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。我们试图的宽度等于父试图的宽度。因为我们参考父试图设置。

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

未完待续

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015.11.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需要用到的功能
  • 1.两个试图相对布局
  • 2.相对于最近试图布局
  • 约束管理
  • 实例说明:
    • 方案1:
      • 方案二
      • 未完待续
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档