AutoResizing and AutoLayout(IOS屏幕适配)

简介: AutoResizing and AutoLayout(IOS屏幕适配)

简介:


  • 1.在以前的IOS程序中,是如何设置布局UI界面的?


解决方式:
(1)经常编写大量的坐标,计算代码
(2)为了保证3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时候还需要为两种屏幕编写不同的坐标计算代码(即传说中的“屏幕适配”)


  • 什么是AutoLayout?


(1)AutoLayout是一种“自动布局”技术,专门用来布局UI界面的
(2) AutoLayout自IOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广
(3)自IOS7(xcode5)开始,AutoLayout的开发效率的到很大的提升
(4)苹果官方也大力推荐开发者尽量使用AutoLayout来布局UI界面


  • 2.Autoresizing


(1)在Autolayout之前,有Autoresizing可以作为屏幕适配,但局限性很大,有些任务根本无法完成
(2)相比之下,AutoLayout的功能比Autoresizing强大很多


  • 3.AutoLayout的两大核心概念


(1)参照


(2)约束


  • 4.Autolayout 的报警与错误


(1)报警:控件的frame不匹配所添加的约束,比如
:比如约束空间的宽度为100,而控件现在的宽度为110
(2)错误:1.缺乏必要的约束,比如
:只约束了宽度和高度,没有约束具体的位置
错误2.两个约束冲突,比如1个约束控件的宽度为100,一个约束控件的宽度为110;


  • 介绍:AutoResizing and AutoLayout都是进行屏幕的适配方法


![Uploading 屏幕快照 2016-06-17 上午9.13.16_016526.png . . .],由于AutoResizing不完美就出现了AutoLayout,二者只能存在一个,正所谓一山不能容二虎。

image.png


image.png

1.Autoresizing讲解



  • 首先Autoresizing是在Autolayout之前的,它主要的功能:1.距离四周距离的固定,2.是否随着父控件的变化而变化。它是由Bug的,有些需求它是做不出来的,这时候Autolayout就诞生了。
  • 再来说一下它只适用于简单的布局,对于复杂的布局它有很大的缺陷,今后记住不要再使用就好了,下面来看一下它的具体用法


image.png

代码约束如下:

/*
 UIViewAutoresizingNone                 = 0,不用约束
 UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,
 UIViewAutoresizingFlexibleRightMargin  = 1 << 2,
 UIViewAutoresizingFlexibleTopMargin    = 1 << 3,
 UIViewAutoresizingFlexibleBottomMargin = 1 << 5
 UIViewAutoresizingFlexibleWidth        = 1 << 1,
 UIViewAutoresizingFlexibleHeight       = 1 << 4,
 */
self.view.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;

2.Autolayout 的讲解(极力推荐大家使用)



image.png


  • 如果使用Autolayout来约束我们的控件,那frame就失效了官方不建议再设置frame了


切记:用Autolayout就不要再使用frame
宽度:100  宽高在pin里面约束
高度:100
x:水平居中
y:垂直居中
注意;如果利用Autolayout 约束一个控件,和我们以前使用frame约束控件一样,必须设置宽度和高度以及/X/Y.如果缺少某一个约束就会报错,有可能引发一些未知的bug, 点击pin进行约束(下面红色的就会消失),不管你选择哪个都会居中


  • 如果有红色警告:代表缺少约束
  • 如果有黄色警告:代表当前位置大小和约束位置大小不一样


image.png


任务:1.现在来完成一个需求 :设置一个View使它处在控制器view的上下左右各20的边距


image.png


image.png距离顶部:20相当于设置了Y;

距离左边:20,相当于设置了X;

距离右边20,相当于设置了宽度;

距离底部20,相当于设置了高度;


任务:2.设置两个方格之间的距离为20,且他们到两边的距离也是20;


注意:在使用AutoLayout时,最好给每一个控件起一个名称,方便阅读


目录
相关文章
|
iOS开发
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(二)
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
202 0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(二)
|
编解码 Android开发 iOS开发
IOS使用AutoLayout让UIScrollView自动计算ContentSize
IOS使用AutoLayout让UIScrollView自动计算ContentSize
168 0
|
iOS开发
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
170 0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)
|
iOS开发
iOS界面布局之三——纯代码的autoLayout及布局动画(二)
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
243 0
iOS界面布局之三——纯代码的autoLayout及布局动画(二)
|
iOS开发
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
iOS界面布局之三——纯代码的autoLayout及布局动画
370 0
iOS界面布局之三——纯代码的autoLayout及布局动画(一)
|
iOS开发 容器
iOS界面布局之二——初识autolayout布局模型(二)
iOS界面布局之二——初识autolayout布局模型
157 0
iOS界面布局之二——初识autolayout布局模型(二)
|
iOS开发 开发者
iOS界面布局之二——初识autolayout布局模型(一)
iOS界面布局之二——初识autolayout布局模型
147 0
iOS界面布局之二——初识autolayout布局模型(一)