IOS项目新手引导页图片适配方案

IOS项目新手引导页图片适配方案,第1张

基本上每个IOS APP都会有新手引导页面这个功能,常规的就是几张静态图片,可以左右滚动。既然涉及到图片,就肯定会存在适配的问题(为了达到最优的体验效果,一般都会针对不同的分辨率设计不同尺寸的图片),本文主要就是讨论如何适配的问题。

2.1 方案一

根据屏幕分辨率的不同,使用不同的图片。

2.2  方案二

熟悉IOS开发的人都知道,每一个ios项目中,都有一个Assets.xcassets文件夹,用来管理项目中所有的图片(AppIcon、LaunchImage、其他业务图片)。

从上面的截图我们可以看到,xcode提供了两个内置的类型AppIcon、LaunchImage。我们只要提供正确尺寸的图片,ios系统就能在不同分辨率的设备上使用对应的图片而无需我们自己指定;另外就是我们自己创建的(avatar),提供2x、3x这两种类型的图片即可(1x的设备现在基本上找不到了,而且当前的ios系统也不支持1x的设备)。那么问题来了,我们自己创建的图片集合,只有3个类型(1x、2x、3x),并不能按照分辨率来设定。再看一下上面的截图,有一个“show”的图片集合,形式如下:

咦!这个鬼东西是怎么搞出来的?我们先看看Assets.xcassets文件夹在硬盘上的组织形式:

从上图我们可以看到,系统内置的两种类型AppIcon、LaunchImage对于的文件夹为AppIcon.appiconset、LaunchImage.launchimage,我们自己创建的图片集合avatar对应的文件夹为avatar.imageset。讲到这里,你应该大概猜到了show这个图片集合是怎么创建出来了吧?

1、先创建一个LaunchImage类型的图片集合;

2、修改名称(LaunchImage→show)

3、修改文件夹名称(show.launchimage→show.imageset)

回到正题,在show这个图片集合里面,我们就可以轻松的根据分辨率设置2x、3x类型的图片。

现在我们可以按照下图的方式使用新手引导图片了:

亲测:不同分辨率的设备,展示对应的图片。

我们注意到,show.imageset文件夹中有一个文件Contents.json,正是这个文件,ios系统才能根据设备类型展示对应的图片资源。Contents.json文件内容如下:

系统展示图片的时候,会先解析这个文件,然后根据设备的分辨率,找到对应的图片。

首次启动页,第一次启动才出现的页面引导页,也是首次启动引导用户的吧,两个是一个意思

如果你说的引导页是启动图也就是LuanchImage的话,除非自定义一个viewcontroller代替启动图,让它在你需要的时候出现,这样的弊端是启动时屏幕要黑一下

A.活图(即可灵活配置,资源图不需要受限于发版本)

B.死图(资源图写在app内,替换时需要发版本)

输出资源】

欢迎页/闪屏页-----输出750*1334和1125*2436px两张资源图

*注: 1125*2436px与iPhoneXS 【375*812】 、 iPhoneXR 【414*896】 、 iPhoneXS Max 【414*896】 等宽等高,所以开发GG等宽等高缩放即可适配

750*1334px与iPhoneSE 【320*560】 、 iPhone8 【375*667】 、 iPhone 8 Plus 【414*736】 等宽等高,所以开发GG等宽等高缩放即可适配

---------------------------------------(举例)----------------------------------

广告页-----根据自己家app需求选择

方案一:输出1125*2436px一张资源图(内容安全区域:1242*2001px)

*注:1125*2436px与iPhoneXS【375*812】、iPhoneXR【414*896】、iPhoneXS Max【414*896】等宽等高,所以等宽等高缩放即可适配

750*1334px与iPhoneSE【320*560】、iPhone8【375*667】、iPhone 8 Plus【414*736】适配方式为:等宽,居中对齐,裁剪上下内容。

---------------------------------------(举例京东)----------------------------------

方案二:输出750*1334和1125*2436px两张资源图(与欢迎页闪屏页活输出同尺寸资源图适配方式一样)

2.死图(资源图写在app内,替换需要发版本)

死图适配方式-----输出所需尺寸PNG资源图并压缩给RD

尺寸为:

根据自己家app的需求选择相应的实现方式,并输出相应资源图。

引导页-一般内容为版本更新的功能介绍和说明,通常情况下是和发版本一起更新的,所以一般情况是传死图的方式。

---------------------------------------(重要事情说三遍)----------------------------------

输出资源图为png、输出资源图为png、输出资源图为png、压缩、压缩、压缩!!!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11758505.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存