Giter Site home page Giter Site logo

indulgein / ybimagebrowser Goto Github PK

View Code? Open in Web Editor NEW
2.4K 30.0 465.0 196.32 MB

iOS image browser / iOS 图片浏览器 (支持视频)

License: MIT License

Ruby 0.54% Objective-C 99.46%
image-browser image-processing optimizing-performance support-video image-viewer

ybimagebrowser's Introduction

CocoaPods  CocoaPods  License 

iOS 图片浏览器,功能强大,易于拓展,性能优化和内存控制让其运行更加的流畅和稳健。

相关文章:

注意事项

关于 3.x 版本 (使用 2.x 版本请切换到 store_2.x 分支)

为了解决 2.x 版本的设计缺陷和代码漏洞,特进行了 3.x 深度重构,所以没办法做到向下兼容,希望社区朋友们能体谅,根据情况进行版本迁移。

提问须知

考虑到笔者的精力问题,遇到问题请先查看 API、效仿 Demo、阅读 README、搜索 Issues。请不要提出与组件无关的问题,比如 CocoaPods 的错误,如果是 BUG 或 Feature 最好是提 Issue。

目录

预览

特性

  • 支持 GIF,APNG,WebP 等本地和网络图片类型(由 YYImage、SDWebImage 提供支持)。
  • 支持系统相册图片和视频。
  • 支持简单的视频播放。
  • 支持高清图浏览。
  • 支持图片预处理(比如添加水印)。
  • 支持根据图片的大小判断是否需要预先解码(精确控制内存)。
  • 支持图片压缩、裁剪的界限设定。
  • 支持修改下载图片的 NSURLRequest。
  • 支持主动旋转或跟随控制器旋转。
  • 支持自定义图标。
  • 支持自定义 Toast/Loading。
  • 支持自定义文案(默认提供中文和英文)。
  • 支持自定义工具视图(比如查看原图功能)。
  • 支持自定义 Cell(比如添加一个广告模块)。
  • 支持添加到其它父视图上使用(比如加到控制器上)。
  • 支持转场动效、图片布局等深度定制。
  • 支持数据重载、局部更新。
  • 支持低粒度的内存控制和性能调优。
  • 极致的性能优化和严格的内存控制让其运行更加的流畅和稳健。

安装

CocoaPods

支持分库导入,核心部分就是图片浏览功能,视频播放作为拓展功能按需导入。

  1. 在 Podfile 中添加:
pod 'YBImageBrowser'
pod 'YBImageBrowser/Video'  //视频功能需添加
  1. 执行 pod installpod update
  2. 导入 <YBImageBrowser/YBImageBrowser.h>,视频功能需导入<YBImageBrowser/YBIBVideoData.h>
  3. 注意:如果你需要支持 WebP,可以在 Podfile 中添加 pod 'YYImage/WebP'

若搜索不到库,可执行pod repo update,或使用 rm ~/Library/Caches/CocoaPods/search_index.json 移除本地索引然后再执行安装,或更新一下 CocoaPods 版本。

去除 SDWebImage 的依赖(版本需 >= 3.0.4)

Podfile 相应的配置变为:

pod 'YBImageBrowser/NOSD'
pod 'YBImageBrowser/VideoNOSD'  //视频功能需添加

这时你必须定义一个类实现YBIBWebImageMediator协议,并赋值给YBImageBrowser类的webImageMediator属性(可以参考 YBIBDefaultWebImageMediator的实现)。

手动导入

  1. 下载 YBImageBrowser 文件夹所有内容并且拖入你的工程中,视频功能还需下载 Video 文件夹所有内容。
  2. 链接以下 frameworks:
  • SDWebImage
  • YYImage
  1. 导入 YBImageBrowser.h,视频功能需导入YBIBVideoData.h
  2. 注意:如果你需要支持 WebP,可以在 Podfile 中添加 pod 'YYImage/WebP',或者到手动下载 YYImage 仓库 的 webP 支持文件。

用法

初始化YBImageBrowser并且赋值数据源id<YBIBDataProtocol>,默认提供YBIBImageData (图片) 和YBIBVideoData (视频) 两种数据源。

图片处理是组件的核心,笔者精力有限,视频播放做得很轻量,若有更高的要求最好是自定义 Cell,望体谅。

Demo 中提供了很多示例代码,演示较复杂的拓展方式,所以若需要深度定制最好是下载 Demo 查看。

建议不对YBImageBrowser进行复用,目前还存在一些逻辑漏洞。

基本使用

// 本地图片
YBIBImageData *data0 = [YBIBImageData new];
data0.imageName = ...;
data0.projectiveView = ...;

// 网络图片
YBIBImageData *data1 = [YBIBImageData new];
data1.imageURL = ...;
data1.projectiveView = ...;

// 视频
YBIBVideoData *data2 = [YBIBVideoData new];
data2.videoURL = ...;
data2.projectiveView = ...;

YBImageBrowser *browser = [YBImageBrowser new];
browser.dataSourceArray = @[data0, data1, data2];
browser.currentPage = ...;
[browser show];

设置支持的旋转方向

当图片浏览器依托的 UIViewController 仅支持一个方向:

这种情况通过YBImageBrowser.new.supportedOrientations设置图片浏览器支持的旋转方向。

否则:

上面的属性将失效,图片浏览器会跟随控制器的旋转而旋转,由于各种原因这种情况的旋转过渡有瑕疵,建议不使用这种方式。

自定义图标

修改YBIBIconManager.sharedManager实例的属性。

自定义文案

修改YBIBCopywriter.sharedCopywriter实例的属性。

自定义 Toast / Loading

实现YBIBAuxiliaryViewHandler协议,并且赋值给YBImageBrowser.new.auxiliaryViewHandler属性,可参考和协议同名的默认实现类。

自定义工具视图(ToolView)

默认实现的YBImageBrowser.new.defaultToolViewHandler处理器可以做一些属性配置,当满足不了业务需求时,最好是进行自定义,参考默认实现或 Demo 中“查看原图”功能实现。

定义一个或多个类实现YBIBToolViewHandler协议,并且装入YBImageBrowser.new.toolViewHandlers数组属性。建议使用一个中介者来实现这个协议,然后所有的工具视图都由这个中介者来管理,当然也可以让每一个自定义的工具 UIView 都实现YBIBToolViewHandler协议,请根据具体需求取舍。

自定义 Cell

当默认提供的YBIBImageData (图片) 和YBIBVideoData (视频) 满足不了需求时,可自定义拓展 Cell,参考默认实现或 Demo 中的示例代码。

定义一个实现YBIBCellProtocol协议的UICollectionViewCell类和一个实现YBIBDataProtocol协议的数据类,当要求不高时实现必选协议方法就能跑起来了,若对交互有要求就相对比较复杂,最好是参考默认的交互动效实现。

在某些场景下,甚至可以直接继承项目中的 Cell 来做自定义。

常见问题

SDWebImage Pods 版本兼容问题

SDWebImage 有两种情况会出现兼容问题:该库对 SDWebImage 采用模糊向上依赖,但将来 SDWebImage 可能没做好向下兼容;当其它库依赖 SDWebImage 更低或更高 API 不兼容版本。对于这种情况,可以尝试以下方式解决:

  • Podfile 中采用去除 SDWebImage 依赖的方式导入,只需要实现一个中介者(见安装部分)。
  • 更改其它库对 SDWebImage 的依赖版本。
  • 手动导入 YBImageBrowser,然后修改YBIBDefaultWebImageMediator文件。

为什么不去除依赖 SDWebImage 自己实现?时间成本太高。 为什么不拖入 SDWebImage 修改类名?会扩大组件的体积,若外部有 SDWebImage 就存在一份多余代码。

依赖的 YYImage 与项目依赖的 YYKit 冲突

实际上 YYKit 有把各个组件拆分出来,建议项目中分开导入:

pod 'YYModel'
pod 'YYCache'
pod 'YYImage'
pod 'YYWebImage'
pod 'YYText'
...

而且这样更灵活便于取舍。

低内存设备 OOM 问题

组件内部会降低在低内存设备上的性能,减小内存占用,但若高清图过多,可能需要手动去控制(以下是硬件消耗很低的状态):

YBIBImageData *data = YBIBImageData.new;
// 取消预解码
data.shouldPreDecodeAsync = NO;
// 直接设大触发裁剪比例,绘制更小的裁剪区域压力更小,不过可能会让用户感觉奇怪,放很大才开始裁剪显示高清局部(这个属性很多时候不需要显式设置,内部会动态计算)
data.cuttingZoomScale = 10;

YBImageBrowser *browser = YBImageBrowser.new;
// 调低图片的缓存数量
browser.ybib_imageCache.imageCacheCountLimit = 1;
// 预加载数量设为 0
browser.preloadCount = 0;

视频播放功能简陋

关于大家提的关于视频的需求,有些成本过高,笔者精力有限望体谅。若组件默认的视频播放器满足不了需求,就自定义一个 Cell 吧,把成熟的播放器集成到组件中肯定更加的稳定。

关于 Swift 版本

考虑时间成本,目前没有写 Swift 版本的计划。

ybimagebrowser's People

Contributors

indulgein avatar shenguanjiejie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ybimagebrowser's Issues

这个怎么自定义长按事件?

fuctionDataArray置为空,toolBar 和 functionBar都隐藏掉
之后可以自定义长按事件吗?或者长按弹出的ActionSheet可以自定义吗?

希望自定义右上角的功能按钮的方式更灵活

现在有个问题,假如我右上角要展示一个删除的按钮(我要的是删除按钮),那么很难实现这种功能,在fuctionDataArray.count==1并且ID=YBImageBrowserFunctionModel_ID_savePictureToAlbum时是保存功能,只能实现图标的更换,不能实现功能的更换。
我觉得应该修改一下下面的实现:

  • (void)yBImageBrowserToolBar:(YBImageBrowserToolBar *)imageBrowserToolBar didClickRightButton:(UIButton *)button {
    if (!self.fuctionDataArray.count) return;
    if (self.fuctionDataArray.count == 1 && [self.fuctionDataArray[0].ID isEqualToString:YBImageBrowserFunctionModel_ID_savePictureToAlbum]) {
    //直接保存图片
    [self savePhotoToAlbumWithCurrentIndex];
    } else {
    //弹出功能栏
    if (_functionBar) {
    [_functionBar show];
    }
    }
    }

应该在count==1并且![self.fuctionDataArray[0].ID isEqualToString:YBImageBrowserFunctionModel_ID_savePictureToAlbum]时应该给一个方便的回调方法,或者通过代理的方式询问用户是否要自定义这个按钮点击事件。

我想这种需求(只想在右上角自定义一个功能按钮,而不是非要通过类似actionsheet的方式弹出超过一个的功能列表)还是蛮大的,望优化。

另外这个actionBar弹出来的页面没有适配iPhone X。

内存泄露问题

貌似cell中block有循环引用了,导致内存泄露。有时间帮看下,没时间我就自己解决了。

占位图片的问题

网络比较慢或者图片比较大的时候加载是页面时黑色的,就一个进度视图显示,没有占位图片,感觉体验不好,如果作者能添加在加载的时候有占位图显示就比较不错了.体验会更好些

闪一下

在加载图片的时候出现 HUD,可是HUD结束的那一瞬间会闪一下才出现原图,能不能做到像微信一样,不会闪那一下。这个是我们公司后端提出的问题😂

无法用YYWebImage替换SD

1536133585831

发现无法方便的用YY替换SD,因为YY的completion返回值中,没有NSData,导致外面无法根据NSData获取到图片类型,如gif类型

图片太大总是加载失败!

你好,好像图片过大总是加载失败,图片大小有限制吗?在代码里没有看到相关设置。我只能限制上传的图片大小来解决这个问题吗?

查看长图左右晃动

在 ImageBrowserCell 里,如果设置 scrollView.alwaysBounceHorizontal = YES, 查看长图的时候图片在 horizontal 方向会超出屏幕,将这个属性设置为 NO 可以吗?

图片当前index不显示

加载网络图片时,点第一张图片时不会显示图片的index , 但如果先点击后面的再滑动到第一张就会显示了。

如何实现预览的时候删除某一张图片刷新界面

需求是预览时右上角删除, 删除后刷新数据源

虽然备注写了不要尝试刷新数据源 但还是想尝试

  • (void)setDataArray:(NSArray<YBImageBrowserModel *> *)dataArray {
    if (!dataArray || !dataArray.count) {
    YBLOG_ERROR(@"dataArray is invalid");
    return;
    }
    _dataArray = dataArray;
    [self numberInYBImageBrowserView:_browserView];
    [_browserView reloadData];
    }

我在这个方法中尝试reload列表. 还有什么思路吗 还是根本不支持这种删除操作

保存宽图(全景图片)会把预览小图也保存下来

保存宽图(全景图片)会把预览小图和原始大图都保存下来。
推测是在 YBImageBrowser.m 的569行把 else if 写成了 if,我这样修改过后就没问题了

以下是示例,请替换你的bug复现步骤:
预览图sourceImage的地址: http://img.okay.do/acagrid/usercontent/moment/e6a217e7ec4927f6029b73012d4a0c57_W3705_H828_G0?x-oss-process=image/resize,l_400

大图地址:http://img.okay.do/acagrid/usercontent/moment/e6a217e7ec4927f6029b73012d4a0c57_W3705_H828_G0

一点点优化建议

您好,是否可以考虑实现一下在照片浏览器弹出的过程中将对应collectionview对应位置的imageview设置为空白,在下拉返回图片缩小到对应位置的时候再显示的功能,类似新版微博的效果

能否支持长按事件

做到类似微信聊天界面图片查看的效果,目前还差两个需求不满足:
1.能否支持长按事件
2.图片原始大小的时候,不要上滑事件

加载网络图片缩小动画效果不好

如gif图所示,所加载的网络图片尺寸比例和sourceObject(比如cell的imageView)的尺寸(长宽)比例不一样就会出现这种情况,比例差异越大效果越不好。
gif

SDWebImage pods依赖版本冲突问题

冲突导致没办法安装,作者可不可以考虑,制作这个组件时不使用pod。建一个第三方库的目录,将SDWebImage和FLAnimatedImage,放进去。并都把类名都加一下自己的YB前缀。这样方便集成,不依赖其他pod版本,也方便使用这个库

[!] CocoaPods could not find compatible versions for pod "SDWebImage":
  In snapshot (Podfile.lock):
    SDWebImage (= 4.2.3, ~> 4.2.2)

  In Podfile:
    NIMKit/Full was resolved to 2.7.0, which depends on
      NIMKit/Core (= 2.7.0) was resolved to 2.7.0, which depends on
        SDWebImage (~> 4.2.2)

    YBImageBrowser was resolved to 1.0.7, which depends on
      SDWebImage (~> 4.3.3)

    ZLPhotoBrowser was resolved to 2.6.5, which depends on
      SDWebImage

循环引用

提醒一下,block里面 self 没有弱引用,还有图片下载完成以及失败 更新UI没放在主线程,

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.