顺滑的九宫格类型朋友圈

效果图:

iPhone.gif
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"];
                                 }
                                 
                             }];
            
        }
    }
}