iOS通用适配

图片素材

iOS常用的切图为@1x、@2x和@3x,是为iOS程序开发不同分辨率的设备统一为一个尺寸而标记的。@3x就是@1x分辨率的3倍。

  • @1x 为非retina屏的iPhone。iPhone4以前,不包含4的手机需要使用这个标示。
  • @2x 为retina屏的iPhone准备。iPhone4/4s/5/5c/5s/6/6s/7 使用该标示。
  • @3x 专为iPhone Plus准备。iPhone 6/6s/7 Plus 使用该标示。

当对应图片缺少@3x时,Phone 6/6s/7 Plus会自动去拿@2x的图来使用,并同时放大1.5倍,缺少@2x和@3x时,Phone 6/6s/7 Plus会自动去拿@1x的图来用,并同时放大3倍,iPhone4/4s/5/5c/5s/6/6s/7会去拿@1x的图来用,并同时放大2倍,缺少@2x时,iPhone4/4s/5/5c/5s/6/6s/7会去拿@1x的图来用,并同时放大2倍。

一般适配iPhone提供支持@2x和@3x的iPhone切图,分辨率分别为750×1334和1440×2560。

平板适配

iOS对于iPhone和iPad可采用统一的适配方案,支持iPad首先需要在项目属性General下的Deployment Info,配置Devices为Universal,以支持所有通用平台。

Xcode配置支持平板

iPad2 的分辨率是768×1024,iPad Retina 是1536×2048。系统加载图片时,在 iPad2 上会加载 @1x 的图;在 1536×2048 的设备上,会加载 @2x 的图。

AppIcon

iOS AppIcon所需的分辨率分别为:

  • iPhone 29pt 2x = 58*58像素
  • iPhone 29pt 3x = 87*87像素
  • iPhone 40pt 2x = 80*80像素
  • iPhone 40pt 3x = 120*120像素
  • iPad 29pt 1x = 29*29像素
  • iPad 29pt 2x = 58*58像素
  • iPad 40pt 1x = 40*40像素
  • iPad 40pt 2x = 80*80像素
  • iPad 76pt 1x = 76*76像素
  • iPad 76pt 2x = 152*152像素
  • iPad 83.5pt 2x = 167*167像素

尺寸及字体适配

首先适配iPhone Plus机型,其他机型(包括iPad)的宽高和字体大小按照与iPhone Plus的宽高和字体大小比例进行调整。

通过打印输出可知iPhone Plus的宽度为414,高度为736。只需对当前机型的宽高与iPhone Plus的宽高分别进行比例运算,即可得到任意机型的相应于已经适配好的iPhone Plus的单位宽高。

字体可以取单位宽度,也可以取单位高度,视情况而定。

var w1: CGFloat!
var w10: CGFloat!
var h1: CGFloat!
var h10: CGFloat!
var s1: CGFloat!
var s10: CGFloat!

w1 = self.view.frame.width / 414.0  //单位宽度
w10 = w1 * 10
h1 = self.view.frame.height / 736.0  //单位高度
h10 = h1 * 10
s1 = h1  //单位字体大小
s10 = h10

由于iPhone和iPad的宽高比例存在较大差距,在某些场景下,机型比例适配也会存在适配不协调的问题,这时需要进行iPhone和iPad机型独立适配。添加一个设备类型判断即可。

if UIDevice.currentDevice().userInterfaceIdiom == UIUserInterfaceIdiom.Phone {
    ...
} else if UIDevice.currentDevice().userInterfaceIdiom == UIUserInterfaceIdiom.Pad {
    ...
}

版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/04/01/ios-universal-adaptation/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
iOS通用适配
图片素材 iOS常用的切图为@1x、@2x和@3x,是为iOS程序开发不同分辨率的设备统一为一个尺寸而标记的。@3x就是@1x分辨率的3倍。 @1x 为非retina屏的iPhone。iPh……
<<上一篇
下一篇>>
文章目录
关闭
目 录