iOS应用开发中使用Auto Layout来适配不同屏幕尺寸

简介
Auto Layout 是苹果在 Xcode 5 (iOS 6) 中新引入的布局方式，旨在解决 3.5 寸和 4 寸屏幕的适配问题。屏幕适配工作在 iPhone 6 及 plus 发布以后变得更加重要，而且以往的“笨办法”的工作量大幅增加，所以很多人开始学习使用 Auto Layout 技术。

初体验
0. 开发环境

本系列文章的开发环境为：

OS X 10.10.3
Xcode Version 6.3.1 (6D1002)
1. 新建应用

新建一个 Single View Application，命名为 AutoLayout，如下：

点击选中 Main.storyboard，右侧内容如下：

两个按钮将会在未来的开发中产生巨大的作用，他们将拥有本系列文章的全局名称：按钮1，按钮2。请先记下他们的位置。

2. 直接上手，开始使用

这也是我对学习新的软件编程技术的基本学习方法：有一个具体客观驱动的目标，例如做一个真正要给客户用的软件，而不是“为了学习新技术提高自己”这类伪目标。

让我们直接上手：绘制一个距离左右边都有一定距离、固定高度、垂直居中的按钮，叫“Swift on iOS”。

第一步，从右侧拖过来一个按钮，置于页面最中间。会有参考线出现，这一步很容易：

选中这个 button，将按钮背景色和前景色进行如下设置：

将按钮左侧边界往左拖动直到自动吸附，留下一定的距离。右侧进行同样操作：

选中这个 button，修改文字为 Swift on iOS:

选中这个 button，点击 按钮2 ，选择这一项：

这时候 button 周围会出现一些蓝色的线条，这些就是 Auto Layout 的约束项。

3. 大功告成，查看效果
3.5寸:

4寸:

4.7寸:

5.5寸：

4. 分析
选中这个 button，在右侧查看自动生成的约束项：

只有三项，这三项的意思分别是：和父视图纵向居中对齐、右侧和父视图对齐、左侧和父视图对齐。

我们很容易就能理解这样可以定位一个按钮，但是总感觉少了点什么。实际上这三个自动生成的约束项并不能描述一个 button 的位置，因为少了一个关键的属性：button 的高度。以后我们会详细地讨论。

5. 核心思想
本质分析

Auto Layout 的本质是依靠 某几项约束条件 来达到对某一个元素的定位。我们可以在某个地方只使用一个约束，以达到一个小目的，例如防止内容遮盖、防止边界溢出等。但我的最佳实践证明，如果把页面上每一个元素的位置都用 Auto Layout 进行 “严格约束” 的话，那么 Auto Layout 可以帮我们省去非常多的计算 frame 的代码。

“严格约束” 是什么？

简单来说，严格约束就是对某一个元素的绝对定位，让它在任一屏幕尺寸下都有着唯一的位置。这里的绝对定位不是定死的位置，而是对一个元素 完善的约束条件。

让我们看图说话：

我们要在一个直角坐标系里描述一个矩形。
那么只需要指定这个矩形的位置和大小。
那么只要给出上图中的四个值即可：到左边界的距离，到上边界的距离，宽度，高度。
这四个约束是最简单的情况。在对一个元素进行严格约束时，请直接在脑中构建这个元素，并且加上几条约束条件，如果他无法缩放和动弹，那么严格约束就是成功的！
必须牢记，使用 Auto Layout 时最重要的是：对页面上每一个元素都进行严格约束，不严格的约束是万恶之源。

6.实现三等分
三等分设计思路

许多人刚开始接触 Auto Layout，可能会以为它只能实现上面的1、2功能，其实后面3、4两个功能才是强大、特别的地方。接下来我们将尝试设计横向三等分：

第一个元素距离左边一定距离。
最后一个元素距离右边一定距离。
三者高度恒定，宽度相等。（此处我们设置为高度恒定（height 属性），如果你需要的是固定长宽比，则需要设定 Aspect Ratio 属性）
1和2、2和3的横向间距固定。
干货，实现过程的动图：

运行结果

4 寸：

4.7 寸：

纵向三等分实现方式类似，大家可以自己尝试一下哦~

赞 (0)

相关推荐

  • iOS 中根据屏幕宽度自适应分布按钮的实例代码

    iOS 中根据屏幕宽度自适应分布按钮的实例代码

    下载demo链接:https://github.com/MinLee6/buttonShow.git 屏幕摆放的控件有两种方式,一种根据具体内容变化,一种根据屏幕宽度变化. 下面我分别将两个方式,用代码的方式呈现: 1:根据具体内容变化 // // StyleOneViewController.m // buttonShow // // Created by limin on 15/06/15. // Copyright © 2015年 信诺汇通信息科技(北京)有限公司. All rights

  • iOS中滑动控制屏幕亮度和系统音量（附加AVAudioPlayer基本用法和Masonry简单使用）

    iOS中滑动控制屏幕亮度和系统音量（附加AVAudioPlayer基本用法和Masonry简单使用）

    如图,左侧上下滑动改变亮度,右侧上下滑动改变音量. 1.改变屏幕亮度 //获得当前屏幕亮度 light = [UIScreen mainScreen].brightness; light = 0.5f; //直接赋值或者使用set方法皆可 [UIScreen mainScreen].brightness = light; 2.改变系统音量 使用的比较多的就是通过MPMusicPlayerController来改变系统音量,主要归功于MPMusicPlayerController的音量和系统的同步

  • iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

    iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

    在公司做项目一直使用Storyboard,虽然有时会遇到团队合作的Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算的.在之前的博客中也提到过,团队合作使用Storyboard时,避免冲突有效的解决方法是负责UI开发的同事最好每人维护一个Storyboard, 公用的组件使用轻量级的xib或者纯代码来实现.这样不但提高了开发效率,而且可以有效的避免Storyboard的冲突.如果每个人维护一个Storyboard, 遇到冲突了就以你自己的为准就OK了. 言归正传,

  • iOS开发中控制屏幕旋转的编写方法小结

    iOS开发中控制屏幕旋转的编写方法小结

    在iOS5.1 和 之前的版本中, 我们通常利用 shouldAutorotateToInterfaceOrientation: 来单独控制某个UIViewController的旋屏方向支持,比如: 复制代码 代码如下: - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation  {      return (interfaceOrientation == UIInter

  • iOS开发中使用屏幕旋转功能的相关方法

    iOS开发中使用屏幕旋转功能的相关方法

    加速计是整个IOS屏幕旋转的基础,依赖加速计,设备才可以判断出当前的设备方向,IOS系统共定义了以下七种设备方向:   复制代码 代码如下: typedef NS_ENUM(NSInteger, UIDeviceOrientation) { UIDeviceOrientationUnknown, UIDeviceOrientationPortrait,            // Device oriented vertically, home button on the bottom UIDe

  • iOS屏幕适配开发实用技巧

    一.旋转处理 第一步:注册通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changeFrames:) name:UIDeviceOrientationDidChangeNotification object:nil]; 第二步:处理接收事件 -(void)changeFrames:(NSNotification *)notification{ NSLog(@"change notifica

  • IOS开发中键盘输入屏幕上移的解决方法

    在IOS开法中经常会遇到键盘遮挡屏幕的事情(比如输入账号密码验证码等等),就使得原本都不大的屏幕直接占了一半甚至更多的位置,这倒无所谓,关键是挡住了下面的按钮.这样的话按钮的事件也就触发不了,最好的解决办法就是当输入这些信息的时候让整个屏幕上移一个键盘的位置,或者上移到指定的位置. 首先一般输入的话都用的是UITextField,所以要监听用户什么时候开始输入和什么时候结束输入,直接设置代理代理就行了,要遵受 UITextFieldDelegate协议. //遵循协议 @interface Vi

  • iOS屏幕根据键盘自动变化高度

    iOS屏幕根据键盘自动变化高度

    一.效果图 二.代码 ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController <UITextFieldDelegate> @end ViewController.m #import "ViewController.h" #define W [UIScreen mainScreen].bounds.size.width #define H [UISc

  • 总结iOS App开发中控制屏幕旋转的几种方式

    总结iOS App开发中控制屏幕旋转的几种方式

    在iOS6之前的版本中,通常使用 shouldAutorotateToInterfaceOrientation 来单独控制某个UIViewController的方向,需要哪个viewController支持旋转,只需要重写shouldAutorotateToInterfaceOrientation方法. 但是iOS 6里屏幕旋转改变了很多,之前的 shouldAutorotateToInterfaceOrientation 被列为 DEPRECATED 方法,查看UIViewController

  • iOS如何获取屏幕宽高、设备型号、系统版本信息

    iOS如何获取屏幕宽高、设备型号、系统版本信息

    介绍 在我学习Android开发的时候,觉得设备适配是件很头疼的事情,android的设备太多了,那时就很羡慕iOS开发的人不用操心适配的问题,而当我开始学习iOS开发后,iOS的屏幕也开始多种多样了起来...于是也得做适配了,sad... 之前也研究过,这里把我的方法记录下来,本文介绍三个常用的设备信息获取方式: 获取屏幕的宽高.用于在设置控件位置的时候计算相对屏幕的距离 获取设备的型号.5s和6+的屏幕大小相差很远,相应的控件位置.大小都需要做出调整,不然就会出现在6+上显得很空旷或者在5s

随机推荐