背景:
1.在使用了MJRefresh之后,當(dāng)UITableView滑到底部的時(shí)候需要繼續(xù)上拉(比之前的上拉費(fèi)力)才能進(jìn)行刷新发魄。
效果圖:
2.當(dāng)每個(gè)Cell上有多張圖片盹牧,且圖片質(zhì)量較大的時(shí)候俩垃,用戶滑到下一頁但頁面上的圖片還沒有顯示出來。
需求:
優(yōu)化UITableView汰寓,提高用于體驗(yàn)口柳。
1.不讓用戶看到加載更多的字樣
2.滑到下一頁的時(shí)候盡量快地顯示出下一頁的圖片。
思路:
1.上拉UITableView的時(shí)候有滑,讓MJRefresh提前去加載下一頁的數(shù)據(jù)跃闹。
2.上拉UITableView的時(shí)候,提前下載下一屏上的圖片毛好。
代碼:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
? ? CustomTableViewCell * cell = [CustomTableViewCell cellWithTableView:tableView];
? ? NSDictionary * dic = self.dataArr[indexPath.row];
? ? NSString * picStr = dic[@"pic"];
? ? [cell.picView sd_setImageWithURL:[NSURL URLWithString:picStr]];
? ? NSArray * visibleRows = [tableView indexPathsForVisibleRows];
? ? NSLog(@"count:%lu", visibleRows.count);
? ? NSInteger nextRow = indexPath.row + visibleRows.count;
? ? if (nextRow < self.dataArr.count) {
? ? ? ? NSLog(@"nextRow:%lu", nextRow);
? ? ? ? NSDictionary * nextDic = self.dataArr[indexPath.row];
? ? ? ? NSString * nextPicStr = nextDic[@"pic"];
? ? ? ? [self.imageV sd_setImageWithURL:[NSURL URLWithString:nextPicStr]];
? ? }
? ? NSInteger row = indexPath.row;
? ? if (self.dataArr.count - row < visibleRows.count) {
? ? ? ? [self.tableView.mj_footer beginRefreshing];
? ? }
? ? return cell;
}
具體實(shí)現(xiàn):
1.在cellForRowAtIndexPath:方法中獲取每個(gè)cell的行數(shù)望艺,當(dāng)數(shù)據(jù)源中未展示的數(shù)據(jù)不夠下一屏的數(shù)據(jù)的時(shí)候就去利用MJRefresh加載下一頁的數(shù)據(jù)。代碼實(shí)現(xiàn):
?if (self.dataArr.count - row < visibleRows.count) {
? ? ? ? [self.tableView.mj_footer beginRefreshing];
? ? }
2.在包含UITableView的當(dāng)前頁面去創(chuàng)建一個(gè)UIImageView作為當(dāng)前Controller的一個(gè)成員變量肌访,記為picView找默,但并不添加到當(dāng)前Controller上(為的是利用該UIImageView去下載圖片)。在cellForRowAtIndexPath:方法中在利用當(dāng)前Cell上的UIImageView去下載圖片的同時(shí)利用picView去下載數(shù)據(jù)源中還未展示的cell上的UIImageView上要顯示的圖片场靴。
代碼實(shí)現(xiàn):
? if (nextRow < self.dataArr.count) {
? ? ? ? NSDictionary * nextDic = self.dataArr[indexPath.row];
? ? ? ? NSString * nextPicStr = nextDic[@"pic"];
? ? ? ? [self.imageV sd_setImageWithURL:[NSURL URLWithString:nextPicStr]];
? ? }
注意:要對picView要去下載的圖片所在的cell的行數(shù)做一個(gè)判斷啡莉,如果超出了數(shù)據(jù)源的長度就不去下載了。
demo地址:
https://gitee.com/liangsenliangsen/uitableview_improves_user_experience
本篇文章到這里就結(jié)束了旨剥,愿大家加班不多工資多咧欣,男同胞都有女朋友,女同胞都有男朋友轨帜。??