寒哥细谈之AutoLayout全解

看到群中好多朋友还停留在Frame布局的痛苦时代,以及有些开发者接手别人的就项目发现布局一团乱。
而且没有启动图的时候并不是真正真正适配iPhone 6(S)、iPhone6(S) Plus等设备 。
寒哥准备尽可能详细的讲一讲我所掌握的AutoLayout 。

AutoLayout很难?
我觉得AutoLayout的难的、约束的选择性太多,抽象性增加,大家直接看书或者看博客不太好理解,但是有人教的话还是挺快的。所以我尽量用GIF的方式给大家展现。

AutoLayout是什么?

  • Autolayout是一种布局技术,专门用来布局UI界面的。用来取代Frame布局在遇见屏幕尺寸多重多样的不足

  • Autolayout自iOS6开始引入,由于Xcode4的不给力,当时并没有得到很大的推广

  • 在iOS7(Xcode5)开始,Autolayout的开发效率得到很大的提升

苹果官方也推荐开发者尽量使用Autolayout来布局UI界面
Autolayout能轻松的解决屏幕适配的问题


AutoLayout从哪里入手?

1.gif

自 从Xcode6之后,你会看到我们新建一个Single Application,会发现一个ViewController的View非常大,跟任何一个iPhone/iPad的尺寸都不一样,这些都是假象、假 象、假象。Apple 把尺寸抽象为了一个正方形,到真正的设备上才是真正的布局。
AutoLayout+IB中操作的属性介绍

2.png3.png4.png

我们会发现貌似这个玩意好多配置,貌似很麻烦的样子。下面我们挨个讲解:
1.相对处理(Pin):

5.png

属性说明:
1:距离边缘 最上面的4个虚线表示某个View的距离上边、左边、右边、下边多高。
2:那个蓝色的Constrain To Margins 是iPhone6出现之后。
Apple 觉得更大的分辨率有点间距好看,默认为8,如果这个勾上了,这个View距离四周的值就变成了你输入的值+8。 一般建议勾掉 。
let`s Play
我们开始Demo前先想想我们在Frame时代,布局需要什么:

1
2
3
4
{
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。

6.png

请注意我这里把距离下面的,也就是BottomLayoutGuide的约束改成了距离控制器的View,为什么?

因为BottomLayoutGuide是晚于View加载的,如果参考这个,会造成进入页面会卡一下。尽量不要直接参考下面 TopLayoutGuide 则没事。

加完约束你会发现貌似并没有什么效果?

不是的,屏幕中出现的黄色的线条 ,这是IB在提升我们你所添加的约束 。和真实的尺寸不一样,怎么修改?继续图:

7.gif

属性说明3,4 固定某个View的宽高。

  • Demo 2.某个View距离在父View的左侧20,上20,宽高为:100,100。

8.gif

注意我在添加约束的时候有个选项叫做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中的宽高一样。

9.gif

属性6.AspectRatio比例。
假设某个View距离父View右上角20 ,20 宽高比 2:1 宽100。

10.gif

第七个属性Align其实在第一个面板中已经有了,放在下一部分讲解。
是时候给讲解下约束是什么玩意了刚才你看到我对约束修改了。
我们点击下某个约束。

11.gif

AutoLayout的公式

1
2
3
第一个Item的属性= (= )第二个Item的属性*Multiplier+Constant
第一个Item的属性= (= )第二个Item的属性*Multiplier+Constant
第一个Item的属性= (= )第二个Item的属性*Multiplier+Constant

比如图中的View 约束 可以理解为:View的tralling(右侧) 等于(eauql) 1倍(multpiler)的控制的右侧 + 20(constant)

1
2
注意比例是支持表达式的 如 2:3
releation是支持great than  lessthan

具体是多少 系统自动算出
2. 对齐处理(Align)

12.png

介绍:
属性说明:
Leading Edges:左对齐
Trailing Edges:右对齐
Top Edges:上对齐
Bottom Edges:下对齐
Horizontal Centers:水平中心对齐
Vertical Centers:竖向中心对齐
Baselines:基线对齐
Horizontal Center in Container:对齐容器中的水平中心
Vertical Center in Container:对齐容器中的竖向中心
Demo 4.某个View距离在父View的右侧20,demo3中白色View上20,宽高和Demo3中的宽高一样,并且有对齐。

13.png

Demo5.某个View 居中与父View 长宽50。

14.gif

某些控件是有baseLine的,如UILabel、UITextView,看下不同吧。
Demo6.某个label和另外一个label基线对。

15.gif

3. UILabel内建高度自适应高度
像label ,默认是有宽度的,宽度就是字体自适应的。
这样我们就可以不给UIlabel高度,把Label的NumberOfline = 0就可以自适应高度了。
Demo7.Label自适应高度:

16.gif

4. 小技巧
1.有时候约束太多的时候,我们可以给某个View起个假名字,就能很方便的看到是哪个View了。
2.View总是选不中按 ctrl + shift + 单击。

17.gif

3.AutoLayout遇见ScrollView。
参看这个文章《AutoLayout深入浅出三[相遇Scrollview]》,如图

19.png

  • Demo 8.ScrollView过长,无法编辑怎么办?

20.gif

将控制器改为Freedom,修改ContentView的高度约束,这样ScrollView就可以滚动了,也可以往下编辑了。

5.AutoLayout遇见UItableViewCell

AutoLayout深入浅出四[不仅是UIWebView与UITableView的纠缠]

AutoLayout深入浅出五[UITableView动态高度]

动态计算UITableViewCell高度详解

以上4个为讲解 。

下面实践:

https://github.com/forkingdog/UITableView-FDTemplateLayoutCell博客讲解

6.个人写的小技巧

《AutoLayout分分钟搞定等比例布局》

《友好的ContainerView&AutoLayout资料推荐》

7.iOS 9及AutoLayout的注意点:
当然也是我写的。AutoLayout好多好多不懂的,终于明白了。
总结:在StoryBoard里面开发其实就是拿着ViewController当做View用,如果你还是觉得复杂,可以把View抽象出去。

转载于:https://www.cnblogs.com/Free-Thinker/p/5158461.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最难学的5种编程语言排行

每个程序员都熟悉许多编程语言。许多编程语言都是高级的,它们的语法是人类可读的。然而,也有一些低级语言,对于一个人来说,读起来很困难,但是可以理解。然而,您是否遇到过一种既不可读又不可理解的编程语言…

[小北De编程手记] : Lesson 02 - Selenium For C# 之 核心对象

从这一篇开始,开始正式的介绍Selenium 以及相关的组件,本文的将讨论如下问题: Selenium基本的概念以及在企业化测试框架中的位置Selenium核心对象(浏览器驱动) Web DriverSelenium核心对象(Dom元素&#xf…

Java中HashMap的entrySet()你会用了吗

Map中存放的元素均为键值对&#xff0c;故每一个键值对必然存在一个映射关系。 Map中采用Entry内部类来表示一个映射项&#xff0c;映射项包含Key和Value Map.Entry里面包含getKey()和getValue()方法 Set<Entry<T,V>> entrySet() 该方法返回值就是这个map中各个键…

JS获取请求URL相关参数

今天在找获取当前网址除去参数的js方式&#xff0c;结果自己会的竟然只有window.location.href 先看一个示例 用javascript获取url网址信息 <script type"text/javascript"> document.write("location.host"location.host"<br>"); d…

wiki语法大全

Wiki语法大全 编辑一个维客页面十分容易。只要点击页面上方的“编辑本页”或右侧的[编辑]链接即可修改该页&#xff0c;或点击“讨论本页”然后再点击“编辑页面”来讨论该页面。点击后您就会看到一个包含那个Wiki页面的可编辑的文字区域。 先将文字复制到您最喜欢的文字编辑器…

驱动认知

用户态 App&#xff1a;cp指令&#xff0c;ftp的项目等等这就是App的开发。 App开发需要C的基础和C库&#xff0c;C库讲到文件&#xff0c;进程&#xff0c;进程间通信&#xff0c;线程&#xff0c;网络&#xff0c;界面&#xff08;GTk&#xff09;。 C库&#xff08;是linux标…

TreeMap实现排序

TreeMap TreeMap实现SortMap接口&#xff0c;能够把它保存的记录根据键排序&#xff0c;默认是按键值的升序排序&#xff0c;也可以指定排序的比较器。当用Iterator遍历TreeMap时&#xff0c;得到的记录是排过序的。 TreeMap取出来的是排序后的键值对。但如果您要按自然顺序或…

图解分布式架构的演进过程!

一、什么是分布式架构分布式系统&#xff08;distributed system&#xff09; 是建立在网络之上的软件系统。内聚性&#xff1a;是指每一个数据库分布节点高度自治&#xff0c;有本地的数据库管理系统。透明性&#xff1a;是指每一个数据库分布节点对用户的应用来说都是透明的&…

CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?...

Hello&#xff0c;小朋友们&#xff0c;还记得我是谁吗&#xff1f;对了&#xff0c;我就是~超威~好啦&#xff0c;言归正传&#xff0c;今天的布局实例是&#xff1a; 实现一个浮动布局&#xff0c;红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化&#xff0c;就如…

基于框架编写驱动代码

操作驱动的上层代码&#xff08;pin4test&#xff09; #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h>void main() {int fd,data;fd open("/dev/pin4",O_RDWR);if(fd<0){printf("open fail…

nacos在windows下安装

1:访问https://github.com/alibaba/nacos/releases下载nacos 2:下载到本地解压 3:点击startup.cmd 启动nacos 4:访问 http://127.0.0.1:8848/nacos 输入账号和密码&#xff0c;nacos/nacos

关于SQL优化这些你了解吗?

背景在当今这个互联网的时代无非要解决两大难题&#xff0c;其一是信息安全&#xff0c;其二就是数据的存储。而信息安全则是在数据存储的基础之上。一个公司从刚开始成立到发展成一个有上百人甚至上千人团队的时候&#xff0c;公司的业务量是呈上升趋势&#xff0c;客户及用户…

图片安全保护(未启动)

图片安全保护&#xff08;未启动&#xff09; 图片安全保护&#xff08;未启动&#xff09;posted on 2016-01-27 22:54 代码35 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/xinglizhenchu/p/5164847.html

微机总线地址,物理地址 ,虚拟地址

总线地址 地址总线 (Address Bus&#xff1b;又称&#xff1a;位址总线) 属于一种电脑总线 &#xff08;一部份&#xff09;&#xff0c;是由CPU 或有DMA 能力的单元&#xff0c;用来沟通这些单元想要存取&#xff08;读取/写入&#xff09;电脑内存元件/地方的实体位址。 自己…

Navicat远程连接linux下mysql服务器1045错误解决办法在这儿

1&#xff1a;首先通过xshell工具或者你熟悉的工具连接远程linux下的服务器 mysql -uroot -p 然后输入密码 2.进行授权 如果想root用户使用password从任何主机连接到mysql服务器的话。 GRANT ALL PRIVILEGES ON *.* TO root% IDENTIFIED BY 你的mysql密码 WITH GRANT O…

内存划分

一、内存分配 一个由C/C编译的程序占用的内存分为以下几个部分 1、栈区&#xff08;stack&#xff09;&#xff1a; 由编译器自动分配释放 &#xff0c;存放函数的参数值&#xff0c;局部变量的值等。其操作方式类似于数据结构中的栈。 2、堆区&#xff08;heap&a…

树莓派 博通BCM2835芯片手册

手册提取链接 链接&#xff1a;https://pan.baidu.com/s/1fdmIBNn1Pr1j3-ercNhKJg 提取码&#xff1a;8y1b 驱动的两大利器&#xff1a; 1、电路图:通过电路图找到寄存器 2、芯片手册 树莓派有54个通用IO口(0到53)&#xff0c;所有GPIO口至少有两个可选功能&#xff08;输入输…

MVC实现实现文件流打包成压缩包

MVC实现实现文件流打包成压缩包1、使用压缩类库SharpZipLib SharpZipLib 是一款比较经典实用C#压缩类库SharpZipLib 库特点&#xff1a;功能丰富、稳定 &#xff0c;支持主流 zip、Gzip Tar BZip2 格式2、项目中引用SharpZipLib的官方地址是&#xff1a;http://icsharpcode.git…

Intellij idea 报错:Error : java 不支持发行版本5

idea运行出现了这个错误 解决办法按下图所示&#xff1a;

属性“dataProvider”有多个初始值设定项。(注意:“dataProvider”是“mx.charts.BarChart”的默认属性)。...

1、错误描写叙述 属性“dataProvider”有多个初始值设定项。&#xff08;注意:“dataProvider”是“mx.charts.BarChart”的默认属性&#xff09;。2、错误原因 <?xml version"1.0" encoding"utf-8"?> <s:Application xmlns:fx"http://ns.…