前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS-屏幕适配基本概念

iOS-屏幕适配基本概念

作者头像
xy_ss
发布2023-11-22 09:30:07
3100
发布2023-11-22 09:30:07
举报
文章被收录于专栏:浮躁的喧嚣浮躁的喧嚣

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 能做的,纯代码都能做而他们不能做的,纯代码也能做
    • 对大型项目、团队开发都很友好,尤其是在版本控制,代码管理方面。唯一的缺点就是繁琐以及代码量大
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-01-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • iOS设备的分辨率和尺寸(参考The Ultimate Guide To iPhone Resolutions)
    • 分辨率
      • iOS 各个设备对应的分辨率
      • 设计和开发之间的多屏适配问题
        • 现在iPhone的屏幕尺寸也不再单一,那么现在以怎样的流程来进行iOS的研发更合适呢?
          • 多屏适配规范
          • 关于xib、storyboard、代码
            • xib和StoryBoard
              • xib和代码区别
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档