ZYQPhotoBrowser-NoDependency 1.2

ZYQPhotoBrowser-NoDependency 1.2

测试已测试
Lang语言 Obj-CObjective C
许可证 MIT
发布最后发布2017 年 6 月

Zhao Yiqi 维护。



  • 作者
  • Eduardo Callado

ZYQPhotoBrowser

ZYQPhotoBrowser 是一个基于 MWPhotoBrowser 的新实现。

我们加入了从 Facebook 和 Tweetbot 的相册浏览中获得的用户体验和技术特性。

屏幕截图

Screenshot1

Screenshot2

Screenshot2

使用方法

以下代码片段展示了如何实现相册浏览器的示例。

首先创建一个包含 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";

如果没有设置标题属性,则不会显示标题。

自定义标题

默认情况下,标题是一个简单的黑色透明视图,上面以白色显示照片的标题。如果您想实现自己的标题视图,请按照以下步骤操作

  1. 可选地使用 ZYQPhoto 的子类来存储您的照片,这样可以存储比简单的标题字符串更多的数据。
  2. ZYQCaptionView 继承并覆盖 -setupCaption-sizeThatFits: (以及您认为合适的任何其他 UIView 方法)以布局您自己的视图并设置其大小。有关更多信息,请参阅 ZYQCaptionView.h
  3. 实现 -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

添加到您的项目

直接将源代码添加到您的项目中

ZYQPhotoBrowser 使用开源库

许可协议

本项目使用 MIT 许可。