圖片瀏覽器 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 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 看柴靜釆訪星爺,有一點點感觸。說到電影事業,我個人覺得《喜劇之王》是一個巔峰,也是代表作品,《少林足球》仍然是一個...
    鵬有約閱讀 219評論 0 1
  • 你是一朵小小的花 袖珍到,必須成簇才能被人看見 可是,這又有什么關系呢。 陽光自然穿透你剛剛睡醒,柔潤的瓣 風兒自...
    月亭閱讀 223評論 13 7
  • 遇上你時, 我就知道,這一切 原本不該 我卑微的身份 如何配得上你那 萬貫家財 而那無可遏止的愛 讓我又怎么舍得 ...
    澤厚閱讀 204評論 0 0
  • 暈暈的,每天都很無聊,行尸走肉般,實在覺得是浪費生命。現在放假對我說也沒有什么特別的,也就是睡個懶覺在家躺一天而已...
    裳瓔珞閱讀 148評論 0 1