闲话
BrowsePictureViewController
顾名思义,这是一个关于图片浏览的ViewController,这是项目中的一个图片浏览器,我将他抽离出来,做成了第三方依赖~一来当当雷锋,为开源事业做出一点贡献(放屁这么多图片浏览的开源库谁来用你的?)二来我是个有代码结构洁癖的人,项目写的多了,项目目录或者项目的代码的耦合性一般都会不堪入目,于是就开始重构,其中,这个图片浏览器就是我重构出来的东西。关于这个图片浏览器,欢迎大家提出一些issue或者fork解决issue并提交pullrequest。
再随便讲讲这个图片浏览器的来源,最近在做的项目叫做“人言”(已经在Appstore上架,安卓应该也快要完成了),作为一个开发人员,我不对这个产品的性质或者趋势做很多的评价,我只能说这个产品我觉得蛮好,而且会更好,要是有兴趣的朋友也可以去下载看看(bug之类的事情还是会有的,各位手下留情,嘴下留情,给我们时间和建议,我们会做的更好,无论是信我还是信这个产品团队)。
如果对这个产品的其他交互和UI功能点有需求,可以联系我,我可以考虑适当开源,这也是我一直在做的事情。
正题
主要实现的功能有:
- 图片浏览(多图 && 单图)
- 图片保存
- 图片添加水印 (可选)
- 大图浏览的时候会有陀螺仪效果(类似于facebook paper图片浏览效果)
接口的一些介绍
BrowsePictureViewController.h
+ (instancetype)create;
这是个创建接口,这个接口可以直接创建一个BrowsePictureViewController的对象
- (UIImageView *)currentImageView;
- (UIImageView *)currentOriginImageView;
- (void)showHideAllViews:(BOOL)show;
这三个接口可以无视,是提供给转场动画的。
@property (assign, nonatomic) BOOL scaleToMax;
这个属性设置了在跳转到图片浏览的ViewController的时候是让图片填充满全屏(scaleToMax == YES
),还是让图片可以完全显示(scaleToMax == NO
),后者是微信图片浏览的默认模式,而前者一般是微信图片浏览事双击后的状态
@property (assign, nonatomic) NSInteger startPage;
这个属性设置了进入图片浏览器的时候的起始照片的下标
以上两个属性都需要在create
调用之后设置,并都含有默认值,scaleToMax
的默认值为NO
,startPage
的默认值是0
BrowsePictureViewControllerDelegate
- (NSInteger)numberOfImagesInBrowsePictureViewController:(BrowsePictureViewController *)browsePitureViewController;
这个delegate返回这个图片浏览器一共显示的图片张数,可选,如果没有实现这个方法,则默认为1张。
- (NSString *)browsePictureViewController:(BrowsePictureViewController *)browsePictureViewController textAtIndex:(NSInteger)index;
这个代理返回水印文字,如果没有实现或者返回nil这不添加水印(关于水印是一个需求,没有该需求的使用者可以不实现这个delegate)
- (void)browsePictureViewController:(BrowsePictureViewController *)browsePictureViewController downLoadImage:(ImageDownLoadFinish)downLoadImage index:(NSInteger)Index;
这个代理给出一个downLoadImage
的Block对象,其作用是让业务层能够下载这个index的图片并通过调用downLoadImage(image, index)
的方法返回一个image
我觉得这是一个我很多图片浏览器不一样的地方,其他的图片浏览器一般都会向你索要一个url,然后会在自己内部通过自己实现的HTTP
请求下载一个图片或者通过SDWebImage
之类的库来实现一个下载图片的逻辑,我觉得这个不是很好,首先,各个App的实现图片下载的方法不一样,在图片浏览器内部实现如果和这个App的其他方法不同的话,感觉很多代码就重复了,没什么意思,然后我们遇到的很坑爹的问题就是类似使用OSS图片存储一般一个url都会有过期时间,所以当url过期的时候每个App一定会有各自不同的图片下载逻辑,因此,我觉得图片下载是一个和业务相关的东西,可以放到外面实现,而不应该在内部实现,这么想来美中不足的就是我使用了一个代理待实现外部下载图片,其实我应该使用一种全局的,设置起来更加方便的方式实现外部下载图片,这是个值得思考的问题,有机会需要再写一下。
- (void)browsePictureViewControllerDidFinishSaving:(BrowsePictureViewController *)browsePictureViewController;
这个方法通知外部图片浏览器已经保存了图片
- (UIImageView *)browsePictureViewController:(BrowsePictureViewController *)browsePictureViewController imageViewAtIndex:(NSInteger)index;
这个代理返回通过一个下表index
返回一个UIImageView
的对象,这个对象就是当前在浏览的图片的在外部的原始图片
BrowsePictureCustomConfig
@interface BrowsePictureCustomConfig : NSObject
@property (strong, nonatomic) UIImage *waterMarkImge;
@property (strong, nonatomic) NSString *saveString;
+ (instancetype)sharedConfig;
这个类主要产生一个单例,设置一些属性比如水印的图片,保存按钮的文字(主要用于国际化字符串)
UINavigationController (BrowsePictureViewController)
@interface UINavigationController (BrowsePictureViewController)
- (void)pushBrowsePictureViewController:(BrowsePictureViewController *)browsePictureViewController;
@end
正对这个ViewController提供一个PushViewController的方法
几个技术点
关于切换动画
切换动画我主要使用了pop,总之最近可能算是迷上这个动画引擎库了,警告据我所知,这个动画引擎配合UIKit的组件还是会有点问题的,可能会需要和AsyncDisplayKit一起服用效果更佳,关于pop的使用可能在之后会写一篇介绍,不过这些文章真的满大街都是,也就不想赘述了。
可能大多数的胸弟在使用pop的时候都回去使用它自带的那些属性动画,不过我觉得自己写属性来做动画会更佳炫酷,比如我的过场动画里面就设置了一个transitionProgress
的属性,然后在这个属性的set方法中重写一点更具这个属性做出界面变换的代码,当我将这个属性的get&set做成属性的动画的时候,在使用popanimation来控制进度,就能轻松的完成一个组合动画了。具体代码我这边粘贴一些:
- (void)setTransitionProgress:(CGFloat)transitionProgress {
_transitionProgress = transitionProgress;
animationView.frame = [ImageViewApearTransition rectWithProgress:transitionProgress startRect:[self fromFrame] toRect:[self toFrame]];
animationView.layer.cornerRadius = [ImageViewApearTransition valueWithProgress:transitionProgress startValue:originImageView.layer.cornerRadius toValue:0];
}
- (POPAnimatableProperty *)springAnimationProperty {
POPAnimatableProperty *springAnimationProperty = [POPAnimatableProperty propertyWithName:kPOPIMAGEVIEW_APEAR_PROPERTY initializer:^(POPMutableAnimatableProperty *prop) {
prop.readBlock = ^(id obj, CGFloat values[]) {
values[0] = [obj transitionProgress];
};
prop.writeBlock = ^(id obj, const CGFloat values[]) {
[obj setTransitionProgress:values[0]];
};
prop.threshold = 0.01;
}];
return springAnimationProperty;
}
图片的缩放
这里使用scrollView开经行图片的缩放,这里有点要注意的就是,我是使用xib来布局的,这边不能使用autolayout,要使用原始的autoresize,然后在由于多图片是使用UICollectionView来实现的,所以有爱有坑爹的重用会让你很痛苦,在每次更新Cell的图片的时候,一定千万记住要重新设置ScollView的zoom值,这个真的非常重要!
水印 && 陀螺仪
这个主要看代码就好了,陀螺仪如果要看起来相对动的比较柔和的话,需要在每次更新图片位置的时候动画的方式来调用,而不是直接修改
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:0.3f delay:0.0f options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionCurveEaseOut animations:^{
[_scrollView setContentOffset:CGPointMake(_previousValue, 0) animated:NO];
} completion:nil];
});