图片浏览器 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直通车:直通车入口-系好安全带

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,898评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,401评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,058评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,539评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,382评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,319评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,706评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,370评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,664评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,326评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,730评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,952评论 4 60
  • 看柴静釆访星爷,有一点点感触。说到电影事业,我个人觉得《喜剧之王》是一个巅峰,也是代表作品,《少林足球》仍然是一个...
    鹏有约阅读 205评论 0 1
  • 你是一朵小小的花 袖珍到,必须成簇才能被人看见 可是,这又有什么关系呢。 阳光自然穿透你刚刚睡醒,柔润的瓣 风儿自...
    月亭阅读 199评论 13 7
  • 遇上你时, 我就知道,这一切 原本不该 我卑微的身份 如何配得上你那 万贯家财 而那无可遏止的爱 让我又怎么舍得 ...
    泽厚阅读 192评论 0 0
  • 晕晕的,每天都很无聊,行尸走肉般,实在觉得是浪费生命。现在放假对我说也没有什么特别的,也就是睡个懒觉在家躺一天而已...
    裳璎珞阅读 142评论 0 1