iOS组件化 02 - 组件中图片资源管理方案优化

往期回顾

iOS组件化 01 - 本地私有库的使用

1. 上期图片加载的问题

观察上一期的添加图片资源方式，能够让宿主工程成功显示图片的关键是通过指定NSBundle的路径，写死图片名称

SLSearchBar.m

从这里可以发现，加载资源图片有以下问题

• 图片名称必须固定写死
• 屏幕适配，需要添加代码判断选择 @2x 和 @3x
• 不同分辨率图片会全部打包进SLBaseKit.bundle中

2. 解决方案

思路：

• 我们熟知平常用的 @2x @3x 图片是为了缩小用户最终下载时包的大小
• 通常我们会将图片放在 .xcassets 文件中管理，新建的项目也默认创建

Images.xcassets

使用 .xcassets 优点：

• 方便在 Xcode 中查看和拖入图片
• .xcassets 最终会打包生成为 Assets.car 文件
• 对于 Assets.car 文件，App Slicing 会为切割留下符合目标设备分辨率的图片，可以缩小用户最终下载的包的大小。

FYI： Xcode Ref Asset Catalog Format App thinning overview (iOS, tvOS, watchOS)

实际上，随着 CocoaPods 不断的更新，resource_bundles 已经可以很好的支持 .xcassets 了

操作步骤
（1）在组件模板中创建Asset Catalog

Select Asset Catalog Resource

（2）输入名称：Assets.xcassets【保持统一Apple的命名规范， 可根据自己需求修改】，然后指定存放路径

Assets.xcassets

new Assets.xcassets

（3）将图片资源拖入到Assets.xcassets，删除之前的图片资源

add png to Assets.xcassets

（4）修改代码

//    NSString *searchBarImagePath = [[self currentBundle] pathForResource:@"searchbar_textfield_background@2x" ofType:@"png"];
//    UIImage *searchBarImage = [UIImage imageWithContentsOfFile:searchBarImagePath];
    UIImage *searchBarImage = [UIImage imageNamed:@"searchbar_textfield_background"
                                         inBundle:[self currentBundle]
                    compatibleWithTraitCollection:nil];

//    ... 

//    NSString *searchIconImagePath = [[self currentBundle] pathForResource:@"searchbar_textfield_search_icon@2x" ofType:@"png"];
//    searchIcon.image = [UIImage imageWithContentsOfFile:searchIconImagePath];
    searchIcon.image = [UIImage imageNamed:@"searchbar_textfield_search_icon"
                                  inBundle:[self currentBundle]
             compatibleWithTraitCollection:nil];

（5）修改SLBaseKit.podspec

# 资源文件路径
s.resource_bundles = {
    # 'SLBaseKit' => ['SLBaseKit/Assets/*.png'] 
    'SLBaseKit' => ['SLBaseKit/Assets/*.{.xcassets}']
  }

（6）打开终端

pod install

（7）观察 Xcode 导航栏视图

Assets.xcassets

（8）编译 Example 工程，观察 SLBaseKit_Example.app 的包内容里的资源包

Show in Finder

open ../Products/Debug-iphoneos/SLBaseKit_Example.app/

open ../SLBaseKit_Example.app/Frameworks/SLBaseKit.framework/SLBaseKit.bundle

../SLBaseKit.bundle/Assets.car

（9）运行验证成功通过。

3. 总结

组件开发工程中，通过 .xcassets 管理图片资源，有以下几处优点

• 代码中初始化图片，不再需作屏幕适配而写死 [email protected] 或 [email protected] 的图片全名称
• 图片资源打包后统一在Assets.car文件中，不再是散落成图片文件
• 支持 App Slicing 图片自动压缩优化，缩小用户最终下载的包的大小
• 在Assets.xcassets可视化的设置图片的拉伸、渲染等属性
• 支持.xib和.storyboard预览图片（这个后面会讲）