在tableview中显示来自json文件的图像

Posted 2023-03-04

【中文标题】在tableview中显示来自json文件的图像

【英文标题】：Displaying images from json file in tableview

【发布时间】：2014-07-28 15:29:13

【问题描述】：

我有一个 json 数组，我正在使用以下内容来检索数据：

- (void) retrieveData

    NSURL * url = [NSURL URLWithString:getDataURL];
    NSData * data = [NSData dataWithContentsOfURL:url];
    jsonArray = [NSJSONSerialization JSONObjectWithData:data options:kNilOptions error:nil];

    //set up cities array
    dronesArray = [[NSMutableArray alloc] init];

    //Loop json array
    for (int i = 0; i < jsonArray.count; i++)
    
        //Create city/drone object
        NSString * dID = [[jsonArray objectAtIndex:i] objectForKey:@"id"];
        NSString * dName = [[jsonArray objectAtIndex:i] objectForKey:@"droneName"];
        NSString * dPic = [[jsonArray objectAtIndex:i] objectForKey:@"dronePic"];
        [dronesArray addObject:[[City alloc]initWithDroneName:dName andDronePic:dPic]];
    

上面显示单元格很好：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    // Configure the cell...

    City * droneObject;
    droneObject = [dronesArray objectAtIndex:indexPath.row];

    cell.textLabel.text = droneObject.droneName;

    //Accessory
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    return cell;

但它只显示名称，没有图像。图像以 URL 格式存储，例如http://www.domain.com/image.jpg 在 sql 数据库中。如何导入图像以使其看起来像这种格式：

好的，所以我在 cellforrowatindexpath 中添加了以下代码，但它什么也没做：

[[cell imageView] setImage: [UIImage imageNamed:droneObject.dronePic]];

【问题讨论】：

首先弄清楚如何从文件中显示一个图像。然后是来自 URL 的一张图片。然后弄清楚多张图片的事情。

您对 imageView 没有任何参考。你在使用故事板吗？

以您提到的方式设置图像 (+imageNamed:) 意味着您已下载该图像或在某处的捆绑包中。在您的情况下，您所拥有的只是 URL。您需要从该 URL 下载图像。

【参考方案1】：

每当您需要从 url 下载图像并将其设置到 UIImageView 中时。最好的机制是从 url 中获取图像并将它们存储在缓存中，并将下载的图像设置为 UITableView。

现在，当您滚动 tableView 时，其内容将被更新，您需要检查是否已下载特定的可见单元格图像，如果已下载，请将其设置为 UIImageView，否则从服务器下载。

为了做到这一点非常有效地使用SDWebImage库。这是最受信任且易于使用的库。

希望这会对您有所帮助。快乐编码:)

【参考方案2】：

假设您正在尝试从 url 字符串获取图像

    NSURL *url = [NSURL URLWithString:droneObject.dronePic];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *image = [UIImage imageWithData:data];
    [[cell imageView] setImage: [UIImage imageNamed:image]];

【参考方案3】：

我就是这样做的。提取 json 数据的部分，通过从 URL 字符串中检索图像来存储图像。

connectionDidFinishLoading
    for (int i = 0; i < jsonArray.count; i++)
    
        NSDictionary *jsonElement = jsonArray[i];
        Movies *newMovie = [[Movies alloc] init];
        newMovie.name = jsonElement[@"MovieID"];

        NSString *urlString = [NSString stringWithFormat:@"*url of the image*%@", jsonElement[@"fileImage"]]; 
        // www.example.com/img%@, /filename.jpg
        NSURL *imageURL = [NSURL URLWithString:urlString];
        NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
        UIImage *image = [UIImage imageWithData:imageData];

        newMovie.imageName = image;
        [_movies addObject:newMovie];
    

我创建了一个名为 Movies 的 NSObject 来存储图像和其他字段。

Movies.h
    @property (nonatomic, strong) NSString *name;
    @property (nonatomic, strong) UIImage *imageName;

在我的 cellForRowAtIndexPath 中，我创建了一个图像视图并将图像设置为与 Movies.h 中的 UIImage 相同。

cellForRowAtIndexPath:
    Movies *item = _feedItems[indexPath.row];
    myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,50,50)];
    myImageView.tag = indexPath.row;
    myImageView.image = item.imageName;
    [myCell addSubview:myImageView];

    return myCell;

_feedItems 是一个 NSArray

- (void)itemsDownloaded:(NSArray *)items

    _feedItems = items;
    [self.listTableView reloadData];

【参考方案4】：

简答：使用AFNetworking 和UIImageView 类别在cellForRowAtIndexPath: 中设置单元格的imageView 图像

https://github.com/AFNetworking/AFNetworking/blob/master/UIKit%2BAFNetworking/UIImageView%2BAFNetworking.h

长答案？

没有图像，因为您没有将单元格的 imageView image 属性设置为 cellForRowAtIndexPath: 中的任何内容。如果您只使用 URL，您可能需要考虑异步加载和设置单元格上的图像，这样您的表格就不会在滚动时锁定。如果您是新手，这可能是一个棘手的概念。

无论如何，有很多方法可以做到这一点（AFNetworking 解决方案开箱即用）：

Multithreading and Grand Central Dispatch for ios Beginners Tutorial Async image loading from url inside a UITableView cell - image changes to wrong image while scrolling Asynchronous downloading of images for UITableView with GCD iOS: How to Download Images Asynchronously (And make your UITableView Scroll Fast) AFNetworking

【讨论】：

我的表格中只有大约 20 项，所以我认为我不应该担心它的滚动速度。有没有一种简单的方法可以通过在 CellForRowAtIndexPath 手动设置 imageView 来做到这一点？

@medictrader Aaron 是对的。无论您要显示多少张图片，您都必须将操作（在您的案例中从 url 中获取图片）卸载到另一个线程以保持您的 UI 畅通无阻。