iOS屏幕适配发展历程

iOS屏幕适配发展历程

早期 iOS —— frame + autoresizing

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

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

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

使用 autoresizing 进行屏幕适配

  • 随着 iPad 的发布, 屏幕物理大小发生了变化
  • 并且苹果建议,如果没有特殊原因,在 iPad 上运行的程序如果没有特殊原因,应该支持横竖屏切换
  • 因此:不能把控件的 frame 都写死了,需要进行屏幕适配

为了解决屏幕适配需求,苹果同时推出了第一个屏幕适配解决方案:autoresizing

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

autoresizing 只能设置当前控件与父控件之间的相对关系

iOS 6 —— autolayout(自动布局)

  • 随着 iPhone5 \ iPhone5s 等的发布苹果设备不同尺寸的屏幕变得越来越多, 不仅要求能根据控件父子关系来设置相对位置,也要求能根据任意控件之间的关系来设置位置
  • 因为 autoresizing 只能设置当前控件与父控件之间的相对关系,当遇到要设置兄弟控件之间的关系的时候 autoresizing 就无能为力了
  • autolayout 技术主要解决的问题:控件位置的参照关系不再局限于父控件

iOS 8 —— size classes + autolayout

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

iOS 9 —— size classes + autolayout + StackView

  • Stack View 的核心便是方便垂直水平排布多个 subview
  • 类似于 android 的 LinearLayout
  • Stack View 最有用的就是它会自动为每个 subview 创建和添加 Auto Layout 约束,程序员可以
    • 通过选项配置subview的大小、排布以及彼此间的间距

      使用 stackview 主要简化在线性方向上,重复设置控件布局约束的问题

小结

  • 通过代码计算 frame,没有屏幕适配
  • Autoresizing

    • 设置控件与父控件的相对关系,从而实现间接设置frame
    • iOS 系统在运行时会根据设置的规则,间接计算出对应的 frame,无需手动计算frame
    • 通过设置子控件与父控件的关系来决定如何显示控件
  • Autolayout

    • 通过设置某控件与任意其他控件间的关系来决定如何显示这个控件
    • 不再仅仅局限与父子控件
    • 是 iOS 程序员必须掌握的技术
      • Interface Builder
      • 纯代码
      • 框架 Masonry(OC) + SnapKit(Swift)
  • size classes

    • 解决在一个正方形的界面上同时设置 任意设备 的自动布局
    • 用 Interface Builder 设置比较方便,但是纯代码写起来会比较繁琐
  • StackView

    • 解决线性方向上控件布局
    • 是对自动布局的简化

注意

  • 无论是通过 autoresizing 还是 autolayout 其实只是间接设置了控件的 frame

    • 所以一旦使用了 autoreszing 或者 autolayout 那么就不要在直接设置 frame 了,否者可能产生混乱
    • 所有的控件的 frame 由底层 布局系统 计算完成
  • autoresizingautolayout 二者是互斥的,同时只能使用其中一种

    • 当使用 autoresizing 的时候无法使用 autolayout
    • 当使用 autolayout 的时候必须禁用 autoresizing

Interface Builder 中默认开启自动布局

在代码中,默认支持 autoresizing


你可能感兴趣的:(UI类)