美文网首页iOS开发资料收集区
IOS项目新手引导页图片适配方案

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

作者: amdops | 来源:发表于2017-06-14 14:43 被阅读5047次

1. 背景

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

2. 方案

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类型的图片。

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

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

3、原理

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

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

相关文章

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

    1. 背景 基本上每个IOS APP都会有新手引导页面这个功能,常规的就是几张静态图片,可以左右滚动。既然涉及到图...

  • iOS 新手引导页图片适配方案

    其实Apple是没有要求上架的APP必须要有引导页的,只不过APP引导页已经成为一种用户习惯,所以公司很多公司的A...

  • iOS 新手引导页图片适配

    早期新手引导页只需要几张图片就可以解决了,随着屏幕尺寸的的越来越多,新手引导页的尺寸适配起来越来越麻烦,否则就会出...

  • iOS 新手引导页图片适配及其尺寸

    使用Assets.xcassets来管理引导页图片,将指定分辨率的图片放入指定的位置,使用时只需要拿到图片名,图片...

  • 联想--次留影响因素

    1、新手引导 新手引导的分节点流失统计 不同新手引导方案的次留比较 2、机型适配 次日流失用户的机型分布 3、美术...

  • iOS开发之iOS11与iPhone X适配

    iOS11和iPhoneX适配 iOS11和iPhone X的适配 iOS引导页的镂空效果 iOS 人机交互指南 ...

  • iOS适配启动页

    iOS适配启动页 iOS适配启动页

  • iOS 引导页适配

    1,图片适配,最早以前是自己命名规范,例如@1x,@2x,@3x等,3套图基本上就够用了 2,在iPhone X之...

  • iOS引导页适配

    为提高用户体验,引导页基本已经成为了一种不要配置,但是随着苹果屏幕尺寸的增多适配也成为了一种麻烦。 下面是常用的两...

  • iOS新手引导--GuideImageView(二)

    iOS新手引导--GuideImageView(一)iOS新手引导--GuideImageView(二)iOS新手...

网友评论

    本文标题:IOS项目新手引导页图片适配方案

    本文链接:https://www.haomeiwen.com/subject/enpsqxtx.html