ios開發(fā)UITableViewCell圖片加載優(yōu)化詳解
前言
我們平時用UITableView用的很多，所以對列表的優(yōu)化也是很關(guān)注的。很多時候，我們設(shè)置UIImageView，都是比例固定好寬高的，然后通過 scaleAspectFill 和 clipsToBounds 保持圖片不變形，這樣子做開發(fā)的效率是很高的，畢竟圖片寬高我們都是固定好的了。
那如果產(chǎn)品要求圖片按真正的比例展示出來呢？如果服務(wù)器有返回寬和高，那就好辦了，那如果沒有呢，我們應(yīng)該怎么去做呢？
下面就讓我們一起來探索吧。
圖片自適應(yīng)比例
一般我們的做法都是用UITableViewAutomaticDimension來實現(xiàn)的。
以往的做法，我們都是直接 sd_setImageWithURL 來實現(xiàn)添加圖片，那現(xiàn)在也一樣，我們也是通過這個來獲取圖片寬和高。
- (void)sd_setImageWithURL:(nullable NSURL *)url
placeholderImage:(nullable UIImage *)placeholder
completed:(nullable SDExternalCompletionBlock)completedBlock
完成后，我們可以拿到UIImage，從而知道圖片的 size 。然后我們就可以按比例來獲取圖片的高度，再通過更新約束來改變圖片高度。
大概做法如下：
[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL _Nullable imageURL) {
if (image) {
// 獲取圖片寬高
CGSize imageSize = image.size;
CGFloat maxWidth = kSCREEN_WIDTH - 32;
// 按比例獲取當(dāng)前的高度
CGFloat height = imageSize.height * maxWidth / imageSize.width;
[self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(height);
}];
}
}];
然后我們一運(yùn)行代碼，發(fā)現(xiàn)圖片的高度并沒有展示我們想要的高度，可以說是連高度都沒有。
很明顯是圖片的高度沒有生效。想想也是，我們是異步調(diào)用加載圖片的，這時候等異步結(jié)果回來調(diào)用mas_updateConstraints，并不會觸發(fā)代理 heightForRowAtIndexPath，那怎么會更新高度呢。
既然是這樣，那我們就重新加載該列表吧。
[cell setHeightBlock:^(CGFloat imageHeight){
[tableView beginUpdates];
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
[tableView endUpdates];
}];
我們更新完mas_updateConstraints后，這時候，直接刷新該列表，就可以解決問題了。
這時候我們重新運(yùn)行，效果還可以，但在來回滾動的時候，發(fā)現(xiàn)有點卡。很明顯，我們滾動的時候每次都要重新刷新cell。
如果我們有緩存了，那就知道了圖片的高度，那我們是不是就不需要reloadRowsAtIndexPaths。
所以我再次進(jìn)行優(yōu)化
// 是否有緩存
BOOL hasCache = [[SDImageCache sharedImageCache] diskImageDataExistsWithKey:model.urlStr];
[_ImageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
if (image) {
CGSize imageSize = image.size;
CGFloat maxWidth = kSCREEN_WIDTH - 32;
CGFloat height = imageSize.height * maxWidth / imageSize.width;
[self.imageView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(height);
}];
// 有緩存就不去reloadRowsAtIndexPaths
if (!hasCache && self.heightBlock) {
self.heightBlock(height);
}
}
}];
如果發(fā)現(xiàn)是有緩存圖片了，我們就不刷新列表了。sd_setImageWithURL這時候也是從緩存里面讀取圖片，就不是異步加載了，所以不用再次刷新了當(dāng)前cell了。
XHWebImageAutoSize
有的人說，這么寫好像挺麻煩的，有沒有封裝好的寫法，的確有的。
那就是第三方庫 XHWebImageAutoSize，它的寫法其實也是用了 SDWebImage 來進(jìn)行優(yōu)化操作的。
[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
if (image) {
/** 緩存image size */
[XHWebImageAutoSize storeImageSize:image forURL:imageURL completed:^(BOOL result) {
/** reload */
if(result && self.heightBlock) {
self.heightBlock(0)
}
];
}
}];
緩存圖片后，一樣是去刷新cell。
[cell setHeightBlock:^(CGFloat imageHeight) {
[tableView xh_reloadDataForURL:[NSURL URLWithString:model.urlStr]];
}];
然后就是重新加載高度。
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
ImageModel *model = _dataArray[indexPath.row];
return [XHWebImageAutoSize imageHeightForURL:[NSURL URLWithString:model.urlStr] layoutWidth:[UIScreen mainScreen].bounds.size.width-32 estimateHeight:200] + 50;
}
后面加的 50是其他的高度，例如cell里面還有title，就是圖片+其他高度。
這樣也能實現(xiàn)圖片自適應(yīng)高度。
僅加載當(dāng)前屏幕的內(nèi)容
圖片列表實在太多了，一直滑滑滑，圖片加載速度跟不上手速啊，感覺有點卡，我們可以僅加載當(dāng)前屏幕的內(nèi)容?；瑒拥臅r候，我們不加載，等列表停后，我們再次加載當(dāng)前屏幕的內(nèi)容。
這時候我們在模型model里面，添加一個isLoad的參數(shù)，如果是true，我們才加載。
先添加一個當(dāng)前屏幕加載cell的方法。
-(void)loadCurrentCells{
NSArray * array = [self.tableView indexPathsForVisibleRows];
for (NSIndexPath *indexPath in array) {
JJTableViewCell * cell = (JJTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
ImageModel *model = _dataArray[indexPath.row];
//設(shè)置為可以加載
model.isLoad = YES;
//配置cell
[cell configCellWithImageModel:model];
}
}
cell里面對model的isLoad進(jìn)行判斷。
- (void)configCellWithImageModel:(ImageModel *)model
{
if (model.isLoad) {
[_imageView sd_setImageWithURL:[NSURL URLWithString:model.urlStr]];
}else {
_imageView.image = [UIImage imageNamed:@"default_images_icon"];
}
}
如果暫不加載，我們可以先設(shè)置占用圖片。
這樣一來，我們只要監(jiān)聽停止滑動的時候，我們就設(shè)置加載當(dāng)前頁面的內(nèi)容即可。
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
if (!decelerate) {
[self loadCurrentCells];
}
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self loadCurrentCells];
}
當(dāng)然一開始我們reloaData的時候，所有isload都為false，所以我們需要加載一次當(dāng)前cell內(nèi)容。
[self.tableView reloadData]; [self loadCurrentCells];
這樣，我們就可以做到一直滑動的時候，不異步加載圖片，等滑動停止再加載當(dāng)前屏幕的圖片。
當(dāng)然除了這種寫法，我們還可以通過RunLoop來實現(xiàn)。
預(yù)加載
所謂預(yù)加載，就是一直滑動，我們翻頁的時候，提前加載數(shù)據(jù)出來，讓用戶的感覺就是一直有數(shù)據(jù)。就沒有出現(xiàn)上拉加載更多這種情況。
總體思路是：當(dāng)滑動距離占比到了總滑動距離的時候的%90（不固定），就觸發(fā)預(yù)加載。
這里我就不寫了，直接把大佬的鏈接搞過來：iOS開發(fā) TableView 網(wǎng)絡(luò)請求/展示預(yù)加載
以上就是ios開發(fā)UITableViewCell圖片加載優(yōu)化詳解的詳細(xì)內(nèi)容，更多關(guān)于ios UITableViewCell圖片加載的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了iOS提取APP中的圖片資源的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
iOS應(yīng)用開發(fā)中使用設(shè)計模式中的觀察者模式的實例
這篇文章主要介紹了iOS應(yīng)用開發(fā)中使用設(shè)計模式中的觀察者模式的實例,包括Cocoa框架使用中的KVO機(jī)制的相關(guān)配合運(yùn)用,代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了IOS自定義UIButton九宮格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
本篇文章主要介紹了iOS實現(xiàn)手勢滑動解鎖功能簡析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了iOS開發(fā)之適配iOS10以及Xcode8的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了iOS開發(fā)系列--通知與消息機(jī)制詳解，有需要的同學(xué)可以了解一下。2016-11-11
iOS中使用JSPatch框架使Objective-C與JavaScript代碼交互
有了JSPatch,我們便可以在iOS App開發(fā)中令JavaScript代碼調(diào)用原生的Objective-C屬性和方法等,下面就來詳細(xì)看一下如何在iOS中使用JSPatch框架使Objective-C與JavaScript代碼交互2016-06-06
最近因為工作的原因,遇到view圓角優(yōu)化的問題，所以將實現(xiàn)的幾種方法總結(jié)分享出來，下面這篇文章主要給大家介紹了關(guān)于iOS中設(shè)置view圓角化的四種方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要介紹了iOS中時間與時間戳的相互轉(zhuǎn)化實例代碼,非常具有實用價值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了iOS?項目嵌入Flutter?運(yùn)行,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03