课程名称 | IOS开发实训 | 任课老师 | 郑贵锋老师&字节跳动工程师 |
---|---|---|---|
学号 | 16340015 | 专业(方向) | 软件工程(计应) |
姓名 | 陈彬彬 | 944131226@qq.com | |
开始日期 | 2019/05/04 | 完成日期 | 2019/05/09 |
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
打开项目参考:
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
的使用不仅可以简单地实现上一周我们实现的内容(异步加载网络图片源),而且代码量极大地缩短,并且还拥有高性能、高兼容性、多种格式支持、缓存等功能。