iOS开发图片浏览器 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 类中暴露了两个只读属性scrollViewpageLabel,暴露的目的是如果使用者不需要页码指示器时候,可以通过实现 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初始化时传递的图片数组,数据类型支持KYPhotoModelNSImageNSStringNSData

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直通车:直通车入口-系好安全带

人已赞赏
iOS文章

iOS 页面跳转实现翻转动画

2020-2-8 10:25:46

iOS文章

iOS 仿苹果抖动动画

2020-2-8 10:55:08

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索