Autolayout基础简介01

来源:互联网 发布:xampp v3.2.2 php版本 编辑:程序博客网 时间:2024/05/29 16:53

目录:

  1. Autolayout的演变简介
  2. 什么是Autolayout
  3. Autoresizing介绍
  4. Autolayout的警告和错误
  5. 过程介绍

一、Autolayout的演变简介

在以前的iOS程序中,是如何设置布局UI界面的?MagicNumber -> autoresizingMask -> autolayout
iphone1-iphone3gs时代 windowsize固定为(320,480) 我们只需要简单计算一下相对位置就好了iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:windowsize不变iPad这时AutoresizingMask派上了用场(为什么不用Autolayout? 因为还要支持ios5) iphone6+时代 window的width也发生了变化(相对55s的屏幕比例没有变化) 终于是时候抛弃AutoresizingMask改用Autolayout了(1.不用支持ios5了 2. 相对于屏幕适配的多样性来说autoresizingMask也已经过时了)直到iphone6发布之后 我知道使用Autolayout势在必行了

二、什么是Autolayout

  • Autolayout是一种“自动布局”技术,专门用来布局UI界面的
  • Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广
  • 自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升
  • 苹果官方也推荐开发者尽量使用Autolayout来布局UI界面 Autolayout能很轻松地解决屏幕适配的问题

三、Autoresizing介绍

  • 在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成(勾选掉autolayout,可以进行autoresizing的实验)
  • 相比之下,Autolayout的功能比Autoresizing强大很多
  • Autolayout的2个核心概念
  • 参照
  • 约束

四、Autolayout的警告和错误

  1. 警告

     控件的frame不匹配所添加的约束, 比如 比如约束控件的宽度为100, 而控件现在的宽度是110
  2. 错误

     缺乏必要的约束, 比如 只约束了宽度和高度, 没有约束具体的位置  两个约束冲突, 比如 1个约束控件的宽度为100, 1个约束控件的宽度为110

五、过程介绍

1.勾选autolayout,去掉sizeClass,不然容易弄混

这里写图片描述

2.假设现在我要将一个视图放到左上角

步骤:
1.storyboard中拖一个视图
2.点击如图1第3个按钮按钮,弹出如下界面如图2

如图1:
如图1

如图2:
这里写图片描述

3.去掉constrain to margins:这个的功能会让你的左边-16,防止万一屏幕很大,让你的视图往中间靠,不然后面可能会留很大的空白,但现在我是要让他x,y都是0,所以去掉

4.选中左右两个红色的虚线,然后填充它距离左边和上边的位置。

5.勾选width,height,并填充数值,然后添加约束。

6.如果报警告,直接点击警告让系统帮我们修改

注意:
1.如果你只添加了坐标,没有添加长和宽的约束,系统会报错,因为一个视图的位置需要这四个来固定。

改错:继续添加长宽约束,注意不要在添加坐标,会发生冲突。因为autolayout它既可以相对父视图,也可以相对子视图。

0 0
原创粉丝点击