高仿QQ、微信效果的圖片瀏覽器（支持原圖和縮略圖、多種手勢、CocoaPods）

PYPhotoBrowser

GitHub地址：github.com/iphone5solo…
項目做者：CoderKo1o

• Framework with a simple method of rendering images.
• 用法簡單的呈現一組圖片的框架。

Contents

• Getting Started

  • Renderings【效果圖】
  • Who is using PYPhotoBrowser【哪些app使用PYPhotoBrowser】
  • Status 【支持哪些狀態】
  • Layouts【支持哪些佈局】
  • Gestures【支持哪些手勢】
  • What place will use this framework【什麼地方用到這個框架】
  • Dependency 【依賴哪些第三方框架】
  • Classes【PYPhotosView框架的主要類】

• 框架使用

  • How to use【如何使用PYPhotosView】
  • Details 【具體使用(詳情見示例程序PYPhotosViewExample)】
  • Custom【自定義photosView】

• 期待

效果圖

• 圖片已發佈（網絡圖片瀏覽、流水佈局)

  (img)

• 圖片未發佈（本地圖片上傳\發佈\預覽）

  (img)

哪些app使用PYPhotoBrowser（陸續更新）

香脈
汕醫移動辦公

支持哪些狀態

• 已發佈（網絡圖片瀏覽）

(img)

• 未發佈（本地圖片上傳\發佈\預覽）

  

  (img)

支持哪些佈局

• 流水佈局 、 線性佈局

支持哪些手勢

• 單擊 、雙擊 、捏合 、旋轉、拖拽、側滑

什麼地方用到這個框架

• 主要用於社交app,用於呈現一組圖片
• 如下是各個流行社交app的部分截圖

(img1)

(img1)

(img1)

(img1)

(img1)

(img1)

依賴哪些第三方框架

• 圖片瀏覽依賴框架
  • MBProgressHUD
  • SDWebImage
  • DACircularProgress

PYPhotoBrowser框架的主要類

PYPhotosView（快速使用）

@interface PYPhotosView : UIScrollView

/** 代理 */
@property (nonatomic, weak) id
  
  
  

 
  
  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 
  
  
  

 

@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 
  
  
  

 

@required
/** 返回將要瀏覽的圖片（UIImage）數組 */
- (NSArray *)imagesForBrowse;

@optional
/** 返回默認顯示圖片的索引(默認爲0) */
- (NSInteger)currentIndex;

/** 默認顯示圖片相對於主窗口的位置 */
- (CGRect)frameFormWindow;

/** 消失回到相對於住窗口的指定位置 */
- (CGRect)frameToWindow;

@end


@interface PYPhotoBrowseView  : UIWindow 
  
  
  

 

/** 代理 */
@property (nonatomic, weak) id
  
  
  

 
  
  delegate; /** 數據源代理 */ @property (nonatomic, weak) id 
 
  
    dataSource; /** 用來瀏覽的圖片（UIImage）數組 */ @property (nonatomic, copy) NSArray *images; /** 用來瀏覽的圖片連接（NSString）數組*/ @property (nonatomic, copy) NSArray *imagesURL; /** 用來瀏覽的圖片的控件（UIImageView）數組 */ @property (nonatomic, copy) NSArray *sourceImgageViews; /** 用來記錄當前下標 */ @property (nonatomic, assign) NSInteger currentIndex; /** * 瀏覽圖片 */ - (void)show; /** * 隱藏 */ - (void)hidden; @end 
   

 複製代碼

如何使用PYPhotoBrowser

• 使用Cocoapods:
  • pod "PYPhotoBrowser"
  • 導入主頭文件#import
• 手動導入：
  • 將PYPhotoBrowser文件夾中的全部文件拽入項目中
  • 導入主頭文件#import "PYPhotoBrowser.h"
  • 使用注意:若是項目原本就有依賴的第三方框架：MBProgressHUD、SDWebImage、DACircularProgress就沒必要重複導入, 若是沒有，選擇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. 建立photoBroseView對象
    PYPhotoBrowseView *photoBroseView = [[PYPhotoBrowseView alloc] init];

    // 2.1 設置圖片源(UIImageView)數組
    photoBroseView.sourceImgageViews = imageViews;
    // 2.2 設置初始化圖片下標（即當前點擊第幾張圖片）
    photoBroseView.currentIndex = 2;

    // 3.顯示(瀏覽)
    [photoBroseView show];複製代碼

自定義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！我會根據你們的需求提供更多的接口！
• 若是您在上線的app中使用到該第三方，歡迎聯繫我，讓我能夠及時統計、更新！