iOS屏幕适配概述1 屏幕适配简介2 Autoresizing3 Auto Layout

2018-06-28 12:27:32 浏览数 (1)

[toc]

1 屏幕适配简介

1.1 屏幕发展历史

手机型号 |屏幕大小 | 分辨率 ------------ | ------------- 4, 4S |3.5 | 320480 5,5C,5S | 4 | 320568 6,6S , 7 | 4.7 | 375667 6Plus, 6S Plus, 7 Plus | 5.5 | 414736 iPAD | 9.7 | 7681024 iPAD Pro | 12.9 | 10241366

1.2 适配技术发展史

iOS版本 | 适配技术 | Xcode版本 | 正式版发布时间 | 手机机型 ----------|----------- |-----------|----------- iOS 5 | Autoresizing | Xcode4.2 | 2011年10月13日 | iPhone 4S iOS 6 | Auto Layout | Xcode4.5 | 2012年09月20日 | iPhone 5 iOS 8 | Size Classes Auto Layout | Xcode6.0.1 | 2014年09月17日 | iPhone 6 iOS 9 | Size Classes Auto Layout StackView |Xcode7.0 | 2015年09月28日 | iPhone 6S

1.3 适配技术介绍

代码语言：javascript复制
直接使用 frame 计算控件的位置

特点：程序中存在大量的 MagicNumber

iPhone iPhone3G  iPhone3GS  iPhone4  iPhone4S 屏幕的物理尺寸是一样的(无需屏幕适配)
而且一个应用要么是横屏要么是竖屏, 几乎不存在能同时进行横竖屏切换的应用
应用程序都是竖屏
游戏几乎都是横屏
官方应用大多支持横竖屏
代码语言：javascript复制
使用 Autoresizing 进行屏幕适配

随着 iPad 的发布, 屏幕的物理尺寸发生了变化
并且苹果建议，在 iPad 上运行的程序如果没有特殊原因，应该支持横竖屏切换
因此：不能把控件的 frame 都写死了，需要进行屏幕适配
为了解决屏幕适配需求，苹果同时推出了第一个屏幕适配解决方案：Autoresizing

Autoresizing 的核心思想就是：参照父容器来设置子控件的 frame
不再写死 frame, 而是参照父容器
举例：在竖屏下有一个按钮要占据整个屏幕宽度, 当切换到横屏以后同样要占据整个屏幕的宽度

Autoresizing 只能设置当前控件与父控件之间的相对关系
代码语言：javascript复制
iOS 6 —— Auto Layout（自动布局）

随着 iPhone5  iPhone5s 等的发布苹果设备不同尺寸的屏幕变得越来越多, 不仅要求能根据控件父子
关系来设置相对位置，也要求能根据任意控件之间的关系来设置位置因为 Autoresizing 只能设置当前控件
与父控件之间的相对关系，当遇到要设置兄弟控件之间的关系的时候 Autoresizing 就无能为力了
举例: 在竖屏下, 屏幕底部有两个按钮，这两个按钮的间距为一个固定的值（宽度不指定）
当切换为横屏的时候要求这两个按钮还显示在屏幕底部
并且按钮间的间距不变, 按钮可以随之变宽

Auto Layout 技术主要解决的问题：控件位置的参照关系不再局限于父控件
代码语言：javascript复制
iOS 8 —— Size Classes   Auto Layout

使用 Size Classes   Auto Layout 进行屏幕适配
当 iPhone6 发布以后，苹果设备的屏幕越来越多(以后也可能出现更多不同大小的屏幕)，为了能更容易的适配不同
的屏幕，苹果推出了 Size Classes 技术
通过 Auto Layout 设置的约束，约束一旦添加就会应用于各种屏幕（也就是说在
各种不同的屏幕下都使用相同的约束）
通过 Size Classes   Auto Layout 的方式, 可以为不同尺寸的屏幕设置不同的约束 
举例: iPhone 下的计算器，在横屏、竖屏下的不同表现

Size Classes 技术主要解决的问题: "主要解决了iPhone横竖屏适配及iPhone和iPad开发时共用一个SB的问题"
代码语言：javascript复制
iOS 9 —— Size Classes   Auto Layout   StackView

StackView 的核心便是方便垂直或水平排布多个 subview
类似于 android 的 LinearLayout
StackView 最有用的就是它会自动为每个 subview 创建和添加 Auto Layout 约束，程序员可以
通过选项配置subview的大小、排布以及彼此间的间距
使用 stackview 主要简化在线性方向上，重复设置控件布局约束的问题

2 Autoresizing

  • 只是为了介绍, 以后不要用 Autoresizing，都用 Auto Layout
  • 一定记住：在一个视图中 Autoresizing 和 Auto Layout 只能用其一,通过 Autoresizing 解决布局问题，首先取消掉 Auto Layout

2.1 StoryBoard中使用Autoresizing

注意 ⚠️：子控件和父控件贴边的时候，有特殊情况。

2.1.1 外面四根线

  • 表示子控件距离父控件的四周边距是否固定

2.1.2 里面两根线

  • 子控件的宽高是否随着父控件的宽高变化

2.2 代码中使用Autoresizing

  • AutoresizingMask 属性。代码就只用这个。
代码语言：javascript复制
redView.AutoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

3 Auto Layout

3.1 在StoryBoard 中使用

核心公式

代码语言：javascript复制
firstItem.firstAttribute {==,<=,>=} secondItem.secondAttribute * multiplier   constant

注意:如果firstItem.firstAttribute和secondItem.secondAttribute调换位置后注意multiplier和constant值的变化

3.2 通过代码修改constraints in AutoLayout

  • 将constraints连线属性
  • 调用属性，重新赋值就可以了。
  • 更改约束后,在block动画中调用layoutIfNeeded
代码语言：javascript复制
//修改constraints不代表直接改了frame，谁调用此方法，就会让自己及内部所有子控件立即根据constraints 更新 frame
[self. view layoutIfNeeded];

3.3 代码中使用AutoLayout的注意点:

3.3.1 规则一

代码语言：javascript复制
1.要先禁止Autoresizing功能，设置view的下面属性为NO
约束要作用的view.translatesAutoresizingMaskIntoConstraints = NO;
2.添加约束之前，一定要保证相关控件都已经在各自的父控件上
3.不用再给控件设置frame

3.3.2 规则二

代码语言：javascript复制
1.如果添加的约束和其它控件没有关系, 要添加到自己身上"也可以添加在父控件上"
2.如果是父子关系, 设置子控件的约束, 约束要添加到父控件上
3.如果是兄弟关系, 设置两兄弟的约束, 约束要添加到它们最近的共同父控件上

示例图如下：

ios xcode 游戏 容器

0 人点赞