前言
在我看来，任何库存在的意义都是实际项目中频繁的用到，又不想重复开发，所以封装好，以方便下个项目或者他人使用。
这个库也不例外，图片已经是现在每个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;
显示网页中的图片只需要调用这个初始化方法即可，当然也可以自己实现用上面那些单独的类。
网友评论