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 {
    ...
}
上一篇 深度学习基础:概率论(1)_正态分布(高斯分布)
下一篇 Android自定义支持多层嵌套RadioButton的RadioGroup
目录
文章列表
1 Android - Walle(新一代多渠道打包工具)
Android - Walle(新一代多渠道打包工具)
2
Atlas Demo解析
Atlas Demo解析
3
高中数学基础:函数的极限及自然常数e的由来
高中数学基础:函数的极限及自然常数e的由来
4
设计模式(12)观察者模式
设计模式(12)观察者模式
5
CentOS下部署Prometheus
CentOS下部署Prometheus
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。