UITableView的几种上拉和下拉效果总结

前言######

最近在写demo的时候，有用到几种TableView上拉和下拉的效果，就顺便总结了一下，demo是分为几个模块写的，可以独立使用，希望对朋友们有帮助。

代码地址：tableView常用的上拉和下拉效果

代码效果##

demo技术点：下拉放大、下拉回弹、上拉放大、上拉回弹效果、自定义tableView的dataSouce等

效果图.png

功能分析###

一、上拉回弹效果
核心思想：改变最后一个cell的y值和高度
步骤：
1.计算刚好拖到底部时候的offset
刚好拖动到底部的距离 = scrollView.contentSize.height - scrollView.frame.size.height
要是在向上拖动一点点就会导致整个tableView被拖起来，所以

偏移量 offset = scrollView.contentOffset.y -(scrollView.contentSize.height - scrollView.frame.size.height);

2、拿到之前在cellForRowAtIndexPath保存的最后一个cell
这个代码在cellForRowAtIndexPath

//保存最后一个cell和cell的y值   

if(sectionModel.tableViewRowArray.count-1  == indexPath.row)
{
     self.lastCell = scaleCell;
}

3、计算变化的高度

注意： [LZBScaleTableViewCell getScaleTableViewCellHeight]是cell的固定高度

cellFrame.size.height = [LZBScaleTableViewCell getScaleTableViewCellHeight] + offset;

4.最后给cell赋值

cell.coverImageView.bounds = cellFrame;

cell.coverImageView.center = CGPointMake(cellFrame.size.width *0.5, cellFrame.size.height *0.5);

完整的代码demo

- (void)pullUpTranslationScrollView:(UIScrollView *)scrollView

{
  CGFloat offset = scrollView.contentOffset.y -(scrollView.contentSize.height - scrollView.frame.size.height);
 if(offset >0)
 {
  //拿到最后一个cell
   LZBScaleTableViewCell *cell = self.lastCell;
   CGRect cellFrame = cell.frame;
   cellFrame.size.height = [LZBScaleTableViewCell getScaleTableViewCellHeight] + offset;
   cell.coverImageView.bounds = cellFrame;
   cell.coverImageView.center = CGPointMake(cellFrame.size.width *0.5, cellFrame.size.height *0.5);
  }
 }

注意点：改变coverImageView的时候一定不要习惯性的设置 _coverImageView.contentMode = UIViewContentModeScaleAspectFill;

  _coverImageView.clipsToBounds = YES;

二、上拉放大效果
这个效果比较简单，大同小异，直接上代码，也可以参考简书：tableView的上拉放大效果

 - (void)pullUpBottomViewScaleWithScrollView:(UIScrollView *)scrollView

{
CGFloat offset = scrollView.contentOffset.y -(scrollView.contentSize.height - ([UIScreen mainScreen].bounds.size.height -naviView_Height));
if(offset > 0)
{
    //拿到最后一个cell
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:[self.dataSource itemSectionObjectWithIndexPathSection:self.sectionArray.count -1].items.count-1 inSection:self.sectionArray.count -1];
    LZBScaleTableViewCell *cell =[self.tableView cellForRowAtIndexPath:indexPath];
   //计算放大系数
    CGFloat percent =  1 + offset/[LZBScaleTableViewCell getScaleTableViewCellHeight];
    CGRect cellFrame = cell.coverImageView.bounds;
    CGPoint cellCenter = cell.coverImageView.center;
    cellCenter.x = cellCenter.x;
    //改变CenterY
    cellCenter.y = ([LZBScaleTableViewCell getScaleTableViewCellHeight] + offset ) * 0.5;
    //放大宽、高
    cellFrame.size.width = [UIScreen mainScreen].bounds.size.width * percent;
    cellFrame.size.height = [LZBScaleTableViewCell getScaleTableViewCellHeight] * percent;
    cell.coverImageView.center = cellCenter;
    cell.coverImageView.bounds = cellFrame;
 }
}

三、下拉放大
只是计算offset的方式不一样而已，核心思想一致

- (void)pullDownScrollScaleWithScrollView:(UIScrollView *)scrollView

{
  if(scrollView.contentOffset.y < 0)
{
   //获取第一个cell
   LZBScaleTableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
   CGFloat cellHeight = [LZBScaleTableViewCell getScaleTableViewCellHeight];
   //获得offset
   CGFloat offset = -scrollView.contentOffset.y;
   CGFloat percent = (offset + cellHeight)/cellHeight;
   //获得cell的尺寸
   CGRect cellFrame = cell.coverImageView.frame;
   CGPoint cellCenter = cell.coverImageView.center;
   cellFrame.size.width = [UIScreen mainScreen].bounds.size.width *percent;
   cellFrame.size.height = cellHeight *percent;
   cellCenter.x = cellCenter.x;
   cellCenter.y = cellHeight * 0.5 + scrollView.contentOffset.y * 0.5;
   cell.coverImageView.center = cellCenter;
   cell.coverImageView.bounds = cellFrame;
  }
}

四、下拉回弹

- (void)pullDownScrollScaleWithScrollView:(UIScrollView *)scrollView

{
  if(scrollView.contentOffset.y < 0)
 {
    //获取第一个cell
    LZBScaleTableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
    CGFloat cellHeight = [LZBScaleTableViewCell getScaleTableViewCellHeight];
    //获得offset
    CGFloat offset = -scrollView.contentOffset.y;
    //获得cell的尺寸
    CGRect cellFrame = cell.coverImageView.frame;
    CGPoint cellCenter = cell.coverImageView.center;
    cellFrame.size.width = [UIScreen mainScreen].bounds.size.width;
    cellFrame.size.height = cellHeight + offset;
    cellCenter.x = cellCenter.x;
    cellCenter.y = cellHeight * 0.5 + scrollView.contentOffset.y * 0.5;
    cell.coverImageView.center = cellCenter;
    cell.coverImageView.bounds = cellFrame;
 }
}

demo中还重点写了两种tableView常用的场景，你是否还是只在控制器中写,那么你就out了，你可以期待我下一篇的介绍

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

代码地址：tableView常用的上拉和下拉效果

最后赠言###

如果觉得文章对您有帮助，不要忘记star哦!😝，star 是对程序猿最大的鼓励！