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

[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 适配技术介绍

直接使用 frame 计算控件的位置

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

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

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

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

Autoresizing 只能设置当前控件与父控件之间的相对关系
iOS 6 —— Auto Layout(自动布局)

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

Auto Layout 技术主要解决的问题:控件位置的参照关系不再局限于父控件
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的问题"
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 属性。代码就只用这个。
redView.AutoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

3 Auto Layout

3.1 在StoryBoard 中使用

核心公式

firstItem.firstAttribute {==,<=,>=} secondItem.secondAttribute * multiplier + constant 

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

3.2 通过代码修改constraints in AutoLayout

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

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

3.3.1 规则一

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

3.3.2 规则二

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

示例图如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员叨叨叨

私人订制Android本地图片选择器

史上最强的安卓图片选择器——GalleryFinal; 简书博客地址——http://www.jianshu.com/p/48ddd6756b7a

973
来自专栏hrscy

怎样在 Unity 中创建 UI

在现在每一个软件应用中,用户界面(UI)都是核心的特征。游戏也没有抛弃这一规则。有非常多的游戏都使用 UI 来显示一些信息,比如生命值,技能,地图,武器的弹药,...

862
来自专栏韩东吉的Unity杂货铺

零基础入门 15: UGUI Button

按钮对于一个应用或者游戏来说。必不可少,今天这篇分享,来说下UGUI里的按钮,Button组件。

961
来自专栏谦谦君子修罗刀

react-navigation,刷新你的导航一、属性介绍二、案例

在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: ...

9739
来自专栏青蛙要fly的专栏

Android技能树 — Drawable小结

我们知道平常使用最多的Drawable可能是图片了,我们知道一个图片的原本的尺寸,比如下面这个图:

441
来自专栏向治洪

android顶部导航条

  今天给大家介绍在Android中实现顶部导航菜单左右滑动效果的二种解决方案。   第一种解决方案:    在以前的一篇博文中我使用android-su...

4185
来自专栏HTML5学堂

前端特效制作 | CSS3圆形风格面包屑导航

HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

3436
来自专栏web编程技术分享

【H5 音乐播放实例】第一节 音乐详情页制作(1)

1316
来自专栏青青天空树

认识基本的mfc控件

  几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

632
来自专栏达摩兵的技术空间

移动web端常见bug汇总001

本文是摘录整理了移动端常见的一些bug以及解决方案,第一篇,后面还会有持续的文章更新整理。

564

扫码关注云+社区