菜鸟造轮子:iOS的Autolayout+Xib(一)

引言

WWDC 2018:高性能 Auto Layout,苹果公司演示了其高性能的线性布局方式,其实在iOS6上就有这种布局概念当时名字叫做Autoresizing,这个技术并不怎么完美,不足还是很多,大约在iOS8时代(没记错的话)才有真正的“约束”Autolayout。
 就像说“PHP是世界上最好的语言”“中医是伪科学”一样,当你对其他iOSer说Autolayout贼好用,最大可能就是收获“原生Frame党”的鄙视,以及“Masonry党”这种中间型叛徒会对两边都进行吐槽,那么Autolayout到底在性能上表现如何?这里有一篇非常不错的文章
介绍了Autolayout,可以稍作了解,我主要是为大家介绍如何用这样一个偷懒技术

第一节:布局

 请恕我才疏学浅,只用过iOS的布局方式,我下面说的也基本上就只是我了解的iOS的布局方式。
 对于iOS来说布局基本上都是在UIView上,可以理解为画布,一般来说它经常是矩形,这块画布有两个坐标系:

1. 以其父视图为参照物其坐标属性就为Frame:

Frame

可看出其父视图圆点在左上,从(0,0)开始,一般我们在坐标系中想确定一个点的位置只需要知道这个点在该坐标系中的(x,y)就可以确定;而却定一个矩形的位置,我们可以以其自身原点与其父视图原点(即父视图坐标系位置)的相对坐标确定这个原点位置,再加上矩形的(width,height),这个矩形就可以完整的显示在父视图上了。

Frame定位

对应到iOS当中代码为:

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 60, 120, 200)];
    [self.view addSubview:view];

 好了你要是理解了如何去定位一个视图,那么Autolayout对于你来说就是手到擒来,接下我介绍一下xib中Autolayout都有哪些属性:

2. Autolayout属性(对比Masonry)

 Autolayout其实就是约束对象,它在UIKit中类对象为NSLayoutConstraint

约束名 xib中约束名 Masonry中的名 解释
NSLayoutAttributeLeft Leading left 该视图相对参照约束视图左边约束
NSLayoutAttributeRight Trailing right 该视图相对参照约束视图右边边约束
NSLayoutAttributeTop Top top 该视图相对参照约束视图上边约束
NSLayoutAttributeBottom Bottom bottom 该视图相对参照约束视图下边约束
NSLayoutAttributeLeading Leading leading 该视图相对参照约束视图左边约束
NSLayoutAttributeTrailing Trailing trailing 该视图相对参照约束视图右边边约束
NSLayoutAttributeWidth Width width 该视图宽度约束
NSLayoutAttributeHeight Height height 该视图高度度约束
NSLayoutAttributeCenterX Horizontally centerX 中心点横坐标(x)与约束对象中心点横坐标(x)关系
NSLayoutAttributeCenterY Vertically centerY 中心点纵坐标(y)与约束对象中心点纵坐标(y)关系
NSLayoutAttributeLastBaseline Last Baseline lastBaseline 针对于文字,字体多段落最后一段落底部对齐
NSLayoutAttributeFirstBaseline First Baseline firstBaseline 针对于文字,字体多段落以第一段落底部对齐
NSLayoutAttributeLeftMargin Constrain to margin leftMargin 该视图对于约束视图的左边约束并有一定偏移量
NSLayoutAttributeRightMargin Constrain to margin rightMargin 该视图对于约束视图的右边约束并有一定偏移量
NSLayoutAttributeTopMargin Constrain to margin topMargin 该视图对于约束视图的上边约束并有一定偏移量
NSLayoutAttributeBottomMargin Constrain to margin bottomMargin 该视图对于约束视图的下边约束并有一定偏移量
NSLayoutAttributeLeadingMargin Constrain to margin leadingMargin 该视图对于约束视图的左边约束并有一定偏移量
NSLayoutAttributeTrailingMargin Constrain to margin trailingMargin 该视图对于约束视图的右边约束并有一定偏移量
NSLACenterXWithinMargins(简写了) 同上 centerXWithinMargins 中心点(x)与约束对象中心点(x)关系并有一定偏移量
NSLACenterYWithinMargins(简写了) 同上 centerYWithinMargins 中心点(y)与约束对象中心点(y)关系并有一定偏移量

那么这些属性在xib中都在哪里?


属性1

属性2

属性3

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

推荐阅读更多精彩内容