高仿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中使用到该第三方，欢迎联系我，让我能够及时统计、更新！