[iOS] 高仿 QQ、微信效果的图片浏览器(支持原图和缩略图、多种手势、CocoaPods)
来源:互联网 发布:君权级战列舰知乎 编辑:程序博客网 时间:2024/05/17 06:14
PYPhotoBrowser
- Framework with a simple method of rendering images.
- 用法简单的呈现一组图片的框架。
Contents
Getting Started
- Renderings【效果图】
- Status 【支持哪些状态】
- Layouts【支持哪些布局】
- Gestures【支持哪些手势】
- What place will use this framework【什么地方用到这个框架】
- Dependency 【依赖哪些第三方框架】
- Classes【PYPhotosView框架的主要类】
框架使用
- How to use【如何使用PYPhotosView】
- Details 【具体使用(详情见示例程序PYPhotosViewExample)】
- Custom【自定义photosView】
期待
效果图
图片已发布(网络图片浏览、流水布局)
图片未发布(本地图片上传\发布\预览)
支持哪些状态
- 已发布(网络图片浏览)
未发布(本地图片上传\发布\预览)
支持哪些布局
流水布局
、线性布局
支持哪些手势
单击
、双击
、捏合
、旋转
、拖拽
、侧滑
什么地方用到这个框架
- 主要用于社交app,用于呈现一组图片
- 以下是各个流行社交app的部分截图
依赖哪些第三方框架
- 图片浏览依赖框架
MBProgressHUD
SDWebImage
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)
// 设置图片间距为10photosView.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!我会根据大家的需求提供更多的接口!
阅读全文
0 0
- [iOS] 高仿 QQ、微信效果的图片浏览器(支持原图和缩略图、多种手势、CocoaPods)
- iOS 图片浏览器:PYPhotosView(支持原图和缩略图、多种手势、CocoaPods)
- iOS开发(OC)——仿QQ微信的图片浏览器(缩放,滑动后还原,本地图片和网络图片都可以用)
- 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器
- 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器TZImagePickerController
- 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器
- 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器
- Android高仿QQ及微信底部菜单的多种实现方式【附源码地址】
- 【附源码地址】Android高仿QQ及微信底部菜单的多种实现方式
- Android高仿今日头条/QQ空间手势下拉关闭图片效果
- 高仿QQ空间发图片的效果
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
- 简单的重用 ios(效果类似图片无限循环(可支持多种图片))
- 高仿QQ音乐之旋转专辑图片的实现—仿留声机效果
- 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-9系统,3行代码即可集成.
- 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-9系统,3行代码即可集成.
- 设计模式(13) 享元模式(简单入门 结构模式)
- vue 文件添加postcss postcss-loader
- 深入浅出 JavaScriptCore
- 【HDU-1862】EXCEL排序
- 从指向看JavaScript
- [iOS] 高仿 QQ、微信效果的图片浏览器(支持原图和缩略图、多种手势、CocoaPods)
- getComputedStyle
- 袁开红:特色小镇可以“做”但不能“作”
- 浅谈Java虚拟机的工作模式Client和Server。
- UVa11988
- Linux进程间通信概述
- 避免Block的循环引用
- C语言:动态分配内存,malloc()与realloc()区别
- c# swagger 笔记二