PYPhotoBrowser
- Framework with a simple method of rendering images.
- 用法簡單的呈現一組圖片的框架。
Contents
Getting Started
框架使用
效果圖
圖片已發佈（網絡圖片瀏覽、流水佈局)
![(img)]()
圖片未發佈（本地圖片上傳\發佈\預覽）
![(img)]()
支持哪些狀態
- 已發佈（網絡圖片瀏覽）
未發佈（本地圖片上傳\發佈\預覽）
![(img)]()
支持哪些佈局
流水佈局、線性佈局
支持哪些手勢
單擊、雙擊、捏合、旋轉、拖拽、側滑
什麼地方用到這個框架
- 主要用於社交app,用於呈現一組圖片
- 以下是各個流行社交app的部分截圖
依賴哪些第三方框架
- 圖片瀏覽依賴框架
MBProgressHUDSDWebImage
PYPhotoBrowser框架的主要類
PYPhotosView（快速使用）
@interface PYPhotosView : UIScrollView
/** 代理 */
@property (nonatomic, weak) id<PYPhotosViewDelegate> delegate;
/** 網絡圖片模型數組 */
@property (nonatomic, copy) NSArray *photos;
/** 網絡圖片地址數組（縮略圖） */
@property (nonatomic, copy) NSArray *thumbnailUrls;
/** 網絡圖片地址數組（原圖） */
@property (nonatomic, copy) NSArray *originalUrls;
/** 本地相冊圖片數組(默認最多爲九張,當傳入圖片數組長度超過九張時，取前九張) */
@property (nonatomic, strong) NSMutableArray *images;
/** 所有圖片的狀態（默認爲已發佈狀態） */
@property (nonatomic, assign) PYPhotosViewState photosState;
/** 圖片佈局（默認爲流水佈局） */
@property (nonatomic, assign) PYPhotosViewLayoutType layoutType;
/** 圖片分頁指示類型(默認爲pageControll。當圖片超過九張，改爲label顯示) */
@property (nonatomic, assign) PYPhotosViewPageType pageType;
/** 圖片間距（默認爲5） */
@property (nonatomic, assign) CGFloat photoMargin;
/** 圖片的寬 (默認爲70) */
@property (nonatomic, assign) CGFloat photoWidth;
/** 圖片的高 (默認爲70) */
@property (nonatomic, assign) CGFloat photoHeight;
/** 每行最多個數（默認爲3）, 當圖片佈局爲線性佈局時，此設置失效 */
@property (nonatomic, assign) NSInteger photosMaxCol;
/** 當圖片上傳前，最多上傳的張數，默認爲9 */
@property (nonatomic, assign) NSInteger imagesMaxCountWhenWillCompose;
/** 快速創建photosView對象 */
+ (instancetype)photosView;
/** photos : 保存圖片鏈接的數組 */
+ (instancetype)photosViewWithThumbnailUrls:(NSArray *)thumbnailUrls originalUrls:(NSArray *)originalUrls;
/** images : 存儲本地圖片的數組 */
+ (instancetype)photosViewWithImages:(NSMutableArray *)images;
/**
* thumbnailUrls : 保存圖片(縮略圖)鏈接的數組
* originalUrls : 保存圖片(原圖)鏈接的數組
* type : 佈局類型（默認爲流水佈局）
*/
+ (instancetype)photosViewWithThumbnailUrls:(NSArray *)thumbnailUrls originalUrls:(NSArray *)originalUrls layoutType:(PYPhotosViewLayoutType)type;
/**
* thumbnailUrls : 保存圖片(縮略圖)鏈接的數組
* originalUrls : 保存圖片(原圖)鏈接的數組
* maxCol : 每行最多顯示圖片的個數
*/
+ (instancetype)photosViewWithThumbnailUrls:(NSArray *)thumbnailUrls originalUrls:(NSArray *)originalUrls photosMaxCol:(NSInteger)maxCol;
/** 根據圖片個數和圖片狀態自動計算出PYPhontosView的size */
- (CGSize)sizeWithPhotoCount:(NSInteger)count photosState:(NSInteger)state;
/**
* 刷新圖片(未發佈)
* images : 新的圖片數組
*/
- (void)reloadDataWithImages:(NSMutableArray *)images;
@end
PYPhotoBrowseView（自定義）
@protocol PYPhotoBrowseViewDelegate <NSObject>
@optional
/**
* 圖片瀏覽將要顯示時調用
*/
- (void)photoBrowseView:(PYPhotoBrowseView *)photoBrowseView willShowWithImages:(NSArray *)images index:(NSInteger)index;
/**
* 圖片瀏覽已經顯示時調用
*/
- (void)photoBrowseView:(PYPhotoBrowseView *)photoBrowseView didShowWithImages:(NSArray *)images index:(NSInteger)index;
/**
* 圖片瀏覽將要隱藏時調用
*/
- (void)photoBrowseView:(PYPhotoBrowseView *)photoBrowseView willHiddenWithImages:(NSArray *)images index:(NSInteger)index;
/**
* 圖片瀏覽已經隱藏時調用
*/
- (void)photoBrowseView:(PYPhotoBrowseView *)photoBrowseView didHiddenWithImages:(NSArray *)images index:(NSInteger)index;
/**
* 圖片單擊時調用
*/
- (void)photoBrowseView:(PYPhotoBrowseView *)photoBrowseView didSingleClickedImage:(UIImage *)image index:(NSInteger)index;
/**
* 圖片長按時調用
*/
- (void)photoBrowseView:(PYPhotoBrowseView *)photoBrowseView didLongPressImage:(UIImage *)image index:(NSInteger)index;
@end
@protocol PYPhotoBrowseViewDataSource <NSObject>
@required
/** 返回將要瀏覽的圖片（UIImage）數組 */
- (NSArray *)imagesForBrowse;
@optional
/** 返回默認顯示圖片的索引(默認爲0) */
- (NSInteger)currentIndex;
/** 默認顯示圖片相對於主窗口的位置 */
- (CGRect)frameFormWindow;
/** 消失回到相對於住窗口的指定位置 */
- (CGRect)frameToWindow;
@end
@interface PYPhotoBrowseView : UIWindow <PYPhotoViewDelegate>
/** 代理 */
@property (nonatomic, weak) id<PYPhotoBrowseViewDelegate> delegate;
/** 數據源代理 */
@property (nonatomic, weak) id<PYPhotoBrowseViewDataSource> dataSource;
/** 用來瀏覽的圖片（UIImage）數組 */
@property (nonatomic, copy) NSArray *images;
/** 用來記錄當前下標 */
@property (nonatomic, assign) NSInteger currentIndex;
/**
* 瀏覽圖片
*/
- (void)show;
/**
* 隱藏
*/
- (void)hidden;
@end
如何使用PYPhotosView
- 使用Cocoapods:
pod "PYPhotosView"- 導入主頭文件
#import <PYPhotosView.h>
- 手動導入：
- 將
PYPhotosView文件夾中的所有文件拽入項目中 - 導入主頭文件
#import "PYPhotosView.h" 使用注意:如果項目本來就有依賴的第三方框架：MBProgressHUD、SDWebImage就不必重複導入, 如果沒有，選擇Dependency文件夾中，項目不存在的框架拽入項目。
- 將
具體使用（詳情見示例程序PYPhotosViewExample）
已發佈（網絡圖片瀏覽）
示例代碼：
// 1. 創建縮略圖圖片鏈接數組
NSMutableArray *thumbnailImageUrls = [NSMutableArray array];
// 添加圖片(縮略圖)鏈接
[thumbnailImageUrls addObject:@"http://ww3.sinaimg.cn/thumbnail/006ka0Iygw1f6bqm7zukpj30g60kzdi2.jpg"];
[thumbnailImageUrls addObject:@"http://ww1.sinaimg.cn/thumbnail/61b69811gw1f6bqb1bfd2j20b4095dfy.jpg"];
[thumbnailImageUrls addObject:@"http://ww1.sinaimg.cn/thumbnail/54477ddfgw1f6bqkbanqoj20ku0rsn4d.jpg"];
[thumbnailImageUrls addObject:@"http://ww4.sinaimg.cn/thumbnail/006ka0Iygw1f6b8gpwr2tj30bc0bqmyz.jpg"];
[thumbnailImageUrls addObject:@"http://ww2.sinaimg.cn/thumbnail/9c2b5f31jw1f6bqtinmpyj20dw0ae76e.jpg"];
[thumbnailImageUrls addObject:@"http://ww1.sinaimg.cn/thumbnail/536e7093jw1f6bqdj3lpjj20va134ana.jpg"];
[thumbnailImageUrls addObject:@"http://ww1.sinaimg.cn/thumbnail/75b1a75fjw1f6bqn35ij6j20ck0g8jtf.jpg"];
[thumbnailImageUrls addObject:@"http://ww2.sinaimg.cn/thumbnail/005NFHyQgw1f6bn8bha0eg308w0gib2d.gif"];
[thumbnailImageUrls addObject:@"http://ww1.sinaimg.cn/thumbnail/86afb21egw1f6bq3lq0itj20gg0c2myt.jpg"];
// 1.2 創建原圖圖片鏈接數組
NSMutableArray *originalImageUrls = [NSMutableArray array];
// 添加圖片(原圖)鏈接
[originalImageUrls addObject:@"http://ww3.sinaimg.cn/large/006ka0Iygw1f6bqm7zukpj30g60kzdi2.jpg"];
[originalImageUrls addObject:@"http://ww1.sinaimg.cn/large/61b69811gw1f6bqb1bfd2j20b4095dfy.jpg"];
[originalImageUrls addObject:@"http://ww1.sinaimg.cn/large/54477ddfgw1f6bqkbanqoj20ku0rsn4d.jpg"];
[originalImageUrls addObject:@"http://ww4.sinaimg.cn/large/006ka0Iygw1f6b8gpwr2tj30bc0bqmyz.jpg"];
[originalImageUrls addObject:@"http://ww2.sinaimg.cn/large/9c2b5f31jw1f6bqtinmpyj20dw0ae76e.jpg"];
[originalImageUrls addObject:@"http://ww1.sinaimg.cn/large/536e7093jw1f6bqdj3lpjj20va134ana.jpg"];
[originalImageUrls addObject:@"http://ww1.sinaimg.cn/large/75b1a75fjw1f6bqn35ij6j20ck0g8jtf.jpg"];
[originalImageUrls addObject:@"http://ww2.sinaimg.cn/large/005NFHyQgw1f6bn8bha0eg308w0gib2d.gif"];
[originalImageUrls addObject:@"http://ww1.sinaimg.cn/large/86afb21egw1f6bq3lq0itj20gg0c2myt.jpg"];
// 2. 創建一個photosView
PYPhotosView *photosView = [PYPhotosView photosViewWithThumbnailUrls:thumbnailImageUrls originalUrls:originalImageUrls];
// 3. 添加photosView
[self.view addSubview:photosView];
未發佈（本地圖片上傳\發佈\預覽）
示例代碼：
// 1. 創建本地圖片數組
NSMutableArray *imagesM = [NSMutableArray array];
for (int i = 0; i < arc4random_uniform(4) + 1; i++) {
[imagesM addObject:[UIImage imageNamed:[NSString stringWithFormat:@"d", i + 1]]];
}
// 2.1 設置本地圖片
PYPhotosView *photosView = [PYPhotosView photosViewWithImages:imagesM];
// 3. 設置代理
photosView.delegate = self;
// 4. 添加photosView
[self.view addSubview:photosView];
自定義圖片瀏覽（使用PYPhotoBrowseView類）
示例代碼：
// 1.創建自己定義的browseView
PYPhotoBrowseView *browseView = [[PYPhotoBrowseView alloc] init];
// 2.設置數據源和代理並實現數據源和代理方法
browseView.dataSource = self;
browseView.delegate = self;
// 3.顯示（瀏覽）
[browseView show];
// 實現數據源方法
#pragma mark - PYPhotoBrowseViewDataSource
// 返回將要瀏覽的圖片(UIImage)數組
- (NSArray *)imagesForBrowse
{
NSMutableArray *imagesM = [NSMutableArray array];
for (int i = 0; i < 6 + 1; i++) {
[imagesM addObject:[UIImage imageNamed:[NSString stringWithFormat:@"d", i + 1]]];
}
return imagesM;
}
// 返回默認顯示圖片的下標(默認爲0)
- (NSInteger)currentIndex
{
return 2;
}
// 返回從窗口的哪個位置開始顯示（注意：frame是相當於window）
- (CGRect)frameFormWindow
{
return CGRectZero;
}
// 返回消失到窗口的哪個位置（注意：frame是相當於window）
- (CGRect)frameToWindow
{
return CGRectMake(100, 300, 200, 200);
}
// 實現代理方法
#pragma mark PYPhotoBrowseViewDelegate
- (void)photoBrowseView:(PYPhotoBrowseView *)photoBrowseView didSingleClickedImage:(UIImage *)image index:(NSInteger)index
{
NSLog(@"圖片單擊時調用");
// 關閉瀏覽
[photoBrowseView hidden];
}
自定義photosView
通過設置photosView的對象屬性值即可修改
- 設置佈局類型（默認爲流水佈局）
// 設置佈局爲線性佈局
photosView.layoutType = PYPhotosViewLayoutTypeLine;
- 設置分頁指示類型（默認爲pageControll指示器）
// 設置指示類型爲文本指示
photosView.pageType = PYPhotosViewPageTypeLabel;- 設置圖片間距（默認爲5）
// 設置圖片間距爲10
photosView.photoMargin = 10;- 設置圖片大小（默認70*70）
// 設置圖片的寬（width）
photosView.photoWidth = 100;
// 設置圖片的高（height）
photosView.photoHeight = 60;- 設置每行圖片最多個數（默認爲3個）
// 設置圖片最多列數
photosView.photosMaxCol = 6;- 設置圖片上傳前，最多上傳的張數（默認爲9）
// 設置圖片最多上傳的張數
photosView.imagesMaxCountWhenWillCompose = 15;期待
- 如果您在使用過程中有任何問題，歡迎直接加我QQ:499491531聯繫，很樂意爲您解答任何相關問題!
- 與其給我點star，不如向我狠狠地拋來一個BUG！
- 如果感興趣的小夥伴想要參與這個項目的維護，可以隨時聯繫我或者直接pull request！
- 如果您想要更多的接口來自定義，歡迎issue me！我會根據大家的需求提供更多的接口！