iOS开发学习周报(八)

iOS开发学习周报(八)

简介

课程名称	IOS开发实训	任课老师	郑贵锋老师&字节跳动工程师
学号	16340015	专业（方向）	软件工程(计应)
姓名	陈彬彬	Email	944131226@qq.com
开始日期	2019/05/04	完成日期	2019/05/09

---

---

本周记录

0.概括

• YBImageBrowser+SDWebImage

• 图片浮层浏览

---

1.YBImageBrowser+SDWebImage

参考：

iOS图片浏览之YBImageBrowser的简单使用

概括：

在Feed流应用，我们需要在新闻浏览页面提供概览图以及图片浮层预览，类似于微信朋友圈点击概览图弹出图片浮层浏览器，供用户左右横滑查看图片详情。这一个功能的实现可以简单地依靠一个第三方库YBImageBrowser ，这个库使用了 YYImage 和 SDWebImage 这两个一直广泛使用的图片库。前者提供图片的编码、解码、处理和展示，后者提供网络图片资源的异步下载和缓存。

对于异步加载网络图像，SDWebImage 库的使用对比上一周(周报七)通过 NSOperationQueue 子线程来实现的方法，拥有更优越的性能和更简易的代码：

1）为Cocoa Touch框架提供一个UIImageView的分类，加载图片并进行缓存处理。
2）异步图像下载
3）异步存储器+具备自动缓存过期处理的磁盘映像缓存
4）支持GIF播放
5）支持WebP格式
6）背景图像解压缩
7）保证同一个url图片资源不被多次下载
8）保证错误url不被反复尝试下载
9）保证不会阻塞主线程
10）高性能
11）使用GCD和ARC
12）支持Arm64架构

安装：

使用 Pod 来管理项目第三方库依赖：

• 安装 cocoaPods 过程省略，详见周报(六)
• 配置 Podfile

pod 'YBImageBrowser'
pod 'YYImage/WebP'

• 安装项目依赖

$ pod install

• 通过.xsworkspace 打开项目

---

2.图片浮层浏览

参考：

iOS图片浏览之YBImageBrowser的简单使用

SDWebImage ReadMe.md 文档

iOS利用SDWebImage实现缓存的计算与清理

实现：

在这个demo中，我们将使用 SDWebImage 异步加载、缓存网络图片，然后使用 YBImageBrowser 简单地展示一个图片浮层。

我们根据周报(七)刚学会的 UICollectionView 来展示网络图片的缩略图，在 ViewController 中实现 UICollectionViewDataSource , UICollectionViewDelegate 两个协议。

当然我们先自定义自己的 UICollectionViewCell 也就是下面的 ImageViewCell ，里面只简单地包含一个 ImageView 控件，用以展示缩略图：

// ImageViewCell.h
#import 

@interface ImageViewCell : UICollectionViewCell
@property(nonatomic, strong) UIImageView *imageView;
@end

// ImageViewCell.m
#import 
#import "ImageViewCell.h"

@interface ImageViewCell()

@end

@implementation ImageViewCell

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.frame.size.width, 0, 100, 100)];
        [self.contentView addSubview: self.imageView];
    }
    return self;
}

- (void)layoutSubviews {
    // 居中显示 Cell
    CGFloat image_width = self.imageView.frame.size.width;
    CGFloat leftMargin = (self.frame.size.width - image_width) / 2;
    [self.imageView setCenter:CGPointMake(leftMargin + image_width/2, self.frame.size.height/2)];
}
@end

那么在 ViewController 中，我们将通过 UICollectionView 来放置网络图片缩略图，首先我们得import相关第三方库，定义要实现的两个协议 UICollectionViewDataSource , UICollectionViewDelegate ，并初始化数据和界面控件布置：

#import "ViewController.h"
#import "YBImageBrowser.h"
#import 
#import "ImageViewCell.h"

@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate>

@property(nonatomic, strong) UICollectionView *collectionView;
@property(nonatomic, strong) NSString *identifier;
@property(nonatomic, strong) NSArray *imgurl_array;

@end

@implementation ViewController

- (instancetype)init {
    self = [super init];
    if (self) {
        [self initialize];
    }
    return self;
}

- (void)initialize {
    self.identifier = @"imageCell";
    self.imgurl_array = @[@"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200206.png",
                          @"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200218.png",
                          @"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200238.png",
                          @"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200229.png",
                          @"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200249.png",
                          @"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200306.png",
                          @"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200315.png",
                          @"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200327.png",
                          @"https://chenbb-1257745007.cos.ap-guangzhou.myqcloud.com/blog/20181004200351.png",
                          @"http://img4.duitang.com/uploads/item/201601/15/20160115231312_TWuG5.gif",
                          @"https://b-ssl.duitang.com/uploads/blog/201605/05/20160505170838_SxZzr.jpeg"];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    [self loadSubView];
}

- (void)loadSubView {
    self.collectionView = ({
        UICollectionViewFlowLayout *fl = [[UICollectionViewFlowLayout alloc] init];
        // 垂直布局
        CGRect collectionview_frame = self.view.frame;
        fl.scrollDirection = UICollectionViewScrollDirectionVertical;
        
        UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:collectionview_frame collectionViewLayout:fl];
        [collectionView registerClass:[ImageViewCell class] forCellWithReuseIdentifier:self.identifier];
        [collectionView setBackgroundColor:[UIColor whiteColor]];
        collectionView.delegate = self;
        collectionView.dataSource = self;
        collectionView;
    });
    [self.view addSubview:self.collectionView];
}
# pragma mark -UICollectionViewDataSource
// TODO
# pragma mark -UICollectionViewDelegate
// TODO
# pragma mark -YBImageBrowser
// TODO
@end

实现 UICollectionViewCell 的 UICollectionViewDataSource 协议，设定内部section 和 items数目和间距：

# pragma mark -UICollectionViewDataSource
// items数目(单个section内)
- (NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.imgurl_array.count;
}

// sections 数目
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

// section内下间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 20;
}

// section内横间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 20;
}

// 单个cell尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(120, 120);
}

设置 UICollectionViewCell(ImageViewCell) 的数据源，通过SDWebImage 加载、缓存网络图片，然后绑定在相应的ImageViewCell上：

# pragma mark -UICollectionViewDataSource
- (nonnull __kindof UICollectionViewCell *)collectionView:(nonnull UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
    ImageViewCell *imageCell = (ImageViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:self.identifier forIndexPath:indexPath];
    
    NSInteger img_index = indexPath.item % self.imgurl_array.count;
    NSString *img_url = [self.imgurl_array objectAtIndex:img_index];
    
    // 设置UICollectionViewCell内部的图片源
    [imageCell.imageView sd_setImageWithURL:[NSURL URLWithString:img_url] placeholderImage:[UIImage imageNamed:@"no_img.png"]];
    return imageCell;
}

实现 UICollectionViewCell 的 UICollectionViewDelegate 协议，设置点击cell弹出图片浮层浏览器，实现的方法写在后面提到的 loadImageViewWithIndex: (NSIndexPath*) 中

# pragma mark -UICollectionViewDelegate
// UICollectionView-item点击事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    [self loadImageViewWithIndex:indexPath];
}

loadImageViewWithIndex 方法实现的是，创建一个YBImageBrowser 浮层浏览器，为它绑定所有缩略图内容数据，YBImageBrowser 通过一个 NSMutableArray * 的不定数组来填充，每个YBImageBrowseCellData 需要为它绑定一个图片Url源 NSURL 和 图片的展示控件，也就是 UICollectionView 中对应 Cell 内部的 ImageView 。因此对于获取图片的展示控件，我们定义了一个方法sourceObjAtIdx:(NSIndexPath *) 来获取。

# pragma mark -YBImageBrowser

- (void)loadImageViewWithIndex:(NSIndexPath*)indexPath {
    NSMutableArray *broswerDataArray = [NSMutableArray array];
    for (NSString *img_url in self.imgurl_array) {
        YBImageBrowseCellData *data = [YBImageBrowseCellData new];
        data.url = [NSURL URLWithString:img_url];
        data.sourceObject = [self sourceObjAtIdx:indexPath];
        [broswerDataArray addObject:data];
    }
    YBImageBrowser *broswer = [YBImageBrowser new];
    broswer.dataSourceArray = broswerDataArray;
    broswer.currentIndex = indexPath.row;
    [broswer show];
}

#pragma mark Tool
- (id)sourceObjAtIdx:(NSIndexPath*)idx {
    ImageViewCell *cell = (ImageViewCell *)[self.collectionView cellForItemAtIndexPath: idx];
    return cell ? cell.imageView : nil;
}

@end

完成效果：

---

总结

这一周我们通过使用iOS开发中广泛被使用的两个图片库 YBImageBrowser 和 SDWebImage。

YBImageBrowser 的使用让我们实现了类似于微信朋友圈中的大图查阅浏览浮层的功能，代码简单易懂。

SDWebImage 的使用不仅可以简单地实现上一周我们实现的内容（异步加载网络图片源），而且代码量极大地缩短，并且还拥有高性能、高兼容性、多种格式支持、缓存等功能。