高仿微信图片浏览(LBPhotoBrowser)
LBPhotoBrowser 是本人花费了也不知道具体有多久写的一个类似微信的图片浏览器.经过了N测试,比较稳定.实现基本的浏览效果,只需一行代码;
github地址: https://github.com/tianliangyihou/LBPhotoBrowser,如果您觉得不错，记得给一个star😜.
具体效果如下图:
最新版v1.2:
20171114.gif
v1.1
test.gif
v1.0
2306467-14a8a6771dad3b5c.gif
LBPhotoBrowser的结构:
/**
控件的基本结构
|---------------LBTapDetectingImageView(继承自UIImageView)----------| (最上层)
|---------------LBZoomScrollView(继承自UIScrollView)------------------------|
|---------------LBPhotoCollectionViewCell(继承自UICollectionViewCell)--------|
|---------------UICollectionView--------------------------------------------|
|---------------LBPhotoBrowserView(继承自UIView)------------------------|(最下层)
*/
新增通过collectionView展示图片的功能,只需调用下面这个接口即可实现V1.2版本的功能.
/**
展示 网络图片or本地图片
@param urls 需要加载的图片的URL数组
@param index 点击图片的index
@param collectionView 需要展示图片的collectionView
*/
- (void)showImageWithURLArray:(NSArray *)urls fromCollectionView:(UICollectionView *)collectionView selectedIndex:(int)index;
/**
展示 网络图片or本地图片
@param urls 需要加载的图片的URL数组
@param collectionView 需要展示图片的collectionView
@param index 点击图片的index
@param unwantedUrls urls中不需要展示的url
*/
- (void)showImageWithURLArray:(NSArray *)urls fromCollectionView:(UICollectionView *)collectionView selectedIndex:(int)index unwantedUrls:(NSArray *)unwantedUrls;
支持3Dtouch预览图片和进行操作
对3Dtouch的API进行了进一步的封装,使用起来更加简单,只需关心自己的业务逻辑即可
详细见下面
支持通过 [NSURL fileURLWithPath:@"xxx.path"]获取的图片
NSString *path = [[NSBundle mainBundle] pathForResource:@"timg.gif" ofType:nil];
通过在这种方式无法获取Assets.xcassets里面图片的路径 ---> 获取到的是nil
xcode9中 有时你通过这种方式也无法获取其他文件夹中的图片, 这时在项目的Build Phases中的 copy bundle resources 中添加该图片即可
关于LBPhotoBrowser的几个特点:
1.对gif的图片加载,做了较大的优化
当图片浏览器加载gif图片的时候,内存的处理十分重要.如过不能很好的处理gif图片的话,内存可能会飙升的特别高.
因为单张图片在内存中占中的大小为:
内存中占用的大小 = 图片的宽度 * 图片的高度 * 每个像素占用的字节数(IOS中为4)
如过加载一个有100多张图片组成的gif,直接把这些图片加载到内存中是十分危险的,内存会瞬间飙升到几百M,这个是一定不能出现的
LBPhotoBrowse 对Gif的加载提供两种可以选用的方式
方式一: 直接加载,不论gif的大小 直接加载到内存中.(高内存)
采用: + (nullableUIImage*)animatedImageWithImages:(NSArray *)images duration:(NSTimeInterval)durationNS_AVAILABLE_IOS(5_0);
// 高内存 低cpu --> 对帧数较多的gif图片来说 内存会很大
+ (UIImage *)sdOverdue_animatedGIFWithData:(NSData *)data {
if (!data) {
return nil;
}
CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
size_t count = CGImageSourceGetCount(source);
UIImage *animatedImage;
if (count <= 1) {
animatedImage = [[UIImage alloc] initWithData:data];
}
else {
NSMutableArray *images = [NSMutableArray array];
NSTimeInterval duration = 0.0f;
for (size_t i = 0; i < count; i++) {
CGImageRef image = CGImageSourceCreateImageAtIndex(source, i, NULL);
duration += [self sdOverdue_frameDurationAtIndex:i source:source];
[images addObject:[UIImage imageWithCGImage:image scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp]];
CGImageRelease(image);
}
if (!duration) {
duration = (1.0f / 10.0f) * count;
}
animatedImage = [UIImage animatedImageWithImages:images duration:duration];
}
CFRelease(source);
// 这里实际是一个_UIAnimatedImage,返回的image 可以直接让imageView加载
return animatedImage;
}
优点:简单粗暴.较早版本的SDwebImage就采用这种方式加载gif图片,但是新版的SD采用的是默认取gif的第一帧图片,不支持播放gif.
缺点:占用内存太大,如果遇到gif的组成张数比较多,就危险了
方式二:这个思路借鉴了YYImage对GIF的处理方式,在加载较多张图片组成的gif的图片时候,仍然可以保持较低的内存,不过cpu的消耗增多.
采用: 自己手动获取gif的每一帧图片,和每一帧图片的播放时间,自定义定时器播放.根据当前内存的大小,决定当前可同时读入内存中图片的张数.
具体步骤(代码比较复杂,详细参考demo:https://github.com/tianliangyihou/LBPhotoBrowser)
1.获取当前手机可以利用的内存和当前展示的gif图片每帧图片加载到内存占用的大小,以取得当前内存可以加载gif的最大帧数.
最大加载帧数 = 可利用内存 / 每帧图片的大小.
2 使用CADisplayLink作为定时器,开始展示当前帧的图片
3 获取当前帧的展示时间,展示完毕,切换下一帧图片.
当在展示当前帧的图片的时候, 异步线程(自定义NSOperation)去取下一帧的图片,以供当前帧的图片展示
完毕后,直接从缓存的buffer中读取.
4.当gif图片的帧数大于当前内存适合加载的帧数的时候,buffer(字典)会不断的移除已展示过的图片,来确保加载到内存中的图片数稳定.
如果小于可加载的最大帧数,直接全部加载到内存,节省CPU.
5.LBPhotoBrowser为了保证较低的CPU消耗,即使在图片浏览器加载多张gif的时候,也会保证同一时间内,只会对一张gif进行处理,不会同时去解压多张gif图片.
PS:效果图中那个带箭头的gif图片,由144张图片组成，但是内存占用却是很小的。demo中的效果在真机上明显。
优点:低内存,因为是自己控制gif的播放,所以可以对gif进行 暂停,后退和前进的操作
缺点:消耗一定的CPU.
2 .灵活多变:
(1)对gif的加载提供了,两种方式,只需修改一个属性既可完成
// 开启这个选项后 在加载gif的时候 会大大的降低内存.与YYImage对gif的内存优化思路一样 default is NO
@property (nonatomic , assign)BOOL lowGifMemory;
(2)对与当图片放大之后,拖拽消失的方式也提供了LBMaximalImageViewOnDragDismmissStyle 两种方式可以选择
// 当图片放大到超过屏幕尺寸时候 拖动的消失方式 Default is LBMaximalImageViewOnDragDismmissStyleOne
@property (nonatomic , assign)LBMaximalImageViewOnDragDismmissStyle style;
(3)对于长按弹出的操作框,LBPhotoBrowser提供了默认的类似微信的操作框,如果开发者有自己的操作框,实现一个Block即可自定义长按的弹出窗
// 添加长按手势的默认控件
[[[LBPhotoBrowserManager defaultManager] addLongPressShowTitles:self.titles] addTitleClickCallbackBlock:^(UIImage *image, NSIndexPath *indexPath, NSString *title) {
LBPhotoBrowseLog(@"%@ %@ %@",image,indexPath,title);
}];
或者
// 添加自定义的长按控件
- (instancetype)addLongPressCustomViewBlock:(UIView *(^)(UIImage *image, NSIndexPath *indexPath))longPressBlock;
(4)对于每张图片在加载的时候,显示的站位图,依然提供默认的占位图.开发者也可以自己实现一个Block,就可定义每一张图片的占位图
[[LBPhotoBrowserManager defaultManager] addPlaceHoldImageCallBackBlock:^UIImage *(NSIndexPath *indexPath) {
LBPhotoBrowseLog(@"%@",indexPath);
return [UIImage imageNamed:@"LBLoading.png"];
}];
(5)采用了函数式编程,你可以这么写
[[[[LBPhotoBrowseManager defaultManager] addLongPressShowTitles:self.titles] addTitleClickCallbackBlock:^(UIImage *image, NSIndexPath *indexPath, NSString *title) {
LBPhotoBrowseLog(@"%@ %@ %@",image,indexPath,title);
}]addPlaceHoldImageCallBackBlock:^UIImage *(NSIndexPath *indexPath) {
return [UIImage imageNamed:@"LBLoading.png"];
}].lowGifMemory = YES;
3. 简单易用
本着一行代码搞定微信的图片浏览的目的.实现这个效果也只需要,一行代码即可. 具体可见https://github.com/tianliangyihou/LBPhotoBrowser .
开发者只需跟LBPhotoBrowseManager打交道即可.API简单.不过依赖于SDWebImage.
/**
展示图片
@param urls 需要加载的图片的URL数组
@param imageViews 传入需要大图显示的imageViews 因为将来需要在对应的地方imageView用动画消除掉,主要是取imageView的frame
@param index 点击图片的index
@param superView 当前View的父View
*/
- (void)showImageWithURLArray:(NSArray *)urls fromImageViews:(NSArray *)imageViews andSelectedIndex:(int)index andImageViewSuperView:(UIView *)superView;
Example:
[[LBPhotoBrowserManager defaultManager] showImageWithURLArray:_urls fromImageViews: _imageViews andSelectedIndex:(int)tap.view.tag andImageViewSuperView:self.view];
3DTouch功能
3DTouch功能的实现,采用了代理模式 即3步
1 注册代理
2 遵守协议
3 实现代理方法
LBPhotoBrowser默认不支持3Dtouch功能,如果需要添加3DTouch功能 则需要给需要添加3Dtouch的控制器`#import "LB3DTouchVC.h"
1 实现下面这个方法(注册代理)
- (void)lb_registerForPreviewingWithDelegate:(id <UIViewControllerPreviewingDelegate>)delegate sourceViews:(NSArray<UIView *> *)sourceViews previewActionTitles:(NSArray <NSString *>*)titles;
Example:
[self lb_registerForPreviewingWithDelegate:self sourceViews:_imageViews previewActionTitles:@[@"保存图片",@"分享",@"识别二维码",@"取消"]];
2 给对应的控制器 遵守协议 <UIViewControllerPreviewingDelegate>
3 实现代理方法 , 代理方法
@protocol LBTouchVCPreviewingDelegate <UIViewControllerPreviewingDelegate>
@required
// 3Dtouch触发后的事件--> 即接下来应该展示什么
- (void)lb_showPhotoBrowserFormImageView:(UIImageView *_Nullable)imageView;
@optional
// 3Dtouch下面的操作按钮的点击事件
- (void)lb_userDidSelectedPreviewTitle:(NSString *_Nullable)title;
// 3Dtouch下面的操作按钮的样式 不实现该方法,采用默认样式
- (UIPreviewActionStyle)lb_previewActionStyleForActionTitle:(NSString *_Nullable)title index:(NSInteger)index inTitles:(NSArray <NSString *>*_Nullable)titles;
// 当3dTouch预览图片还没有加载出来显示的图片 不实现该方法 采用默认样式
- (UIImage *)lb_3DTouchPlaceholderImageForImageView:(UIImageView *)imageView;
@end
通过collectionView展示LBPhotoBrowser
当你只需展示功能的时候,下面一行代码即可搞定:
[LBPhotoBrowserManager defaultManager] showImageWithURLArray:self.urlStrings fromCollectionView:collectionView selectedIndex:(int)indexPath.row unwantedUrls:self.unwantedStrings];
当你需要添加一些回调的情况,还有关于gif的处理方式,只需在后面addBlock即可,例如:
[[[LBPhotoBrowserManager defaultManager] addLongPressShowTitles:@[@"保存图片",@"分享",@"识别二维码",@"取消"]] addTitleClickCallbackBlock:^(UIImage *image, NSIndexPath *indexPath, NSString *title) {
LBPhotoBrowserLog(@"%@",title);
}].lowGifMemory = YES; //lowGifMemory 默认是NO
当你通过collectionView展示的时候,你可能会需要调节LBPhotoBrowser中的collectionView和自己collectionView的联动方式,你可以通过
[LBPhotoBrowserManager defaultManager].helper.scrollPosition 来改变photoBrowser和用户collectionView的联动方式
LBPhotoBrowserManager的属性:
@property (nonatomic , strong)LBPhotoBrowserShowHelper *helper;
