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

http://www.jianshu.com/p/6b379ce91d67

 
 

  
  
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文件内容如下：
  
  


   
   

   
   


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

作者：amdops
链接：http://www.jianshu.com/p/6b379ce91d67
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。