iOS - UITableView加载网络图片 cell适应图片高度

项目中,有一个需求,是加载几张网络图片,每一张都要求宽度与屏幕宽度一样,然后高度自适应;并且几张自上而下一次排列。

这让我想到了UITableVIew,但是图片的处理成了问题,经过我多次的处理,完成了这个需求

大概的思路是:

1.重写自己的Cell,Cell中利用一个UIButton展示图片,而不是UIImageView,因为这样好控制图片的宽度与屏幕一致

2.每一个图片在未完成网络加载时,都有一张长款固定的HolderImage代替

3.UITableView cell 的height手动计算


首先是自定义Cell:

//
//  PYClubPresentDetailImgTableViewCell.h
//  iphone-pay
//
//  Created by jinhui005 on 16/8/25.
//  Copyright © 2016年 RHJX Inc. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PYClubPresentDetailImgTableViewCell : UITableViewCell

@property (nonatomic, strong) UIButton *btn;

@end

//
//  PYClubPresentDetailImgTableViewCell.m
//  iphone-pay
//
//  Created by jinhui005 on 16/8/25.
//  Copyright © 2016年 RHJX Inc. All rights reserved.
//

#import "PYClubPresentDetailImgTableViewCell.h"

@interface PYClubPresentDetailImgTableViewCell ()


@end

@implementation PYClubPresentDetailImgTableViewCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {

        [self.contentView addSubview:self.btn];
        [self.btn mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.top.right.bottom.equalTo(self.contentView);
        }];
    }
    return self;
}

- (UIButton *)btn {
    if (nil == _btn) {
        _btn = [[UIButton alloc] init];
        _btn.titleLabel.font = kFT3;
        _btn.userInteractionEnabled = NO;
    }
    return _btn;
}

@end

然后是UITableView的代理方法

#pragma mark - UITableViewDelegate, UITableViewDataSource
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.imgArray.count;//图片URL以数组的形式存在
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    // 先从缓存中查找图片
    UIImage *image = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey: self.imgArray[indexPath.row]];
    
    // 没有找到已下载的图片就使用默认的占位图,当然高度也是默认的高度了,除了高度不固定的文字部分。
    if (!image) {
        image = [UIImage imageNamed:kDownloadImageHolder];
    }

    //手动计算cell
    CGFloat imgHeight = image.size.height * [UIScreen mainScreen].bounds.size.width / image.size.width;
    return imgHeight;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *imgID = @"pictureCellID";
    PYClubPresentDetailImgTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:imgID];
    if (nil == cell) {
        cell = [[PYClubPresentDetailImgTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:imgID];
    }
    [self configureCell:cell atIndexPath:indexPath];
    cell.userInteractionEnabled = NO;
    return cell;
}

- (void)configureCell:(PYClubPresentDetailImgTableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {
    NSString *imgURL = self.imgArray[indexPath.row];
    UIImage *cachedImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:imgURL];
    
    if ( !cachedImage ) {
        [self downloadImage:self.imgArray[indexPath.row] forIndexPath:indexPath];
        [cell.btn setBackgroundImage:[UIImage imageNamed:kDownloadImageHolder] forState:UIControlStateNormal];
    } else {
        [cell.btn setBackgroundImage:cachedImage forState:UIControlStateNormal];
    }
}

- (void)downloadImage:(NSString *)imageURL forIndexPath:(NSIndexPath *)indexPath {
    // 利用 SDWebImage 框架提供的功能下载图片
    [[SDWebImageDownloader sharedDownloader] downloadImageWithURL:[NSURL URLWithString:imageURL] options:SDWebImageDownloaderUseNSURLCache progress:^(NSInteger receivedSize, NSInteger expectedSize) {
        // do nothing
    } completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {
        [[SDImageCache sharedImageCache] storeImage:image forKey:imageURL toDisk:YES];
        dispatch_async(dispatch_get_main_queue(), ^{
            [self.tableView reloadData];
        });
    }];
}



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值