TableView视觉差效果以及内存优化

所谓的视觉差就是TableView在滚动的时候，可见的Cell都处于滑动状态，但是偏移量各不同，从而达到的一种视觉效果。

效果图

由于上传图片有大小要求，所以质量会有点问题！

OK，如何完成的？

恩，原理就这样子
默认显示的时候

默认显示

<br />
向下滑动的时候

向下滑动

<br />
向上滑动的时候

向上滑动

通过上面三个图就知道，要在滚动TableView的时候计算图片的Y值，来达到移动的效果。

计算代码以及注释

- (void)cellOnTableView:(UITableView *)tableView didScrollView:(UIView *)view{
    
    //将cell的frame转换成View的Frame
    CGRect rect = [tableView convertRect:self.frame toView:view];
    
    //视图的Frame的一半 减去 所看到的每个Cell的Y（获取滚动的值）
    //以屏幕中心为0 获取能看到每个cell离中心点的值
    float distanceCenter = CGRectGetHeight(view.frame)*0.5 - CGRectGetMinY(rect);
    
    
    //图片的高度 - cell的高度 = 图片超出cell的高度部分
    float difference = CGRectGetHeight(self.backImage.frame) - CGRectGetHeight(self.frame);
    
    
    float imageMove = (distanceCenter / CGRectGetHeight(view.frame)) * difference;
    
    //旧的图片Frame
    CGRect imageRect = self.backImage.frame;
    
    //计算新的Y值
    imageRect.origin.y = imageMove - (difference *0.5);
    
    //赋值
    self.backImage.frame = imageRect;
    
}

<br />
调用

//滚动监听
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 获取表视图的可见单元格。(可见的视图)
    NSArray *visibleCells = [self.tableview visibleCells];
    
    for (Cell *cell in visibleCells) {
        //可见视图设置->背景图片y值
        [cell cellOnTableView:self.tableview didScrollView:self.view];
    }
    
}

<br />
然后到这里就可以运行跑起来看效果了，嗯，确实实现了效果，但是先看下内存吧。

下面的图片均运行在真机上

<br />

直接加载的情况下

80+M貌似没多大问题，并且我这里选的也是比较大的图片，这里只加载了10张图片，但是如果图片过多，第一次滑动会卡，不流畅。

于是考虑优化内存，先奉上优化后的，当然我这里只是做一个思路，当然会有更好的解决方案，如果您有更好的解决方案，麻烦留言告知。

优化后

在上面的情况下都是10张图片，但是内存消耗却少了很多，少了80M左右，这个优化还是值得去做的。

因为数据源加载的是图片，又因为数据源是强引用，常驻内存，所以从图片入手。
在手机上显示图片，完全不用显示原尺寸，所以我的解决思路就是压缩图片，同时在界面上又基本上看不出来区别。
OK，现在要做的就是压缩图片。

<br />
做法就是根据屏幕的高度，然后在用图片的宽高比去压缩。

+(UIImage * _Nullable)imageCompressForWidth:(UIImage * _Nonnull)sourceImage targetWidth:(CGFloat)defineWidth{
    //根据原图片计算值压缩后的尺寸
    CGSize imageSize = sourceImage.size;
    CGFloat bili = imageSize.width / imageSize.height;
    CGFloat width = defineWidth * 2;
    CGFloat height = width * bili;
    
    //开启绘图
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, height), 1, 1);
    
    //绘图到当前上下文
    [sourceImage drawInRect:CGRectMake(0, 0, width, height)];
    
    //获取新图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //关闭图片绘制
    UIGraphicsEndImageContext();
    
    //返回图片
    return newImage;
}

如果你对图片绘制不是很熟悉
这里有一个传送门

由于图片过大，所以Demo打包为ZIP文件 ，如果对您有一点帮助，麻烦star一下，Thanks