高仿微信图片浏览代码解析，附源码

转载

#公众号：iOS逆向 2021-12-17 15:26:34

文章标签 加载 3d ios 文章分类 代码人生

前言

LBPhotoBrowser 是本人花费了也不知道具体有多久写的一个类似微信的图片浏览器.经过了N测试,比较稳定.实现基本的浏览效果,只需一行代码。

github地址

https://github.com/tianliangyihou/LBPhotoBrowser

如果您觉得不错，记得给一个star。

效果图

高仿微信图片浏览代码解析，附源码_加载

LBPhotoBrowser的结构

/**
控件的基本结构
|---------------LBTapDetectingImageView(继承自UIImageView)----------| (最上层)
|---------------LBZoomScrollView(继承自UIScrollView)------------------------|
|---------------LBPhotoCollectionViewCell(继承自UICollectionViewCell)--------|
|---------------UICollectionView--------------------------------------------|
|---------------LBPhotoBrowserView(继承自UIView)------------------------|(最下层)
*/

支持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。

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. 简单易用

本着一行代码搞定微信的图片浏览的目的.实现这个效果也只需要,一行代码即可. 具体可见demo。开发者只需跟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