APP中圖片瀏覽功能是比較常見的,為了使用方便,自己封裝了一個,僅供大家參考。主要的功能有:
1、動畫效果放大先看幾張效果圖吧。
2、點擊指定區域放大
3、下拉退出
一、集成方法
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直通車:直通車入口-系好安全帶