ZYQPhotoBrowser 1.2

ZYQPhotoBrowser 1.2

测试已测试
Lang语言 Obj-CObjective C
许可 MIT
发布上次发布2017年6月

赵奕奇维护。



 
依赖
SDWebImage= 4.0.0
SDWebImage/GIF= 4.0.0
DACircularProgress>= 0
 

  • 埃德瓦尔多·卡拉多

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. 实现 ZYQPhotoBrowser 代理方法 -photoBrowser:captionViewForPhotoAtIndex:(如下所示)。

自定义标题视图的示例代理方法

- (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

示例

pod 'YYWebImage' 添加到您的 Podfile 中。

@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 许可证。