IOS中Weex 加載 .xcassets 中的圖片資源的實例詳解
IOS中Weex 加載 .xcassets 中的圖片資源的實例詳解
前言:
因為 .xcassets 中的圖片資源只能通過 imageNamed: 方法加載,所以需要做一些特殊處理,才能提供給 Weex 使用(PS:純屬娛樂,因為 Weex 跨平臺的特性,這種針對某一端做實現(xiàn)的方案實用價值并不大)。
方案
觀察 WeexSDK 發(fā)現(xiàn)有 WXImgLoaderProtocol 這個協(xié)議,這個協(xié)議包含了下面的方法:
- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame: (CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;
從名字就可以看出來,這個方法聲明的功能就是通過指定的 URL 下載圖片并返回一個 UIImage 對象。
下載過 WeexDemo 的人應(yīng)該都知道里面有一個叫 WXImgLoaderDefaultImpl 的類(PS:別告訴我你對 Weex 感興趣確連 WeexDemo 里面有啥都不知道)。這個類實現(xiàn)了 WXImgLoaderProtocol 協(xié)議,內(nèi)容如下:
- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock { if ([url hasPrefix:@"http://"]) { url = [@"http:" stringByAppendingString:url]; } return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) { } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) { if (completedBlock) { completedBlock(image, error, finished); } }]; }
其實就是利用 SDWebImage 這個庫實現(xiàn)圖片下載功能。而且我還發(fā)現(xiàn),如果不實現(xiàn) WXImgLoaderProtocol 協(xié)議,就無法在 Weex 的代碼中通過 URL 加載網(wǎng)絡(luò)圖片。也就是說 Weex 其實是依賴原生來做網(wǎng)絡(luò)圖片加載,至于為什么這么做,我只能說:我不知道。
然后 WeexDemo 通過下面的代碼把 WXImgLoaderDefaultImpl 注冊為 Weex 的一個 iOS 原生 handler
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];
這樣我們就可以在 Weex 中加載網(wǎng)絡(luò)圖片了,比如:
<image class="img" style="width: 68px; height: 68px;margin-left:20px;" src="https://gw.alicdn.com/tps/TB1El.mKXXXXXXyapXXXXXXXXXX-34-34.gif"></image>
好了,現(xiàn)在就來說說怎么加載 .xcassets 中的圖片資源,其實很簡單,在 WXImgLoaderDefaultImpl 實現(xiàn)的方法中添加幾行代碼就可以:
if ([url hasPrefix:@"xcassets:"]) { UIImage *image = [UIImage imageNamed:[url substringFromIndex:9]]; completedBlock(image, nil, YES); return [WXXCassetsLoaderOperation new]; }
這里我定義的規(guī)則是:xcassets:+[.xcassets 中的圖片名]。所以我們判斷 url 是不是以 xcassets: 開頭,如果是,通過 imageNamed 方法加載圖片并返回即可。
因為 downloadImageWithURL 方法要求返回遵循 WXImageOperationProtocol 協(xié)議的對象,所以我們新建一個 WXXCassetsLoaderOperation 類,然后實現(xiàn) WXImageOperationProtocol 協(xié)議中的 cancel 方法:
- (void)cancel { }
然后我們就可以在 Weex 中加載 .xcassets 中的圖片了。代碼如下:
<image class="img" style="width: 300px; height: 300px;" src="xcassets:reload"></image>
以上就是IOS中Weex 加載 .xcassets 中的圖片資源的實例詳解,如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
iOS應(yīng)用中UISearchDisplayController搜索效果的用法
這篇文章主要介紹了iOS應(yīng)用中UISearchDisplayController搜索效果的用法,包括點擊搜索出現(xiàn)黑條問題的解決方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-02-02iOS使用UICountingLabel實現(xiàn)數(shù)字變化的動畫效果
本文主要介紹了iOS使用UICountingLabel實現(xiàn)數(shù)字變化動畫效果的方法,具有一定的參考價值,下面跟著小編一起來看下吧2016-12-12iOS中tableview實現(xiàn)編輯、全選及刪除等功能的方法示例
這篇文章主要給大家介紹了關(guān)于iOS中tableview實現(xiàn)編輯、全選及刪除等功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),不僅是介紹實現(xiàn)的方法,將實現(xiàn)過程中遇到的問題也都分享出來了,需要的朋友們下面來一起看看吧。2017-07-07