圖片瀏覽器 PhotoBrowser

APP中圖片瀏覽功能是比較常見的，為了使用方便，自己封裝了一個(gè)，僅供大家參考。主要的功能有：

1、動(dòng)畫效果放大先看幾張效果圖吧。


image

2、點(diǎn)擊指定區(qū)域放大


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`

此時(shí)需要更新本地的pod空間，終端執(zhí)行指令 pod repo update，成功之后，在執(zhí)行pod search CKYPhotoBrowser，若還是沒有找到，需刪除pod本地緩存，執(zhí)行rm ~/Library/Caches/CocoaPods/search_index.json，之后在執(zhí)行pod search CKYPhotoBrowser。如果還是沒有成功，那就請留言吧，一般情況，到這里一定是成功的了。

2、源碼集成

github下載地址：https://github.com/cky113999742/KYPhotoBrowser
下載完成，直接拖進(jìn)工程里，如果工程中沒有YYWebImage，需要手動(dòng)去添加這個(gè)庫，如果使用SDWebImage，可以直接修改源碼，替換掉YYWebImage，個(gè)人覺得YYWebImage性能更好一些，尤其是在iPhone 7上的表現(xiàn)。

二、簡單使用

使用時(shí)，只需要引用 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];

如果需要實(shí)現(xiàn)動(dòng)畫出現(xiàn)和消失回到原位的效果，需要實(shí)現(xiàn)代理方法：

// 動(dòng)畫消失的目標(biāo)frame
- (UIImageView *)sourceImageViewForIndex:(NSInteger)index;

返回指定位置的 UIImageView，這個(gè)UIImageView就是當(dāng)前正在顯示的那張圖片，只是用于獲取他在試圖中的坐標(biāo)位置。使用就是這幾行代碼就可以了， KYPhotoBrowserController 類中暴露了兩個(gè)只讀屬性scrollView和pageLabel，暴露的目的是如果使用者不需要頁碼指示器時(shí)候，可以通過實(shí)現(xiàn) customUIBlock 進(jìn)行相應(yīng)的隱藏或者調(diào)整坐標(biāo)， scrollView是方便用戶對手勢進(jìn)行擴(kuò)展，比如需要添加長按手勢，手勢可以添加在scrollView上，在外部實(shí)現(xiàn)自己的手勢方法，達(dá)到擴(kuò)展的需求。

三、 代碼結(jié)構(gòu)

1、KYPhotoBrowserController
#import <UIKit/UIKit.h>
#import "KYPhotoModel.h"

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

@protocol KYPhotoBrowserControllerDelegate <NSObject>

@optional
// 動(dòng)畫消失的目標(biāo)frame
- (UIImageView *)sourceImageViewForIndex:(NSInteger)index;
// 獲取圖片展示占位圖
- (UIImage *)photoBrowserPlaceholderImage;

@end

@interface KYPhotoBrowserController : UIViewController

@property (nonatomic, copy) KYCustomUIBlock customUIBlock;  /**< 在viewDidLoad的最后調(diào)用，方便用戶自定義UI */
@property (nonatomic, weak) id <KYPhotoBrowserControllerDelegate> delegate;
@property (nonatomic, strong, readonly) UIScrollView              *scrollView;
@property (nonatomic, strong, readonly) UILabel                   *pageLabel;
/**
 *  當(dāng)前顯示的圖片位置索引 , 默認(rèn)是0
 */
@property (nonatomic, assign) NSInteger currentImageIndex;
/**
 *  瀏覽的圖片數(shù)量,大于0
 */
@property (nonatomic, assign) NSInteger imageCount;

/**
 圖片數(shù)據(jù) 數(shù)組內(nèi)可以是 KYPhotoModel， NSImage， NSString， NSData
 */
@property (nonatomic, strong) NSArray *images;

/**
 初始化的方法

 @param images 圖片數(shù)據(jù) 數(shù)組內(nèi)可以是 KYPhotoModel， NSImage， NSString， NSData
 @param currentImageIndex 當(dāng)前顯示的位置
 */
+ (instancetype)showPhotoBrowserWithImages:(NSArray *)images currentImageIndex:(NSInteger)currentImageIndex;

/**
 初始化的方法 如需實(shí)現(xiàn)動(dòng)畫 必須實(shí)現(xiàn)代理方法
 
 @param images 圖片數(shù)據(jù) 數(shù)組內(nèi)可以是 KYPhotoModel， NSImage， NSString， NSData
 @param currentImageIndex 當(dāng)前顯示的位置
 @param delegate 代理
 */
+ (instancetype)showPhotoBrowserWithImages:(NSArray *)images currentImageIndex:(NSInteger)currentImageIndex delegate:( id <KYPhotoBrowserControllerDelegate>)delegate;

/**
 移除方法

 @param animation 動(dòng)畫
 */
- (void)dismissAnimation:(BOOL)animation;

@end

這個(gè)類是使用者直接調(diào)用的類，內(nèi)部持有scrollView實(shí)現(xiàn)橫滑效果，scrollView上添加的是KYPhotoZoomView,這個(gè)控件是繼承自UIScrollView，內(nèi)部持有一個(gè)UIImageView用于實(shí)現(xiàn)圖片的展示和放大功能。KYPhotoBrowserController初始化時(shí)傳遞的圖片數(shù)組，數(shù)據(jù)類型支持KYPhotoModel， NSImage， NSString， NSData。

2、KYPhotoModel
@property (nonatomic, strong) NSData        *imageData;         /**< 圖片數(shù)據(jù) */
@property (nonatomic, strong) UIImage       *image;             /**< 圖片數(shù)據(jù) */
@property (nonatomic, strong) NSString      *thumbURLString;    /**< 普通圖下載鏈接 */
@property (nonatomic, strong) NSString      *originURLString;   /**< 原圖下載鏈接 */
@property (nonatomic, assign) CGFloat       originImageSize;    /**< 原圖的大小，單位為 B */

存放圖片數(shù)據(jù)的模型類，圖片的加載順序?yàn)椋合葯z測原圖，如果本地已經(jīng)存在原圖數(shù)據(jù)，直接加載原圖數(shù)據(jù)，如果不存在原圖數(shù)據(jù)，直接去檢測普通圖片，如果存在網(wǎng)址，加載普通圖片，如果不存在，加載ImageData和Image的數(shù)據(jù)。原圖的數(shù)據(jù)，只有在用戶點(diǎn)擊了加載原圖的按鈕，才會(huì)去加載。

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,    // 初始化默認(rèn)是小圖
    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

這個(gè)類是圖片展示類，內(nèi)部持有一個(gè)ImageView，這個(gè)類的主要作用是實(shí)現(xiàn)圖片的展示、放大縮小的效果。

4、KYPhotoGestureHandle
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@class KYPhotoZoomView, KYPhotoGestureHandle;

@protocol KYPhotoGestureHandleDelegate <NSObject>
// 獲取當(dāng)前展示的圖片對象
- (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

這個(gè)類是下拉退出效果的手勢處理類，下拉圖片跟隨移動(dòng)縮小的功能的實(shí)現(xiàn)，是通過下拉開始時(shí)，改變圖片的錨點(diǎn)，以達(dá)到圖片跟手縮小移動(dòng)的效果，在用戶松手的時(shí)候，如果縮放比例大于0.80，或者下拉速度大于800，就會(huì)退出界面。手勢結(jié)束的時(shí)候，修改錨點(diǎn)為默認(rèn)的0.5，如果是退出，執(zhí)行退出的動(dòng)畫，如果不是退出，還原圖片。

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

這個(gè)類用于PhotoBrowser的展示和退出管理，PhotoBrowser是單獨(dú)使用一個(gè)Window進(jìn)行退出的，不需要使用者提供任何的控制器用于推出界面，方便使用者使用。

基本的介紹就這些了，如果有什么好的建議，請留言，希望這個(gè)控件能幫助到大家。
GitHub直通車：直通車入口-系好安全帶

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,035評論 4贊 61
  • 看柴靜釆訪星爺，有一點(diǎn)點(diǎn)感觸。說到電影事業(yè)，我個(gè)人覺得《喜劇之王》是一個(gè)巔峰，也是代表作品，《少林足球》仍然是一個(gè)...
    鵬有約閱讀 231評論 0贊 1
  • 你是一朵小小的花 袖珍到，必須成簇才能被人看見 可是，這又有什么關(guān)系呢。 陽光自然穿透你剛剛睡醒，柔潤的瓣 風(fēng)兒自...
    月亭閱讀 249評論 13贊 7
  • 遇上你時(shí)， 我就知道，這一切 原本不該 我卑微的身份 如何配得上你那 萬貫家財(cái) 而那無可遏止的愛 讓我又怎么舍得 ...
    澤厚閱讀 220評論 0贊 0
  • 暈暈的，每天都很無聊，行尸走肉般，實(shí)在覺得是浪費(fèi)生命。現(xiàn)在放假對我說也沒有什么特別的，也就是睡個(gè)懶覺在家躺一天而已...
    裳瓔珞閱讀 168評論 0贊 1

友情鏈接更多精彩內(nèi)容