- 1、本文档共10页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
iOS AutoLayout详解
AutoLayout是什么?
Autolayout是一种布局技术,专门用来布局UI界面的。用来取代Frame布局在遇见屏幕尺寸多重多样的不足
Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大的推广
在iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升
苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
Autolayout能轻松的解决屏幕适配的问题
AutoLayout从哪里入手?
自从Xcode6之后,你会看到我们新建一个Single Application,会发现一个ViewController的View非常大,跟任何一个iPhone/iPad的尺寸都不一样,这些都是假象、假象、假象。Apple 把尺寸抽象为了一个正方形,到真正的设备上才是真正的布局。
AutoLayout+IB中操作的属性介绍
我们会发现貌似这个玩意好多配置,貌似很麻烦的样子。下面我们挨个讲解:
1.相对处理(Pin):
属性说明:
1:距离边缘 最上面的4个虚线表示某个View的距离上边、左边、右边、下边多高。
2:那个蓝色的Constrain To Margins 是iPhone6出现之后。
Apple 觉得更大的分辨率有点间距好看,默认为8,如果这个勾上了,这个View距离四周的值就变成了你输入的值+8。 一般建议勾掉 。
let`s Play
我们开始Demo前先想想我们在Frame时代,布局需要什么:
{
original:{x,y}
size:{width,height}
}
在iOS中布局是绝对定位的(大致这么理解吧)。
所以我们需要某个View的X,Y,W,H
我们从基本的入门 ,我们无论添加多少约束,都是需要定位好某个View的X,Y,W,H。
少了不行,多了更不行。
少了不行,多了更不行。
少了不行,多了更不行。
重要的事情说三遍。这里先不讨论UIlabel、UITextView、UIImageView等自带的内建高度。
Demo 1.某个View距离父View上下左右间距全部为20。
请注意我这里把距离下面的,也就是BottomLayoutGuide的约束改成了距离控制器的View,为什么?
因为BottomLayoutGuide是晚于View加载的,如果参考这个,会造成进入页面会卡一下。尽量不要直接参考下面 TopLayoutGuide 则没事。
加完约束你会发现貌似并没有什么效果?
不是的,屏幕中出现的黄色的线条 ,这是IB在提升我们你所添加的约束 。和真实的尺寸不一样,怎么修改?继续图:
属性说明3,4 固定某个View的宽高。
Demo 2.某个View距离在父View的左侧20,上20,宽高为:100,100。
注意我在添加约束的时候有个选项叫做updateFrame,如果勾选会直接将Frame调整到真实值,而不需要再次update 。
这里我们只是讲了最简单定位单个View,你会觉得和Frame并没有什么区别 。
区别在于:AutoLayout的核心是参照,也就是基本上任何一个View都可以参照另一个View。
接下来讲解Pin里面第5,6个属性:
equal、Width、equal、Height,选中的多个View宽高相等。
Demo 3.某个View距离在父View的左侧20,demo2中白色View,上20,宽高和Demo2中的宽高一样。
属性6.AspectRatio比例。
假设某个View距离父View右上角20 ,20 宽高比 2:1 宽100。
第七个属性Align其实在第一个面板中已经有了,放在下一部分讲解。
是时候给讲解下约束是什么玩意了刚才你看到我对约束修改了。
我们点击下某个约束。
AutoLayout的公式
第一个Item的属性=?(=?)第二个Item的属性*Multiplier+Constant
第一个Item的属性=?(=?)第二个Item的属性*Multiplier+Constant
第一个Item的属性=?(=?)第二个Item的属性*Multiplier+Constant
比如图中的View 约束 可以理解为:View的tralling(右侧) 等于(eauql) 1倍(multpiler)的控制的右侧 + 20(constant)
注意比例是支持表达式的?如?2:3
releation是支持great?than??lessthan
具体是多少 系统自动算出
2. 对齐处理(Align)
介绍:
属性说明:
Leading Edges:左对齐
Trailing Edges:右对齐
Top Edges:上对齐
Bottom Edges:下对齐
Horizontal Centers:水
您可能关注的文档
- 叶菜类种子生产技术 亲本种子繁殖 亲本种子繁殖.docx
- 叶菜类种子生产技术 叶菜类种子生产基地的选择 叶菜类种子生产基地的选择.docx
- 叶菜类种子生产技术 杂交亲本制种技术 杂交亲本制种技术.docx
- 叶菜类种子生产技术 杂交种子生产 杂交种子生产.docx
- 叶菜类种子生产技术 种株的繁育与管理 种株的繁育与管理.docx
- 一带一路与国际化(一带一路) 大数据解读一带一路 “一带一路”数据观丨“一带一路”的2017.docx
- 医学影像设备构造与维修 电子教材 医用数字胃肠X射线机.docx
- 医学影像设备构造与维修 自编实训教材 CPI200 发生器部分.doc
- 医院静脉配置技术 课程导学 《 医院静脉配置技术》课程教学规范.docx
- 移动商务视觉设计2 综合设计 课程实训设计--商品拍摄.docx
- 2024年山东省聊城东阿县事业单位选聘32人历年高频考题难、易错点模拟试题(共500题)附带答案详解.docx
- 2024年山东省聊城莘县事业单位招聘单位高频考题难、易错点模拟试题(共500题)附带答案详解.docx
- 汽机专业题库及解析.docx
- 基本常规医疗流程答案.doc
- 大金空调故障代码汇总.docx
- 理综-山西省阳泉市2023-2024学年高三年级上学期期末考试试题和答案.docx
- 数学-海南省天一大联考2023-2024学年高三学业水平诊断(二)带答案.docx
- 地理-湖南省长沙市雅礼中学2023-2024学年高三上学期月考试卷带答案.docx
- 生物-湖南省长沙市雅礼中学2023-2024学年高三上学期月考试卷带答案.docx
- 数学-湖南省长沙市雅礼中学2023-2024学年高三上学期月考试卷带答案.docx
文档评论(0)