Autolayout 基本使用Ⅰ

Autolayout 技术简介

从字面上来看我们可以直观地看出该技术是用来做什么的,Auto--自动 layout-布局。联想起来就是自动布局技术。引用官方定义 Auto Layout Is a Constraint-Based, Descriptive Layout System. AutoLayout是一种基于约束的,描述性的布局系统。我们都知道现在的IOS设备屏幕尺寸已经是多种多样了,不再是 iPhone3GS、iPhone4、iPhone4s 那个时代的统一尺寸了。这样给开发工程师带来了头疼的问题--屏幕适配。

Autolayout 基本使用Ⅰ_第1张图片
IOS 设备尺寸

为减轻开发工程师的压力,苹果陆续推出了 Autoresizing 技术和 AutoLayout 技术。其发展历程简略如下:

  1. iPhone3GS\iPhone4\iPhone4s 时代

    定位基本写死,没有屏幕适配可言,也没有必要,因为屏幕尺寸是固定且统一的。

  2. iPad 以及 IOS 设备横屏功能的出现

    苹果推出 Autoresizing 技术,使得横竖屏适配相对简单,定位方式为父子级相对定位。因此不能解决兄弟控件的相对关系问题。

  3. iOS 6.0(Xcode4)开始

    出具现了Autolayout技术,但从Xcode5.0(iOS 7.0)才开始流行起来,原因当然是技术及开发工具(Xcode)对其支持的成熟。

Autolayout 的基本使用

实现 Autolayout 有两种方式,一种是 通过 storyboard 设置约束,另一种就是通过 纯代码来实现.我们现在先通过 Xcode 提供的 storyboard 界面认识一下 Autolayout 的使用

假定我们有现在这样一个需求:让一个宽高都为100的 UIView 无间距地黏在屏幕的右下角.

1.项目默认使用 Autolayout 布局

Autolayout 基本使用Ⅰ_第2张图片
项目默认使用 Autolayout 布局

2.添加约束

Autolayout 基本使用Ⅰ_第3张图片
添加约束

3.约束添加后还未同步的情况


Autolayout 基本使用Ⅰ_第4张图片
约束添加后还未同步的情况

4.同步方式:

方式1:在添加约束的时候同时更新

Autolayout 基本使用Ⅰ_第5张图片
添加约束的时候同时更新

方式2:添加完约束再更新


Autolayout 基本使用Ⅰ_第6张图片
添加完约束再更新

方式3:通过警告引导更新

Autolayout 基本使用Ⅰ_第7张图片
通过警告引导更新

4.开启多屏预览效果


Autolayout 基本使用Ⅰ_第8张图片
开启多屏预览效果

5.预览效果,以及添加设备

Autolayout 基本使用Ⅰ_第9张图片
预览效果及添加设备

此时我们可以看到一个明显的问题.我们设置的右边距为 0 但是任何设备上均留有间隙

Autolayout 基本使用Ⅰ_第10张图片
任何设备上均留有间隙

原因:默认与边框保持一定间隙.去掉这个勾就可以


Autolayout 基本使用Ⅰ_第11张图片
默认与边框保持一定间隙

注意:如果是先设置边距再去掉这个勾的话,还需要重新设置一次,因为在你去掉这个勾的同时,它将自动为你加上这个margin值

6.修改约束

Autolayout 基本使用Ⅰ_第12张图片
修改约束

Autolayout 基本使用的注意点

  • 创建工程时 Autolayout 功能是默认开启的
  • 约束必须完整且无冲突
  • 默认是与边框保持有间距
  • 添加约束的原则是:无错误,无警告

你可能感兴趣的:(Autolayout 基本使用Ⅰ)