服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS应用开发中使用Auto Layout来适配不同屏幕尺寸

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

2021-01-09 17:22JohnLui IOS

这篇文章主要介绍了iOS应用开发中使用Auto Layout来适配不同屏幕尺寸的方法,根据Xcode IDE下的实际调试步骤讲解其用法,需要的朋友可以参考下

简介
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,如下:

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

点击选中 main.storyboard,右侧内容如下:

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

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

2. 直接上手,开始使用

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

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

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

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

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

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

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

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

选中这个 button,修改文字为 swift on ios: 

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

选中这个 button,点击 按钮2 ,选择这一项: 

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

这时候 button 周围会出现一些蓝色的线条,这些就是 auto layout 的约束项。

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

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

4寸: 

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

4.7寸: 

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

5.5寸:

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

 

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

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

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

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

5. 核心思想
本质分析

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

“严格约束” 是什么?

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

让我们看图说话:

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

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

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

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

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

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

运行结果

4 寸:

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

4.7 寸:

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

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

延伸 · 阅读

精彩推荐
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28