天天品尝iOS7甜点 Day2：Asset Catalog

Asset Catalogs (资产分类)，它可以管理物理图像文件和这些文件的上下文信息。

参考：

• GitHub 源码：shinobicontrols/iOS7-day-by-day
• 天天品尝iOS7甜点 :: Day 1 :: NSURLSession
• 知乎专栏：iOS 温习之路 ” Bundle “

Asset Catalog - 资产分类

• 资产分类目录由一些图像的集合、app图标和app启动页构成。
• 新建工程时，Xcode 会自动创建一个名为 Assets.xcassets 的文件夹。
• Asset catalogs 是存在在硬盘上面的一个目录，由Xcode进行管理。它以特定的方式进行文件的排列，包含一个json文件存储目录相关联的元数据:

App icons and launch images

Asset catalog(资产分类)默认自动创建，名为Assets.xcassets,包含AppIcon的入口。提供了构建应用的所有需要的图标的尺寸：

LaunchImage 目录需要自己创建：鼠标右击 —— App Icons & Launch Images —— New iOS Launch Image

Custom imagesets - 自定义图像集

和标准的集合一样，你可以使用 asset catalogs 来管理你自己的图片，图片都是包含在ImageSet中的，并且可以使用管理对应的retina和非retina图像。

使用方法：UIImage:imageNamed:

UIImage *image = [UIImage imageNamed:@"Australia"];

加载图片还涉及到缓存问题，参考之前写的文章：

UIImage 使用Tips

Slicing images - 切片图像

Asset catalogs 的另外一个主要的特性就是能够让图像进行切片工作，自从iOS2开始程序就能够使用切片的图像了，但是Xcode中的这个新特性会变得非常的简单。

使用切片变换图像，是创建虚拟的元素基本的技术。例如按钮，需要拉伸这个按钮图片的大小达到一个新的大小，并且要设置边缘不被拉伸，只拉伸中间的部分。

在 Asset catalog 中就可以使用Xcode提供的功能进行切片操作了，开启切片功能，只需要点击Show Slicing按钮,你可以选择水平、竖直或者两者都拉伸的方式,如果你选择之后，图像将会重新加载并且上面会出现拉伸辅助线，你可以通过拖拽辅助线，来实现自己需要拉伸的效果。

使用这些切片图像编程非常的简单，和之前一样创建一个UIImage对象，然后当你调整UIImageView的大小，内部的image就会自动根据切片的图像来变换大小。

UIImage *btnImage = [UIImage imageNamed:@"ButtonSlice"];

// Let's make 2
UIImageView *iv = [[UIImageView alloc] initWithImage:btnImage];
iv.bounds = CGRectMake(0, 0, 150, CGRectGetHeight(iv.bounds));
iv.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2, 300);
[self.view addSubview:iv];

// And a stretched version
iv = [[UIImageView alloc] initWithImage:btnImage];
iv.bounds = CGRectMake(0, 0, 300, CGRectGetHeight(iv.bounds));
iv.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2, 350);
[self.view addSubview:iv];

步骤详解：

1. 点击Show Slicing 按钮？

2. 选择拉伸模式：

   支持三种模式：水平拉伸、水平和垂直同时拉伸、垂直拉伸。

   

3. 设置拉伸句柄：

   

4. 代码添加图片：

       UIImage *image = [UIImage imageNamed:@"bird"];
       
       // default
       UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
       imageView.bounds = CGRectMake(0, 0, 50, 37.5);
       imageView.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2, 300);
       [self.view addSubview:imageView];
       
       // stretch
       UIImageView *stretchImgView = [[UIImageView alloc] initWithImage:image];
       stretchImgView.bounds = CGRectMake(0, 0, 100, 75);
       stretchImgView.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2, 400);
       [self.view addSubview:stretchImgView];
   

5. 效果：用【填充部分】去覆盖【可扩展部分】

   

ImageOptim - 超好用的图像压缩工具

ImageOptim 是一个免费的图像压缩工具。iOS 工程默认使用 pngcrush 命令来压缩数据，不过其压缩比率不是很高。而使用 ImageOptim 可以达到最大的图片压缩效果。

实现原理：使用各种开源的图像压缩工具，然后取压缩效果最好的那一个。

使用方法也非常简单：在 Finder 中打开图片所在的文件夹，将图片拖拽进 ImageOptim 界面中即可。

其他图像压缩工具：

• Optimizilla ——在线图像优化压缩器

附录：

摘自官方人机交互指南：iOS Human Interface Guidelines

图片大小和分辨率（Image Size and Resolution）

设备	比例系数
iPhone 7 Plus and iPhone 6s Plus	@3x
其余高分辨率的 iOS 设备	@2x

App Icon

设备或状况	图标大小
iPhone	180px × 180px (60pt × 60pt @3x)
	120px × 120px (60pt × 60pt @2x)
iPad Pro	167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini	152px × 152px (76pt × 76pt @2x)
App Store	1024px × 1024px

Spotlight, Settings, and Notification Icons

Spotlight

设备	Spotlight 图标大小
iPhone	120px × 120px (40pt × 40pt @3x)
	80px × 80px (40pt × 40pt @2x)
iPad Pro, iPad, iPad mini	80px × 80px (40pt × 40pt @2x)

---

Settings

设备	Settings 图标大小
iPhone	87px × 87px (29pt × 29pt @3x)
	58px × 58px (29pt × 29pt @2x)
iPad Pro, iPad, iPad mini	58px × 58px (29pt × 29pt @2x)

---

Notification

设备	Notification 图标大小
iPhone	60px × 60px (20pt × 20pt @3x)
	40px × 40px (20pt × 20pt @2x)
iPad Pro, iPad, iPad mini	40px × 40px (20pt × 20pt @2x)

自定义图标大小

	导航栏和工具栏图标尺寸	标签栏图标尺寸
推荐	75px × 75px (25pt × 25pt @3x)	75px × 75px (25pt × 25pt @3x)
	50px × 50px (25pt × 25pt @2x)	50px × 50px (25pt × 25pt @2x)
最大	83px × 83px (27.67pt × 27.67pt @3x)	144px × 96px (48pt × 32pt @3x)
	56px × 56px (28pt × 28pt @2x)	96px × 64px (48pt × 32pt @2x)

启动画面（Launch Screen）

静态启动画面图片

设备	Portrait size	Landscape size
iPhone 7 Plus, iPhone 6s Plus	1242px × 2208px	2208px × 1242px
iPhone 7, iPhone 6s	750px × 1334px	1334px × 750px
iPhone SE	640px × 1136px	1136px × 640px
12.9-inch iPad Pro	2048px × 2732px	2732px × 2048px
9.7-inch iPad Pro, iPad Air 2, iPad mini 4, iPad mini 2	1536px × 2048px	2048px × 1536px