iOS图片浏览库DSImageBrowse

前言

在我看来，任何库存在的意义都是实际项目中频繁的用到，又不想重复开发，所以封装好，以方便下个项目或者他人使用。
这个库也不例外，图片已经是现在每个App中必须的展示方式了。

效果图

  • 先看效果图(基本同微信中的一样，但是具体实现的方式肯定是不同的。)，确定是否是自己所需要的效果，再继续看后面的使用方法。

1. 九宫格模式

九宫格.gif

2. 聊天模式

注：暂且先将这么简单的cell直接当做聊天时的图片cell，有时间了我会去实现气泡的。
聊天模式.gif

3. 网页模式

网页模式.gif

若想直接使用请转github 欢迎star

类的介绍:

DSImagesData


typedef NS_ENUM(NSUInteger, DSImageBadgeType) {
    DSImageBadgeTypeNone = 0,     //    正常图片
    DSImageBadgeTypeLong,         //    长图
    DSImageBadgeTypeGIF,          //    GIF
};


/**
 图片数据
 */
@interface DSImageData : NSObject

@property (nonatomic, strong) NSURL *url;                 //图片URL
@property (nonatomic, assign) int width;                  //图片宽度
@property (nonatomic, assign) int height;                 //图片高度
@property (nonatomic, assign) DSImageBadgeType badgeType; //图片类型 默认None

@end

/**
 包含图片缩略图、大图等所有图片的数据
 */
@interface DSImagesData : NSObject
//缩略图数据
@property (nonatomic, strong) DSImageData *thumbnailImage;
//大图数据  (这个必须要有)
@property (nonatomic, strong) DSImageData *largeImage;
@end

这个类用来存放数据模型，DSImageData是图片元数据模型。DSImagesData是一张图片的缩略图，大图数据(后续若有需要可增加原图等，现在本人暂时没有这个需求，所以只有这2种)

DSImageLayout

/**
 排版布局，在后台线程操作以提高性能
 */
@interface DSImageLayout : NSObject

/**
 排版布局对象
 @param imagedata 图片数据
 */
- (instancetype)initWithImageData:(NSArray <DSImagesData *>*)imagedata;

/**
 初始化后，一定要调用该方法进行排版
 如果需要修改默认参数，请初始化完修改参数，再调用该方法，否则还是使用默认数据。
 */
- (void)layout;

//所有图片数据
@property (nonatomic, strong) NSArray<DSImagesData *> *imagesData;

//计算后单张图片的大小 (除了单张图片并且有缩略图宽高数据，其余情况下均为正方形)
@property (nonatomic, assign, readonly) CGSize imageSize;

//计算后整个View的高度
@property (nonatomic, assign, readonly) CGFloat imageBrowseHeight;

//整个View宽度 默认 屏幕宽度
@property (nonatomic, assign) CGFloat imageBrowseWidth;

//每张图片的中间的间隔  默认 4
@property (nonatomic, assign) CGFloat imagePadding;

//距离顶部距离  默认 12
@property (nonatomic, assign) CGFloat topPadding;

//距离底部距离  默认 12
@property (nonatomic, assign) CGFloat bottomPadding;

//距离左边距离  默认 12
@property (nonatomic, assign) CGFloat leftPadding;

//距离右边距离  默认 12
@property (nonatomic, assign) CGFloat rightPadding;

//图片角标宽度  默认 28
@property (nonatomic, assign) CGFloat imageBadgeWidth;

//图片角标高度  默认 18
@property (nonatomic, assign) CGFloat imageBadgeHeight;

@end

这个类用于在拿到图片数据后在后台线程进行排版，因为涉及到图片的界面 类似朋友圈这种的性能要进行一定的优化，若有你的界面有涉及到圆角图片应该也在这时候在后台渲染成圆角图片然后缓存下来，排版完在把数据设置到cell时，就可以直接用layout对象的中预先计算好的宽和高赋值给控件。

DSThumbnailView

/**
 缩略图视图
 */
@interface DSThumbnailView : UIView
//缩略图
@property (nonatomic, strong) UIImage *image;
//单击回调
@property (nonatomic, copy) void (^touchBlock)(DSThumbnailView *view, CGPoint point);
//长按回调
@property (nonatomic, copy) void (^longPressBlock)(DSThumbnailView *view, CGPoint point);

@end

这个类就是缩略图View，里面只有一个UIImage对象。在设置图片时是设置给layer.contents self.layer.contents = (id)image.CGImage;单击和长按事件通过响应链来实现，使用时你并不会接触这个View。

DSImageBrowseView

@protocol DSImageBrowseDelegate;

@interface DSImageBrowseView : UIView

//存放缩略图
@property (nonatomic, strong) NSArray<DSThumbnailView *> *imageViews;

//代理
@property (nonatomic, weak) id<DSImageBrowseDelegate> delegate;

//布局对象
@property (nonatomic, strong) DSImageLayout *layout;

//长图片标记图片名称
@property (nonatomic, strong) NSString *longImageBadgeName;

//GIF图片标记图片名称
@property (nonatomic, strong) NSString *gifImageBadgeName;

//默认图片名称
@property (nonatomic, strong) NSString *defaultImageName;

@end

@protocol DSImageBrowseDelegate <NSObject>

@optional

//点击图片
- (void)imageBrowse:(DSImageBrowseView *)imageView didSelectImageAtIndex:(NSInteger)index;
//长按图片
- (void)imageBrowse:(DSImageBrowseView *)imageView longPressImageAtIndex:(NSInteger)index;

@end

这个类是用来展示缩略图的容器View，可显示1- 9张。通常添加在UITableViewCell中来展示，接着 UITableViewCell遵循DSImageBrowseDelegate代理，用来实现单击和长按事件。

DSImageShowView

typedef NS_ENUM(NSInteger, DSImageShowType) {
    DSImageShowTypeDefault,     ///  默认带page，最多9张。
    DSImageShowTypeChat,        ///  默认不带page，可以多张，用于聊天内容图片显示
    DSImageShowtypeWebImage     ///  用于显示网页中的图片
};


@interface DSImageShowView : UIView

//数据
@property (nonatomic, readonly) NSArray<DSImageScrollItem *> *items;

//当前页
@property (nonatomic, readonly) NSInteger currentPage;

//是否使用模糊背景 默认NO
@property (nonatomic, assign)   BOOL blurEffectBackground;

/**
 没有拿到图片坐标时，动画开始的位置和开始大小。
 默认((self.width - 100) / 2,self.height - 100) / 2,100,100);
 */
@property (nonatomic, assign)   CGRect fromRect;

// 长按图片回调
@property (nonatomic, copy) void (^longPressBlock)(UIImageView *imageView);
/**
 初始化方法

 @param items item数据
 @param type 显示类型
 @return DSImageShowView实例
 */
- (instancetype)initWithItems:(NSArray <DSImageScrollItem *>*)items type:(DSImageShowType)type;

- (instancetype)init UNAVAILABLE_ATTRIBUTE;
- (instancetype)initWithFrame:(CGRect)frame UNAVAILABLE_ATTRIBUTE;
+ (instancetype)new UNAVAILABLE_ATTRIBUTE;

// 视图展示
- (void)presentfromImageView:(UIView *)fromView toContainer:(UIView *)toContainer index:(NSInteger)index animated:(BOOL)animated completion:(void (^)(void))completion;

// 视图消失
- (void)dismissAnimated:(BOOL)animated completion:(void (^)(void))completion;

// 会调用 [self dismissAnimated:YES completion:nil];
- (void)dismiss;

// 只有在type == DSImageShowtypeWebImage 情况下才调用，否则无效。
- (void)showWebImageIndex:(NSInteger)index;

@end

这个是用于显示大图的View，里面包含一个UIScrollView,做为所有图片的容器，UIScrollView里面又含有DSImageScrollView, DSImageScrollView做为单独一张图片的容器，并且做了复用。另外在点击缩略图时，调用presentfromImageView: toContainer: index: animated: completion:这个方法可显示该视图，Container参数设置为self.navigationController.view 这个view(UILayoutContainerView)的层级只比导航栏还高，所以可以盖住导航栏，但是不会盖住状态栏，于是我在显示图片的时候，将windowlevel设置为status级别就可以将状态栏也盖住。还有一个参数是fromView，这个主要用于做present 和dismiss的动画效果，以及下拉隐藏这张图片这个效果。showWebImageIndex:这个方法用于在显示网页图片时调用，没有额外的动画效果。

DSImageScrollView

@interface DSImageScrollView : UIScrollView

//内容视图
@property (nonatomic, strong) UIView *imageContainerView;
//图片视图
@property (nonatomic, strong) YYAnimatedImageView *imageView;
//当前页(预加载时使用)
@property (nonatomic, assign) NSInteger page;
//传入的数据
@property (nonatomic, strong) DSImageScrollItem *item;
//进度条
@property (nonatomic, strong) CAShapeLayer *progressLayer;

- (void)resizeSubviewSize;

@end

这个类是每一张图片的容器，用YYAnimatedImageView可以显示动态图片。CAShapeLayer用来画一个简单的进度条。resizeSubviewSize计算当前图片的frame。

DSImageScrollItem

@interface DSImageScrollItem : NSObject
//缩略图
@property (nonatomic, readonly) UIImage *thumbImage;
//高图的时候裁剪保留顶部
@property (nonatomic, readonly) BOOL thumbClippedToTop;

//缩略图View
@property (nonatomic, strong) UIView *thumbView;

/**
 默认为YES.(聊天模式下才去修改)
 当前图片的缩略图不可见的话，动画效果就会不同。
 */
@property (nonatomic, assign) BOOL isVisibleThumbView;

//默认为NO.(请在网页模式下才设置为YES)
@property (nonatomic, assign) BOOL cancelPan;

//大图尺寸，若无则传0
@property (nonatomic, assign) CGSize largeImageSize;
//大图url
@property (nonatomic, strong) NSURL *largeImageURL;

这个类是DSImageScrollView的数据模型。isVisibleThumbView这个属性是在聊天界面时，图片的缩略图不一定在当前可见cell中，这样没法做present或者dismiss动画，图片动画应该直接淡入淡出，具体使用Demo中有给出。cancelPan这个属性的存在是因为DSImageScrollView中的图片超过了屏幕高度，也就是长图片，这时候DSImageShowView中添加的pan手势，不会被识别，会先识别到DSImageScrollView的滑动。于是我用响应链和UIScrollView里的pan手势来做了一点处理。让长图在最顶端时，可以先响应DSImageShowView中添加的pan手势，但是显示网页图片不需要这个手势，所以设置了这个属性来禁用。

DSForceTouchController

@interface DSForceTouchController : UIViewController

//预览图片视图
@property (nonatomic, strong) YYAnimatedImageView *imageView;
//预览图片数据
@property (nonatomic, strong) DSImageScrollItem *item;
//预览图片Rect
@property (nonatomic, assign) CGRect imageRect;
//action 例如@[@"收藏",@"保存"] 不大于4
@property (nonatomic, strong) NSMutableArray *actionTitles;
//action回调
@property (nonatomic, copy) void (^actionBlock)(NSInteger index);

@end

这个是3Dtouch用于预览的控制器，里面只做了简单的处理，3DTouch的主要操作还是在要推出这个控制器的控制器中实现。可参照Demo中的实现。

DSWebImageViewController

/**
 直接调用这个方法进行初始化即可

 @param images 图片的url数组 传NSString类型
 @param currentImage 当前图片的url
 @return 控制器实例
 */
- (instancetype)initWithImages:(NSArray <NSString *>*)images currentImage:(NSString *)currentImage;

显示网页中的图片只需要调用这个初始化方法即可，当然也可以自己实现用上面那些单独的类。

上面这些只是简单的介绍一下，没有具体到每个点，见谅。

源码地址：

github欢迎star

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,390评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,821评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,632评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,170评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,033评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,098评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,511评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,204评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,479评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2赞 335

推荐阅读更多精彩内容