Cordova-iOS 启动图 (launch storyboard images) 规范

原文链接:https://blog.csdn.net/lovelyelfpop/article/details/79369133

Size Class 尺寸类别

iOS8 推出的Size Class, 可以让我们在一个工程的 storyboard(故事板) 中进行所有尺寸屏幕的适配, 不仅是iPhone 4s、5/5s、6、7、8Plus,还包括iPad界面. 它引入了一种新的概念,抛弃传统意义上我们适配时所谓的具体宽高尺寸, 把屏幕的宽和高分别分成两种情况: Compact-紧凑, Regular-正常(Any-任意, 其实就是这2种的组合). 搭配起来是3*3, 也就是无论如何变化, 加起来也就9种,如图:
这里写图片描述

再来看一组数据和一张图(国外一位博主给出的,很形象):

iPhone4S,iPhone5/5s,iPhone6
竖屏:(w:Compact h:Regular)
横屏:(w:Compact h:Compact)

iPhone6 Plus
竖屏:(w:Compact h:Regular)
横屏:(w:Regular h:Compact)

iPad
竖屏:(w:Regular h:Regular)
横屏:(w:Regular h:Regular)

这里写图片描述

Cordova 启动图

之前一直是为不同设备不同分辨率分辨设计一个启动图,当有新分辨率的ios设备出来,需要重新为其制作启动图。

<splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
<splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
<splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
<splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>

现在为了 适配 iphone X 的全屏,只能利用 Storyboard 作为启动图。

优点:

  • 最简单的情况下,1张启动图即可适配任意屏幕;
  • 只要苹果继续使用上述 size classes,以后出现新设备将不需要重新制作启动图;
  • 甚至支持分屏下的展示

注意:

  • 启动图不为具体设备而设计
  • 图像会被缩放(但是保持宽高比)以适应不同屏幕
  • 图像四周会被裁剪,被裁剪的区域大小根据屏幕不同而不同
  • 不必为每一种设备、分辨率和屏幕方向都设计启动图,ios 会自动选取合适的启动图进行缩放、裁剪并展示

Launch storyboard images 规范

  • 重要的元素,比如图标、文字、标题 应该居中,你需要在不同设备上测试,保证重要的内容不会被裁减掉。可以利用这个Github项目来模拟预览各种设备和屏幕的效果
  • 使用简单的颜色。如果您使用两种颜色,您需要一种颜色填充图像的上半部分,第二种填充下半部分。如果使用渐变,则可能需要确保渐变的中间与图像的中心对齐。
  • 不要担心像素级别的完美 - 因为图像是缩放的,所以几乎没有机会使图像完美地适合像素点。由于所有支持的iOS设备都使用视网膜屏幕,因此无论如何用户都很难注意到它。

了解 Scale(尺度),Idioms(惯用语) 和 Size Classes(尺寸类别) 的概念对于有效使用 launch storyboard images 至关重要。

Scale 尺度

scale 设备
1x 所有非视网膜屏幕的设备
2x 大部分视网膜屏幕的设备
3x iPhone 6+/6s+,7s+

一般, 你要提供 2x 和 3x 的图像. 因为现在 Cordova 只支持视网膜屏, 所以不需要提供 1x 图像.

Idioms 惯用语

idiom 设备
ipad 所有 iPad
iphone 所有 iPhone 和 iPod Touch
universal 所有设备

右边只需要提供 universal 图片即可,除非你要对特定的设备进行微调。

Size classes 尺寸类别

有两种尺寸等级适用于两个屏幕轴。窄的可视区域被认为是“紧凑”尺寸类别,其余被视为“常规”类别。然而,当向Xcode提供图像时,必须在“any&com”和“any&regular”之间进行选择。为了与本地术语保持一致,此功能将基于“any”和“com”进行匹配。any将匹配常规大小的可视区域。
注意:com是“compact”的缩写。

宽度 高度 屏幕方向
any any any 任意
com any portrait 竖屏
any com landscape (wide) 宽的横排
com com landscape (narrow) 窄的横排

单图像启动屏幕

如果您的启动图像很简单,则可以避免创建大量不同的启动图像,并只提供一个。图片需要满足以下要求:

  • 图像应该是方形的
  • 图像应该足够大以适应 iPad Pro 12.9“:2732x2732
  • 任何重要的东西都应该放在中心
  • 请记住,根据可视区域,图像会被裁剪,而且裁剪得可能相当严重。

您可以将其添加到您的项目中,方法如下config.xml:

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />

由于只提供一个图像,因此iOS会在各种情况下使用它。

多图像启动屏幕

如果一个启动图像不能满足您的需求,您可能需要提供至少六个或更多图像。此外,请记住,不可能将图像微调到特定设备,而只能调整到某一类设备,显示系数和可视区域大小。

如果您不需要将图像定位到特定的惯用语,则应创建六张图像,如下所示:

规模 惯用语 宽度 高度 尺寸 文件名
2x* universal any any 2732x2732 Default@2x~universal~anyany.png
2x universal com any 1278x2732 Default@2x~universal~comany.png
2x universal com com 1334x750 Default@2x~universal~comcom.png
3x* universal any any 2208x2208 Default@3x~universal~anyany.png
3x universal any com 2208x1242 Default@3x~universal~anycom.png
3x universal com any 1242x2208 Default@3x~universal~comany.png

*意思是 如果在 iOS 这个尺度和惯用语中使用其他图像,那么这个图像是必需的。

注意:如果3x尺寸太小,那是因为目前只有一个设备类具有3倍密度:iPhone 6 + / 6s + / 7 +。
上面的代码片段如下config.xml:

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<splash src="res/screen/ios/Default@2x~universal~comany.png" />
<splash src="res/screen/ios/Default@2x~universal~comcom.png" />
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anycom.png" />
<splash src="res/screen/ios/Default@3x~universal~comany.png" />

如果需要根据设备做进一步微调,可以这样做。这可能看起来像这样:

规模 惯用语 宽度 高度 尺寸 文件名
2x* iPhone any any 1334x1334 Default@2x~iphone~anyany.png
2x iPhone com any 750x1334 Default@2x~iphone~comany.png
2x iPhone com com 1334x750 Default@2x~iphone~comcom.png
3x* iPhone any any 2208x2208 Default@3x~iphone~anyany.png
3x iPhone any com 2208x1242 Default@3x~iphone~anycom.png
3x iPhone com any 1242x2208 Default@3x~iphone~comany.png
2x* iPad any any 2732x2732 Default@2x~ipad~anyany.png
2x iPad com any 1278x2732 Default@2x~ipad~comany.png

*意思是 如果在 iOS 这个尺度和惯用语中使用其他图像,那么这个图像是必需的。

上面的内容如下所示config.xml:

<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />

已知问题

  • app可能无法显示新改变的图像。iOS会缓存启动图像,这意味着你可能仍然会看到旧的启动图像。你应该:删除应用程序,或重置内容和设置(模拟器)。

  • 如果你提供了 anycom,comany,comcom 中的一种或几种,你还必须提供相同的惯用语和尺度的 anyany 版本。 否则,anycom,comany,comcom 将不会被使用。

启动图示例:

效果:

这里写图片描述

这里写图片描述

这里写图片描述

下面几个项目里面有示例启动图文件

https://github.com/kerrishotts/lsb-example-simple
https://github.com/kerrishotts/lsb-example-complex
https://github.com/kerrishotts/launch-storyboard-images-previewer

参考

https://medium.com/@photokandy/phonegap-build-supports-ios-launch-storyboards-44a4180bfafe

相关文章
相关标签/搜索