美文网首页
iOS-屏幕适配基本概念

iOS-屏幕适配基本概念

作者: 皆为序幕_ | 来源:发表于2020-01-13 11:12 被阅读0次

iOS设备的分辨率和尺寸(参考The Ultimate Guide To iPhone Resolutions)

分辨率

  • 点(point): 开发过程中,所有基于坐标系的绘制都以point为单位,point和屏幕上的像素是一一对应的

  • 渲染像素(Render Pixels):以point为单位绘制最终渲染成pixels,这个过程被称为光栅化,基于point的坐标系乘以比例因子可以得到基于像素的坐标系,高比例因子会使更多的细节展示,目前的比例因子会是1x,2x,3x

  • 物理像素(Physical Pixels): 设备屏幕实际像素

  • 设备屏幕的物理长度(Physical Device):设备的物理长度,使用英寸作为单位,比如iPhone8是4.7英寸,iPhone11是6.1英寸等,这里的数字是指手机屏幕对角线的物理长度,实际上会是Physical Pixels的像素值会渲染到该屏幕,而不是Render Pixels的像素值,屏幕上会有PPI(Pixels-per-inch)的特性,PPI的值告诉你每英寸会有多少像素渲染

iOS 各个设备对应的分辨率

机型 屏幕宽高(point) 渲染像素(pixel) 物理像素(pixel) 屏幕对角线长度(英寸) 屏幕模式
Phone 5,5s,5c,se 320 * 568 640 * 1136 640 * 1136 4(326 PPI) 2x
Phone 6,6s,7,8 375 × 667 750 * 1334 750 * 1334 4.7(326PPI) 2x
Phone 6p,6sp,7p,8p 414 * 736 1242 * 2208 1080 * 1920 5.5(401PPI) 3x
Phone X,Xs,11Pro 375 * 812 1125*2436 1125*2436 5.8(458PPI) 3x
Phone 11,Xr 414*896 828*1792 828*1792 6.1(326PPI) 2x
Phone 11Pro Max,Xs Max 414*896 1242 *2688 1242 *2688 6.5(458PPI) 3x
iPad 4,5,Air,Air2,mini3,mini4 1024×768 2048×1536 2048×1536 9.7(264ppi) 2x
iPad Pro 1366*1024 2732×2048 2732×2048 12.9(264ppi) 2x

屏幕模式(1x, 2x, 3x):描述的就是屏幕中一个点有多少个 Rendered Pixels 渲染,对于2倍屏(又称 Retina 显示屏),会有 2 * 2 = 4 个像素的面积渲染,对于3倍屏(又称 Retina HD 显示屏),会有 3 * 3 = 9 个像素的面积渲染

iOS 开发中,所有控件的坐标以及控件大小都是以点为单位的,假如我在屏幕上需要展示一张 20 * 20 (单位:point)大小的图片,那么设计师应该怎么给我图呢?

这里就会用到屏幕模式的概念,如果屏幕是 2x,那么就需要提供 40 * 40 (单位: pixel)大小的图片,如果屏幕是 3x,那么就提供 60 * 60 大小的图片,且图片的命名需要遵守以下规范:

Standard:<device_modifier>.<filename_extension>
High resolution:@2x<device_modifier>.<filename_extension>
High HD resolution:@3x<device_modifier>.<filename_extension>

ImageName: 图片名字,根据场景命名
device_modifier: 可选,可以是 ~ipad 或者 ~iphone, 当需要为 iPad 和 iPhone 分别指定一套图时需要加上此字段
filename_extension: 图片后缀名,iOS中使用 png 图片

例如:
MyImage@2x.png - 2x 显示屏自动加载的图片版本
MyImage@3x.png - 3x 显示屏自动加载的图片版本
MyImage@2x~iphone.png - 2x iPhone 和 iPod touch 显示屏自动加载的图片版本
MyImage@3x~iphone.png - 3x iPhone and iPod 显示屏自动加载的图片版本


设计和开发之间的多屏适配问题

现在iPhone的屏幕尺寸也不再单一,那么现在以怎样的流程来进行iOS的研发更合适呢?

一个基本思路是:
选择一种尺寸作为设计和开发基准
定义一套适配规则,自动适配剩下两种尺寸
特殊适配效果给出设计效果

这个问题很早之前在知乎上已经被讨论,附上链接:手机淘宝设计师pigtwo的回答

多屏适配规范

  • 文字流式
  • 控件弹性
  • 图片等比缩放
多屏适配.jpg

控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在垂直方向上可以显示更多内容,发挥大屏幕的优势


关于xib、storyboard、代码

xib和StoryBoard

  • xib:每个viewcontroller对应单独的xib,可以更加方便单独管理,项目也方便多人一起开发,改动视图方便,不用全局改动

  • StoryBoard:StoryBoard是一个包含了多个xib的文件,管理方便,在StoryBoard中不仅可以看到每个 ViewController的布局样式,也可以知道各个ViewController之间的转换关系

  • 区别

    • 项目大的话,xib文件过多,不容易统一管理。跳转只能在代码实现,比较混乱
    • StoryBoard适合单独开发并且是中小型项目的时候使用

xib和代码区别

  • xib优缺点

    • xib可视化,开发速度快,代码量少
    • 合作开发,彼此阅读困难,无法在git上查看历史改动,容易造成冲突,造成冲突后难以解决,容易产生不必要的commit
    • 性能上,xib加载慢,打开速度也慢,而且会占用app包的体积
  • 代码优缺点

    • 灵活,方便,所有的属性都可以通过代码来控制,简单来说,xib 能做的,纯代码都能做而他们不能做的,纯代码也能做
    • 对大型项目、团队开发都很友好,尤其是在版本控制,代码管理方面。唯一的缺点就是繁琐以及代码量大

相关文章

  • iOS-屏幕适配基本概念

    iOS设备的分辨率和尺寸(参考The Ultimate Guide To iPhone Resolutions) ...

  • 屏幕适配

    基本概念 适配 概念:适合兼容各种不同的情况系统适配:针对不同系统版本进行适配屏幕适配:针对不同大小的屏幕尺寸进行...

  • 给Android初学者的一些屏幕单位汇总

    关于Android的屏幕适配,推荐大神的文章:Android 屏幕适配:最全面的解决方案: 基本概念:1.dpi:...

  • IOS 屏幕适配(一)理论篇

    @[TOC](IOS 屏幕适配(一)理论篇) 1. IOS 屏幕适配基本概念 1.1 IOS 设备的尺寸和分辨率 ...

  • iOS-屏幕适配

    一. 屏幕适配历史 iphone3gs-4sframe直接写死。 ipad:autoresizing根据父控件的f...

  • Android屏幕适配(2) — drawable与mipmap

    前言 上节我们讲到了屏幕适配的几个基本概念。大家感兴趣的可参考Android屏幕适配(1) — 概念解释[http...

  • iOS-屏幕适配实现

    常见布局方式 固定间距 :不同尺寸下,间距总是固定的 流式布局 : 文字、图片等在不同屏幕下流式排布,比如大屏下一...

  • iOS-屏幕适配(一)

    iOS设备的分辨率和尺寸 (参考The Ultimate Guide To iPhone Resolutions[...

  • 屏幕适配基本概念

    一、为什么要适配 由于Android系统的开放性,任何用户、开发者、硬件厂商、运营商都可以对Android系统和硬...

  • iOS-屏幕适配实现(VFL)

    VFL简介 VFL全称是Visual Format Language(可视化格式语言),它简化了Autolayou...

网友评论

      本文标题:iOS-屏幕适配基本概念

      本文链接:https://www.haomeiwen.com/subject/bawsoctx.html