往期回顧
1. 上期圖片加載的問題
觀察上一期的添加圖片資源方式疙筹，能夠讓宿主工程成功顯示圖片的關(guān)鍵是通過指定NSBundle的路徑，寫死圖片名稱
SLSearchBar.m
從這里可以發(fā)現(xiàn)，加載資源圖片有以下問題
- 圖片名稱必須固定寫死
- 屏幕適配庶溶，需要添加代碼判斷選擇 @2x 和 @3x
- 不同分辨率圖片會全部打包進
SLBaseKit.bundle中
2. 解決方案
思路：
- 我們熟知平常用的 @2x @3x 圖片是為了縮小用戶最終下載時包的大小
- 通常我們會將圖片放在 .xcassets 文件中管理宅此，新建的項目也默認(rèn)創(chuàng)建
Images.xcassets
使用 .xcassets 優(yōu)點：
- 方便在 Xcode 中查看和拖入圖片
-
.xcassets最終會打包生成為Assets.car文件 - 對于
Assets.car文件，App Slicing 會為切割留下符合目標(biāo)設(shè)備分辨率的圖片褐捻，可以縮小用戶最終下載的包的大小掸茅。
FYI： Xcode Ref Asset Catalog Format App thinning overview (iOS, tvOS, watchOS)
實際上，隨著 CocoaPods 不斷的更新柠逞，resource_bundles 已經(jīng)可以很好的支持 .xcassets 了
操作步驟
（1）在組件模板中創(chuàng)建Asset Catalog
Select Asset Catalog Resource
（2）輸入名稱：Assets.xcassets【保持統(tǒng)一Apple的命名規(guī)范昧狮， 可根據(jù)自己需求修改】，然后指定存放路徑
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 導(dǎo)航欄視圖
Assets.xcassets
（8）編譯 Example 工程逗鸣，觀察 SLBaseKit_Example.app 的包內(nèi)容里的資源包
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. 總結(jié)
組件開發(fā)工程中绰精，通過 .xcassets 管理圖片資源撒璧，有以下幾處優(yōu)點
- 代碼中初始化圖片，不再需作屏幕適配而寫死 xx@2x.png 或 xx@3x.png 的圖片全名稱
- 圖片資源打包后統(tǒng)一在
Assets.car文件中茬底，不再是散落成圖片文件 - 支持 App Slicing 圖片自動壓縮優(yōu)化沪悲，縮小用戶最終下載的包的大小
- 在
Assets.xcassets可視化的設(shè)置圖片的拉伸、渲染等屬性 - 支持
.xib和.storyboard預(yù)覽圖片（這個后面會講）
