2017/8/13 22:02:12当前位置推荐好文新浪微博浏览文章

这篇文章本来应该上个礼拜就可以发布,但是由于在写一个轻量级的SD,因此耽搁了很久,毕竟这个小轮子要和图片下载缓存器一起使用才能看到效果。

一、效果:

效果.gif
效果.gif

二、思路

首先

一般这种图片展示器都是用在TimeLine的cell上的,cell的高度往往随着cell的内容改变而改变。因此我认为该控件提供一个方法来返回控件自身的高度是很必要的。这样使用的人就可以直接调用方法来获得高度,至于到底怎样算出,就与使用者无关了。

/ 类方法,用来计算该视图的高度 和photoArray的个数 有关  @param width           width. @param photoArray      图片数组 /+ (CGFloat)heightForWidth:(CGFloat)width photoArray:(NSArray )photoArray;

其次

视图内的imageView的排布是与传递过去的photoArray相关。自然需要给视图一个公开的photoArray属性。这样使用者直接设置photoArray就行。
当然,我会重写- (void)setPhotoArray:(NSArray )photoArray来进行子控件排布,但是使用者就没必要知道了。毕竟轻松留给他人。

@property (nonatomic, strong) NSArray photoArray;     ///<YQPhoto类型的数组

最后

photoArray里面放什么东西是需要定下来的,总不能乱传吧。因此我创建了YQPhotoYQPhotoMetaData类。

typedef NS_ENUM(NSUInteger, YQPhotoType) {    YQPhotoTypeNone = 0,    ///< 正常图片    YQPhotoTypeHorizontal,  ///< 横图    YQPhotoTypeLong,        ///< 长图};@interface YQPhotoMetaData : NSObject ///<YQPhoto的数据@property (nonatomic, copy) NSString url;@property (nonatomic, assign) int width;@property (nonatomic, assign) int height;@property (nonatomic, assign) CGFloat scale;@property (nonatomic, assign) YQPhotoType photoType;- (instancetype)initWithPicDic:(NSDictionary )picDic;@end@interface YQPhoto : NSObject   ///<YQPhoto 数组内就是一个个YQPhoto 每一个YQPhoto中都有一个缩略图和一个原始图以及照片id@property (nonatomic, strong)YQPhotoMetaData bmiddle;  ///<缩略图@property (nonatomic, strong)YQPhotoMetaData original; ///<原始图@property (nonatomic, copy) NSString picID;  /// 照片id@end

也许你看到这里会有点乱,我还是画一张图片吧。

结构图.jpeg
结构图.jpeg

就像图片上写的,高宽比还有类型是需要自己算的,所以YQPhotoMetaData自定义了初始化方法- (instancetype)initWithPicDic:(NSDictionary )picDic;。 这样直接可以获得YQPhotoMetaData的对象了。

- (instancetype)initWithPicDic:(NSDictionary )picDic{    self = [super init];    self.url = picDic[@"url"];    self.height = [picDic[@"height"] intValue];    self.width = [picDic[@"width"] intValue];    self.scale = (CGFloat)self.height / self.width;    if (self.scale > 2) {        self.photoType = YQPhotoTypeLong; // 长图    } else if (self.scale < 1) {        self.photoType = YQPhotoTypeHorizontal;    }    return self;}

这里补充一点,在平时开发中,需要初始化对象的时候,也同样可以自定义初始化方法init...,顺便传值,这样就可以直接在这个方法中把一些复杂的属性给赋值了。

三、使用

获得数据

获得数据的代码比较繁琐,我就不全部贴出来了。总之,我获得了一个内含9个YQphoto对象的数组photoArray,然后循环100次,随机的截取photoArray,最后添加到self.listArray里面。

for (int i = 0; i<100; i++) {        int = arc4random() % 10;        if (== 0) ++;        NSArray array = [photoArray subarrayWithRange:NSMakeRange(0, count)];        [self.listArray addObject:array];}
数组内部1.png
数组内部1.png数组内部2.png
数组内部2.png数组内部3.png
数组内部3.png数组内部4.png
数组内部4.png数组内部5.png
数组内部5.png

自定义 YQTableViewCell

放一下属性:

@interface YQTableViewCell : UITableViewCell@property (nonatomic, weak) UILabel label;  ///<这一行有%ld个图片@property (nonatomic, weak) YQDisplayPhotoContainerView displayView;  ///<图片展示器@property (nonatomic, strong) NSArray photoArray; ///<图片数组@end

没什么好说的,比较简单,重写- (void)setPhotoArray:(NSArray )photoArray设置内容就行。

设置tableview

- (NSInteger)tableView:(UITableView )tableView numberOfRowsInSection:(NSInteger)section{    return self.listArray.count;}- (UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath )indexPath{    YQTableViewCell cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];    if (!cell) {        cell = [[YQTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];    }    cell.photoArray = self.listArray[indexPath.row];    return cell;}- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath{    return [YQDisplayPhotoContainerView heightForWidth:300 photoArray:self.listArray[indexPath.row]] + 40;}

关键在于- (CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath方法。
高度是通过最前面提到的计算高度方法获得的。这里的+40是因为UILabel label也有高度。前者只是图片展示器的高度而并不已经是cell的高度了。

补充

最后再提一些要点。
如果你有兴趣去看内部实现的话,你会发现在这个视图内部我创建了一个 尺寸计算器YQSizeCalculator。所有的计算尺寸的方法都在这个计算机内部实现,这样当你要有新的设计排布时,更改计算机内部的计算方式,就可以获得你要的尺寸。

里面还有一个小细节,当放入不同的长图和横图时,视图的高度和内部的imageview的frame 也会不一样,如果有兴趣也可以自己去尝试呀。

放一下项目文件结构,很简单哟。

项目文件结构.png
项目文件结构.png

代码

github:YQDisplayPhotoContainerView

结束

最后的最后再放一个彩蛋,效果图可以看到所有图片都是占位图,那是因为在设置内部imageView的image时写死了。

imageView.image = [UIImage imageNamed:@"placeholder"];

下一篇等我写出了轻量级的SD后,再把这行代码改掉。

网友评论