测试已测试 | ✗ |
Lang语言 | Obj-CObjective C |
许可证 | MIT |
发布最后发布 | 2017 年 6 月 |
由 Zhao Yiqi 维护。
ZYQPhotoBrowser 是一个基于 MWPhotoBrowser 的新实现。
我们加入了从 Facebook 和 Tweetbot 的相册浏览中获得的用户体验和技术特性。
以下代码片段展示了如何实现相册浏览器的示例。
首先创建一个包含 ZYQPhoto 对象的 photos 数组
// URLs array
NSArray *photosURL = @[
[NSURL URLWithString:@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498113175410&di=bd10bcd2b2a45906259f4e823bbf9df6&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F27%2F45%2F71r58PICmDM_1024.jpg"]
,[NSURL URLWithString:@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498113236506&di=004225eba24d74087feaeaa9484db047&imgtype=0&src=http%3A%2F%2Fic.topit.me%2Fc%2F3c%2Ff6%2F1110230348da8f63cco.jpg"]
,[NSURL URLWithString:@"https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1498103182&di=eb660bada9ced24acbc9153464aaedcd&src=http://www.bz55.com/uploads/allimg/141120/139-141120151946.jpg"]
,[NSURL URLWithString:@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498139264538&di=6e5cedbfecc6a0e4bce2fc0005f56785&imgtype=0&src=http%3A%2F%2Fimg3.a0bi.com%2Fupload%2Fttq%2F20140719%2F1405761279700.gif"]
];
// Create an array to store ZYQPhoto objects
NSMutableArray *photos = [NSMutableArray new];
for (NSURL *url in photosURL) {
ZYQPhoto *photo = [ZYQPhoto photoWithURL:url];
[photos addObject:photo];
}
// Or use this constructor to receive an NSArray of ZYQPhoto objects from your NSURL objects
NSArray *photos = [ZYQPhoto photosWithURLs:photosURL];
有两种主要的方式展示 photoBrowser:一种是屏幕上的淡入,另一种是从现有视图的缩放效果。
使用简单的淡入过渡效果
ZYQPhotoBrowser *browser = [[ZYQPhotoBrowser alloc] initWithPhotos:photos];
从视图进行缩放效果
ZYQPhotoBrowser *browser = [[ZYQPhotoBrowser alloc] initWithPhotos:photos animatedFromView:sender];
在使用此动画时,您可以设置 scaleImage
属性,如果视图中的图片与浏览器中显示的图片不相同时,它可以动态地缩放图片。
browser.scaleImage = buttonSender.currentImage;
使用模态视图控制器进行展示
[self presentViewController:browser animated:YES completion:nil];
您可以根据需求定制工具栏。有三个布尔型属性可供设置:displayActionButton (默认为 YES)、displayArrowButton (默认为 YES) 和 displayCounterLabel (默认为 NO)。如果您根本不需要工具栏,可以将 displayToolbar 设置为 NO。
工具栏配置示例
browser.displayActionButton = NO;
browser.displayArrowButton = YES;
browser.displayCounterLabel = YES;
您可以在工具栏上使用您自己的箭头图片
browser.leftArrowImage = [UIImage imageNamed:@"PhotoBrowser_customArrowLeft.png"];
browser.rightArrowImage = [UIImage imageNamed:@"PhotoBrowser_customArrowRight.png"];
browser.leftArrowSelectedImage = [UIImage imageNamed:@"PhotoBrowser_customArrowLeftSelected.png"];
browser.rightArrowSelectedImage = [UIImage imageNamed:@"PhotoBrowser_customArrowRightSelected.png"];
如果您想使用自定义的操作,请设置 actionButtonTitles 数组并用操作表单的标题,然后从 ZYQPhotoBrowser 代理实现 photoBrowser:didDismissActionSheetWithButtonIndex:photoIndex: 方法。
browser.actionButtonTitles = @[@"Option 1", @"Option 2", @"Option 3", @"Option 4"];
您可以进行其他定制,例如:使用白色背景颜色、不显示完成按钮以及更改完成按钮的背景图片。
browser.useWhiteBackgroundColor = YES;
browser.displayDoneButton = NO;
browser.doneButtonImage = [UIImage imageNamed:@"PhotoBrowser_customDoneButton.png"];
如果您想保留用户滚动时显示的界面
browser.autoHideInterface = NO;
在展示和消失图片时,您可以使用平滑的缩放动画
browser.useZoomAnimation = YES;
如果展示视图控制器没有状态栏,在某些情况下您可以强制隐藏它
browser.forceHideStatusBar = YES;
您可以选择禁用垂直的消失滑动手势
browser.disableVerticalSwipe = YES;
通过触摸来消失相册浏览器(而不是显示/隐藏控件)
browser.dismissOnTouch = YES;
您可以使用自定义背景
browser.customBackgroud=[[BackgroudBlurView alloc] init];
您可以简单地通过在特定图片上设置 caption
属性来显示图片标题。
ZYQPhoto *photo = [ZYQPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo2l" ofType:@"jpg"]];
photo.caption = @"Campervan";
如果没有设置标题属性,则不会显示标题。
默认情况下,标题是一个简单的黑色透明视图,上面以白色显示照片的标题。如果您想实现自己的标题视图,请按照以下步骤操作
ZYQPhoto
的子类来存储您的照片,这样可以存储比简单的标题字符串更多的数据。ZYQCaptionView
继承并覆盖 -setupCaption
和 -sizeThatFits:
(以及您认为合适的任何其他 UIView 方法)以布局您自己的视图并设置其大小。有关更多信息,请参阅 ZYQCaptionView.h
-photoBrowser:captionViewForPhotoAtIndex:
ZYQPhotoBrowser 代理方法(如下所示)。自定义标题视图的示例代理方法
- (ZYQCaptionView *)photoBrowser:(ZYQPhotoBrowser *)photoBrowser captionViewForPhotoAtIndex:(NSUInteger)index {
ZYQPhoto *photo = [self.photos objectAtIndex:index];
MyCaptionViewSubclass *captionView = [[MyCaptionViewSubclass alloc] initWithPhoto:photo];
return captionView;
}
您需要实现协议
//ZYQPhotoBrowser's
@protocol ZYQPhotoBrowserCustomProtocol <NSObject>
@required
- (void)custom_animateView:(UIView *)view toFrame:(CGRect)frame completion:(void (^)(void))completion;
@end
//ZYQPhoto's
@protocol ZYQPhotoCustomLoadProtocol <NSObject>
@required
-(void)loadImageWithURL:(NSURL*)url updateProgressBlock:(void (^)(CGFloat progress))updateProgressBlock completedBlock:(void (^)(UIImage *image,NSError *error))completedBlock;
-(id)loadImageWithFile:(NSString *)path;
@end
//ZYQZoomingScrollView's
@class ZYQPhotoBrowser;
@protocol ZYQZoomingScrollViewCustomProtocol <NSObject>
@required
-(id)getCustomProgressViewWithBrowser:(ZYQPhotoBrowser*)browser;
@end
//Your ProgressView's
@protocol ZYQProgressViewProtocol <NSObject>
@required
@property(nonatomic,assign)CGFloat zyq_progress;
@end
示例
在 Podfile 中添加 pod 'YYWebImage'
。
@interface ZYQPhoto (Custom)<ZYQPhotoCustomLoadProtocol>
@end
@implementation ZYQPhoto (Custom)
-(void)loadImageWithURL:(NSURL*)url updateProgressBlock:(void (^)(CGFloat progress))updateProgressBlock completedBlock:(void (^)(UIImage *image,NSError *error))completedBlock{
[[YYWebImageManager sharedManager] requestImageWithURL:url options:YYWebImageOptionAllowBackgroundTask progress:^(NSInteger receivedSize, NSInteger expectedSize) {
if (updateProgressBlock) {
updateProgressBlock(receivedSize/expectedSize*1.0);
}
} transform:nil completion:^(UIImage * _Nullable image, NSURL * _Nonnull url, YYWebImageFromType from, YYWebImageStage stage, NSError * _Nullable error) {
if (completedBlock) {
completedBlock(image,error);
}
}];
}
-(id)loadImageWithFile:(NSString *)path{
return [YYImage imageWithContentsOfFile:path];
}
@end
@interface ZYQZoomingScrollView (Custom)<ZYQZoomingScrollViewCustomProtocol>
@end
@implementation ZYQZoomingScrollView (Custom)
-(id)getCustomProgressViewWithBrowser:(ZYQPhotoBrowser *)browser{
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenBound.size.width;
CGFloat screenHeight = screenBound.size.height;
DACircularProgressView *tmpProgressView = [[DACircularProgressView alloc] initWithFrame:CGRectMake((screenWidth-35.)/2., (screenHeight-35.)/2, 35.0f, 35.0f)];
[tmpProgressView setProgress:0.0f];
tmpProgressView.tag = 101;
tmpProgressView.thicknessRatio = 0.1;
tmpProgressView.roundedCorners = NO;
tmpProgressView.trackTintColor = browser.trackTintColor ? browser.trackTintColor : [UIColor colorWithWhite:0.2 alpha:1];
tmpProgressView.progressTintColor = browser.progressTintColor ? browser.progressTintColor : [UIColor colorWithWhite:1.0 alpha:1];
_progressView=tmpProgressView;
return tmpProgressView;
}
@end
@interface DACircularProgressView (Custom)<ZYQProgressViewProtocol>
@end
@implementation DACircularProgressView (Custom)
-(void)setZyq_progress:(CGFloat)zyq_progress{
[self setProgress:zyq_progress animated:YES];
}
-(CGFloat)zyq_progress{
return [self progress];
}
@end
本项目使用 MIT 许可。