效果图:
Demo
- 在对数据进行模型化时 对
cell
的各个子控件的frame
以及cell
的高度 - 缓存
cell
高度及需要变化的子控件frame
- 通过显示/隐藏来避免控件重复的创建/销毁对性能的销毁
- 在对九宫格图片通过
layer
来进行渲染 -
cell
的循环利用这个是必须的
cell 样式 头部view / 九宫格图片布局view / 底部功能view
- 头部view高度基本是固定
- 九宫格图片布局
view
高度计算及各个子控件frame
计算
- (void)setImgList:(NSArray *)imgList{
_imgList = imgList;
self.picsViewH = [self picsViewHWithArray:imgList];
}
- (CGFloat)picsViewHWithArray:(NSArray*)array{
NSInteger count = array.count;
_imgItemsArray = [NSMutableArray arrayWithCapacity:count];
if (count <= 0) {
return 0;
}
CGFloat itemMargin = 4.0;
NSInteger columCount = count >= 3 ? 3 : (count % 3);
CGFloat totalW = [UIScreen mainScreen].bounds.size.width - 2 * commMargin - (columCount - 1) * itemMargin;
CGFloat imgWH = totalW / columCount;
CGFloat rowCount = (count - 1) / columCount + 1;
NSInteger rowN = 0;
NSInteger lineN = 0;
for (NSInteger i = 0; i < count; i++) {
ImageItem *item = [[ImageItem alloc] init];
item.imgURL = array[i];
rowN = i / columCount;
lineN = i % columCount;
item.imgFrame = CGRectMake((imgWH + itemMargin) * lineN, (imgWH + itemMargin) * rowN + 10, imgWH, imgWH);
[_imgItemsArray addObject:item];
}
return imgWH * rowCount + (rowCount - 1) * itemMargin + 20;
}
- 底部高度固定
- `cell`高度为所需子控件高度和
cell
中对九宫格view
进行layout
- (void)layoutPics{
NSInteger picCount = _dataModel.imgItemsArray.count;
for (NSInteger i = 0; i < 9; i++) {
UIView *view = self.picsViewArray[i];
if (i >= picCount) {
[view.layer cancelCurrentImageRequest];
view.hidden = YES;
}else{
ImageItem *item = _dataModel.imgItemsArray[i];
view.hidden = NO;
view.frame = item.imgFrame;
[view.layer removeAnimationForKey:@"contents"];
@weakify(view);
[view.layer setImageWithURL:[NSURL URLWithString:item.imgURL]
placeholder:nil
options:YYWebImageOptionAvoidSetImage
completion:^(UIImage * _Nullable image, NSURL * _Nonnull url, YYWebImageFromType from, YYWebImageStage stage, NSError * _Nullable error) {
@strongify(view);
view.layer.contents = (id)image.CGImage;
if (from != YYWebImageFromMemoryCacheFast) {
CATransition *transition = [CATransition animation];
transition.duration = 0.15;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
transition.type = kCATransitionFade;
[view.layer addAnimation:transition forKey:@"contents"];
}
}];
}
}
}