高仿QQ、微信效果的圖片瀏覽器（支持原圖和縮略圖、多種手勢、CocoaPods）
PYPhotoBrowser
Framework with a simple method of rendering images.git
用法簡單的呈現一組圖片的框架。github
Contents
-
Getting Started數組
-
框架使用
效果圖
圖片已發佈（網絡圖片瀏覽、流水佈局)
支持哪些狀態
已發佈（網絡圖片瀏覽）
支持哪些佈局
流水佈局、線性佈局
支持哪些手勢
單擊、雙擊、捏合、旋轉、拖拽、側滑
什麼地方用到這個框架
主要用於社交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:@"%02d", 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:@"%02d", 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！我會根據你們的需求提供更多的接口！
相關文章
- 1. 高仿QQ、微信效果的圖片瀏覽器（支持原圖和縮略圖、多種手勢、CocoaPods）
- 2. Android 高仿微信發朋友圈瀏覽圖片效果
- 3. jquery圖片查看插件，支持旋轉、放大、縮小、拖拽、縮略圖（仿qq圖片查看）...
- 4. 跨瀏覽器圖片灰度效果
- 5. iOS開發——仿微信圖片瀏覽交互的實現(向下拖拽圖片退出圖片瀏覽器)
- 6. 高仿微信圖片選擇器（支持單圖，多圖，視頻選擇，支持圖片自由縮放，視頻播放等功能）
- 7. android手勢實現圖片的拖動和縮放效果
- 8. 手機端h5 ajax 上傳圖片支持微信內置瀏覽器
- 9. Flutter RichText支持圖片顯示和自定義圖片效果
- 10. 基於Qt和VS2017的高仿Win7圖片瀏覽器製做
- 更多相關文章...
- • R 繪圖 - 中文支持 - R 語言教程
- • Markdown 圖片 - Markdown 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 高仿QQ、微信效果的圖片瀏覽器（支持原圖和縮略圖、多種手勢、CocoaPods）
- 2. Android 高仿微信發朋友圈瀏覽圖片效果
- 3. jquery圖片查看插件，支持旋轉、放大、縮小、拖拽、縮略圖（仿qq圖片查看）...
- 4. 跨瀏覽器圖片灰度效果
- 5. iOS開發——仿微信圖片瀏覽交互的實現(向下拖拽圖片退出圖片瀏覽器)
- 6. 高仿微信圖片選擇器（支持單圖，多圖，視頻選擇，支持圖片自由縮放，視頻播放等功能）
- 7. android手勢實現圖片的拖動和縮放效果
- 8. 手機端h5 ajax 上傳圖片支持微信內置瀏覽器
- 9. Flutter RichText支持圖片顯示和自定義圖片效果
- 10. 基於Qt和VS2017的高仿Win7圖片瀏覽器製做