iOS学习笔记-122.多线程21——多图下载1_第一种实现方式(不靠谱)

多线程21——多图下载1_第一种实现方式(不靠谱)

一、图示

---

二、项目搭建

我们使用一个 UITableViewController 来实现我们的效果。如下图：

storyboard 绑定我们的 ViewController 。ViewController 继承自的UITableViewController

---

三、查看我们的数据，编写数据模型

我们的数据如下：

或者部分XML查看

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
    <dict>
        <key>name</key>
        <string>植物大战僵尸</string>
        <key>icon</key>
        <string>http://p16.qhimg.com/dr/48_48_/t0125e8d438ae9d2fbb.png</string>
        <key>download</key>
        <string>10311万</string>
    </dict>
    <dict>
        <key>name</key>
        <string>捕鱼达人2</string>
        <key>icon</key>
        <string>http://p19.qhimg.com/dr/48_48_/t0101e2931181bb540d.png</string>
        <key>download</key>
        <string>9982万</string>
    </dict>
</array>
</plist>

我们发现，它的一个集合，集合的每个item又是一个字典。

那么我么可以把每一个 item 写成是一个对象，这样就是就是一个数据的集合了。

通过查看数据我们知道 item 这个类有三个属性

name
icon
download

并且都是字符串。除此之外由于它是从字典中得来的，所以我们可以添加一个从字典中获取对象的类方法。

因此就有了，我们下面的的类。

3.1 QWMAppItem.h

//
//  QWMAppItem.h
//  03_UIview86多线程_多图下载
//
//  Created by 杞文明 on 17/9/6.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface QWMAppItem : NSThread

/*app的名字*/
@property(nonatomic,strong)NSString* name;
/*App图标*/
@property(nonatomic,strong)NSString* icon;
/*app下载量*/
@property(nonatomic,strong)NSString* download;
/*通过字典创建对象*/
+(instancetype)appWitdDict:(NSDictionary*)dict;
@end

3.2 QWMAppItem.m

//
//  QWMAppItem.m
//  03_UIview86多线程_多图下载
//
//  Created by 杞文明 on 17/9/6.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import "QWMAppItem.h"

@implementation QWMAppItem

+(instancetype)appWitdDict:(NSDictionary *)dict{
    QWMAppItem* item = [[QWMAppItem alloc]init];
    //KVC
    [item setValuesForKeysWithDictionary:dict];
    return item;
}

@end

---

四、分析和实现显示

4.1 加载本地模型数据

到此我们已经创建了数据模型，那么我们现在就需要把数据加载进来，并且显示出来。加载本地数据，我们如下操作

-(NSArray*)apps{
    if(_apps==nil){
        //字典数据
        NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"apps.plist" ofType:nil]];
        //字典数据转模型数据
        NSMutableArray *arrM = [NSMutableArray array];
        for (NSDictionary *dict in array) {
            [arrM addObject:[QWMAppItem appWitdDict:dict]];
        }
        _apps = arrM;
    }
    return _apps;
}

4.2 图片下载方式

我们现在使用最简单的方式去下载图片，也就是不用多线程。如下

-(UITableViewCell*)handle1:(UITableViewCell*)cell withItem:(QWMAppItem*)appItem{
    NSURL *url = [NSURL URLWithString:appItem.icon];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *image = [UIImage imageWithData:data];
    cell.imageView.image = image;
    return cell;
}

4.3 完整代码

//
//  ViewController.m
//  03_UIview86多线程_多图下载
//
//  Created by 杞文明 on 17/9/6.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import "ViewController.h"
#import "QWMAppItem.h"

@interface ViewController ()
/** tableView的数据源 */
@property (nonatomic, strong) NSArray *apps;

@implementation ViewController

-(NSArray*)apps{
    if(_apps==nil){
        //字典数据
        NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"apps.plist" ofType:nil]];
        //字典数据转模型数据
        NSMutableArray *arrM = [NSMutableArray array];
        for (NSDictionary *dict in array) {
            [arrM addObject:[QWMAppItem appWitdDict:dict]];
        }
        _apps = arrM;
    }
    return _apps;
}

/*组数*/
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;
}

/*每组的行数*/
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.apps.count;
}

/*每个cell*/
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString* identifier = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    //获取数据
    QWMAppItem *appItem = self.apps[indexPath.row];

    cell.textLabel.text = appItem.name;
    cell.detailTextLabel.text = appItem.download;

    [self handle1:cell withItem:appItem];

    return cell;
}

/*
 图片的第一种处理方式，存在的问题
 1.UI很不流程 ------> 开启子线程下载
 2.图片重复下载 ----->先把之前已经下载的图片保存起来(字典)

 */
-(UITableViewCell*)handle1:(UITableViewCell*)cell withItem:(QWMAppItem*)appItem{
    NSURL *url = [NSURL URLWithString:appItem.icon];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *image = [UIImage imageWithData:data];
    cell.imageView.image = image;
    return cell;
}

@end

4.4 图示

---

五、严重不足和解决方式

 1.UI很不流程和启动的时候特别慢 ------> 开启子线程下载
 2.图片重复下载 ----->先把之前已经下载的图片保存起来(字典)