这篇文章本来应该上个礼拜就可以发布，但是由于在写一个轻量级的SD，因此耽搁了很久，毕竟这个小轮子要和图片下载缓存器一起使用才能看到效果。
一、效果：
效果.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里面放什么东西是需要定下来的，总不能乱传吧。因此我创建了YQPhoto和YQPhotoMetaData类。
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
就像图片上写的，高宽比还有类型是需要自己算的，所以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 count = arc4random() % 10;
if (count == 0) count ++;
NSArray *array = [photoArray subarrayWithRange:NSMakeRange(0, count)];
[self.listArray addObject:array];
}
数组内部1.png
数组内部2.png
数组内部3.png
数组内部4.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
代码
github：YQDisplayPhotoContainerView
结束
最后的最后再放一个彩蛋，效果图可以看到所有图片都是占位图，那是因为在设置内部imageView的image时写死了。
imageView.image = [UIImage imageNamed:@"placeholder"];
下一篇等我写出了轻量级的SD后，再把这行代码改掉。
网友评论