图片浏览器 PhotoBrowser

APP中图片浏览功能是比较常见的，为了使用方便，自己封装了一个，仅供大家参考。主要的功能有：

1、动画效果放大先看几张效果图吧。

image

2、点击指定区域放大

image
3、下拉退出
image

一、集成方法

1、pod集成

pod 'CKYPhotoBrowser'

如果提示not found之类的提示，先使用 pod search CKYPhotoBrowser 去查找一下，若提示

[!] Unable to find a pod with name, author, summary, or description matching `CKYPhotoBrowser`

此时需要更新本地的pod空间，终端执行指令 pod repo update，成功之后，在执行pod search CKYPhotoBrowser，若还是没有找到，需删除pod本地缓存，执行rm ~/Library/Caches/CocoaPods/search_index.json，之后在执行pod search CKYPhotoBrowser。如果还是没有成功，那就请留言吧，一般情况，到这里一定是成功的了。

2、源码集成

github下载地址：https://github.com/cky113999742/KYPhotoBrowser
下载完成，直接拖进工程里，如果工程中没有YYWebImage，需要手动去添加这个库，如果使用SDWebImage，可以直接修改源码，替换掉YYWebImage，个人觉得YYWebImage性能更好一些，尤其是在iPhone 7上的表现。

二、简单使用

使用时，只需要引用 KYPhotoBrowserController.h 即可。

    NSArray *images = @[@"http://ohc6xoujj.bkt.clouddn.com/image_1.jpg", @"http://ohc6xoujj.bkt.clouddn.com/image_2.jpg"];
    [KYPhotoBrowserController showPhotoBrowserWithImages:images currentImageIndex:indexPath.item delegate:self];

如果需要实现动画出现和消失回到原位的效果，需要实现代理方法：

// 动画消失的目标frame
- (UIImageView *)sourceImageViewForIndex:(NSInteger)index;

返回指定位置的 UIImageView，这个UIImageView就是当前正在显示的那张图片，只是用于获取他在试图中的坐标位置。使用就是这几行代码就可以了， KYPhotoBrowserController 类中暴露了两个只读属性scrollView和pageLabel，暴露的目的是如果使用者不需要页码指示器时候，可以通过实现 customUIBlock 进行相应的隐藏或者调整坐标， scrollView是方便用户对手势进行扩展，比如需要添加长按手势，手势可以添加在scrollView上，在外部实现自己的手势方法，达到扩展的需求。

三、 代码结构

1、KYPhotoBrowserController

#import <UIKit/UIKit.h>
#import "KYPhotoModel.h"

@class KYPhotoBrowserController;
typedef void(^KYCustomUIBlock)(KYPhotoBrowserController *vc);

@protocol KYPhotoBrowserControllerDelegate <NSObject>

@optional
// 动画消失的目标frame
- (UIImageView *)sourceImageViewForIndex:(NSInteger)index;
// 获取图片展示占位图
- (UIImage *)photoBrowserPlaceholderImage;

@end

@interface KYPhotoBrowserController : UIViewController

@property (nonatomic, copy) KYCustomUIBlock customUIBlock;  /**< 在viewDidLoad的最后调用，方便用户自定义UI */
@property (nonatomic, weak) id <KYPhotoBrowserControllerDelegate> delegate;
@property (nonatomic, strong, readonly) UIScrollView              *scrollView;
@property (nonatomic, strong, readonly) UILabel                   *pageLabel;
/**
 *  当前显示的图片位置索引 , 默认是0
 */
@property (nonatomic, assign) NSInteger currentImageIndex;
/**
 *  浏览的图片数量,大于0
 */
@property (nonatomic, assign) NSInteger imageCount;

/**
 图片数据 数组内可以是 KYPhotoModel， NSImage， NSString， NSData
 */
@property (nonatomic, strong) NSArray *images;

/**
 初始化的方法

 @param images 图片数据 数组内可以是 KYPhotoModel， NSImage， NSString， NSData
 @param currentImageIndex 当前显示的位置
 */
+ (instancetype)showPhotoBrowserWithImages:(NSArray *)images currentImageIndex:(NSInteger)currentImageIndex;

/**
 初始化的方法 如需实现动画 必须实现代理方法
 
 @param images 图片数据 数组内可以是 KYPhotoModel， NSImage， NSString， NSData
 @param currentImageIndex 当前显示的位置
 @param delegate 代理
 */
+ (instancetype)showPhotoBrowserWithImages:(NSArray *)images currentImageIndex:(NSInteger)currentImageIndex delegate:( id <KYPhotoBrowserControllerDelegate>)delegate;

/**
 移除方法

 @param animation 动画
 */
- (void)dismissAnimation:(BOOL)animation;

@end

这个类是使用者直接调用的类，内部持有scrollView实现横滑效果，scrollView上添加的是KYPhotoZoomView,这个控件是继承自UIScrollView，内部持有一个UIImageView用于实现图片的展示和放大功能。KYPhotoBrowserController初始化时传递的图片数组，数据类型支持KYPhotoModel， NSImage， NSString， NSData。

2、KYPhotoModel

@property (nonatomic, strong) NSData        *imageData;         /**< 图片数据 */
@property (nonatomic, strong) UIImage       *image;             /**< 图片数据 */
@property (nonatomic, strong) NSString      *thumbURLString;    /**< 普通图下载链接 */
@property (nonatomic, strong) NSString      *originURLString;   /**< 原图下载链接 */
@property (nonatomic, assign) CGFloat       originImageSize;    /**< 原图的大小，单位为 B */

存放图片数据的模型类，图片的加载顺序为：先检测原图，如果本地已经存在原图数据，直接加载原图数据，如果不存在原图数据，直接去检测普通图片，如果存在网址，加载普通图片，如果不存在，加载ImageData和Image的数据。原图的数据，只有在用户点击了加载原图的按钮，才会去加载。

3、KYPhotoZoomView

#import <UIKit/UIKit.h>
#import "KYPhotoModel.h"
#if __has_include(<YYWebImage/YYWebImage.h>)
#import <YYWebImage/YYWebImage.h>
#else
#import "YYWebImage.h"
#endif

typedef NS_ENUM(NSInteger, ShowImageState) {
    ShowImageStateSmall,    // 初始化默认是小图
    ShowImageStateBig,   // 全屏的正常图片
    ShowImageStateOrigin    // 原图
};

@class KYPhotoZoomView;
@protocol KYPhotoZoomViewDelegate <NSObject>

- (CGRect)dismissRect;
- (UIImage *)photoZoomViewPlaceholderImage;

@end

@interface KYPhotoZoomView : UIScrollView <UIScrollViewDelegate>

@property (nonatomic, weak) id <KYPhotoZoomViewDelegate> zoomDelegate;
@property (nonatomic, strong, readonly) UIImageView *imageView;
@property (nonatomic, assign, readonly) ShowImageState imageState;
@property (nonatomic, assign) CGFloat process;

- (void)resetScale;
- (void)showImageWithPhotoModel:(KYPhotoModel *)photoModel;
- (void)dismissAnimation:(BOOL)animation;

@end

这个类是图片展示类，内部持有一个ImageView，这个类的主要作用是实现图片的展示、放大缩小的效果。

4、KYPhotoGestureHandle

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@class KYPhotoZoomView, KYPhotoGestureHandle;

@protocol KYPhotoGestureHandleDelegate <NSObject>
// 获取当前展示的图片对象
- (KYPhotoZoomView *)currentDetailImageViewInPhotoPreview:(KYPhotoGestureHandle *)handle;
// 图片对象去移除的代理
- (void)detailImageViewGotoDismiss;
// 控制图片控制器中，照片墙，更多等小组件的隐藏/显示
- (void)photoPreviewComponmentHidden:(BOOL)hidden;

@end

@interface KYPhotoGestureHandle : NSObject

@property (nonatomic, weak) id <KYPhotoGestureHandleDelegate> delegate;

- (instancetype)initWithScrollView:(UIScrollView *)scrollView coverView:(UIView *)coverView;

@end

这个类是下拉退出效果的手势处理类，下拉图片跟随移动缩小的功能的实现，是通过下拉开始时，改变图片的锚点，以达到图片跟手缩小移动的效果，在用户松手的时候，如果缩放比例大于0.80，或者下拉速度大于800，就会退出界面。手势结束的时候，修改锚点为默认的0.5，如果是退出，执行退出的动画，如果不是退出，还原图片。

5、KYPhotoBrowserManager

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

/**
 图片浏览管理类
 */
@interface KYPhotoBrowserManager : NSObject

@property (nonatomic, strong) UIWindow *photoWindow;

+ (instancetype)sharedManager;
- (void)presentWindowWithController:(UIViewController *)controller;
- (void)dismissWindow:(BOOL)animation;

@end

这个类用于PhotoBrowser的展示和退出管理，PhotoBrowser是单独使用一个Window进行退出的，不需要使用者提供任何的控制器用于推出界面，方便使用者使用。

基本的介绍就这些了，如果有什么好的建议，请留言，希望这个控件能帮助到大家。
GitHub直通车：直通车入口-系好安全带