前言：

之前看見(jiàn)的印物App里的定制模塊的TableView效果還是不錯(cuò)的，所以仿這個(gè)App實(shí)現(xiàn)了最主要的亮點(diǎn)之一TableView滾動(dòng)效果(層疊效果)。cell中的細(xì)節(jié)功能是沒(méi)有添加的, 需要的話大家可以自己進(jìn)行擴(kuò)展添加!

效果圖：

效果圖.gif

功能實(shí)現(xiàn):

首先TableView與cell的初始化過(guò)程就不多解釋了, 接下來(lái)我們來(lái)看看重要的代碼實(shí)現(xiàn):

• 首先實(shí)現(xiàn)cell中的方法

  需要用到2個(gè)屬性來(lái)幫助我們實(shí)現(xiàn)這個(gè)方法
  //底層View
  @property (nonatomic, weak)UIView *backGView;
  //上層Image
  @property (nonatomic, weak)UIImageView *backGImage;

  //這個(gè)方法是我們主要實(shí)現(xiàn)的核心代碼
  /**  cell偏移設(shè)置*/      
  - (void)cellOffsetOnTabelView:(UITableView *)tabelView;
  

  思路:
  1.需要規(guī)定一個(gè)固定的currentLocation值
  2.如果cell的Y值小于tabelView.contentOffset.y值(超出 屏幕上面的位置), 需要進(jìn)行一次處理(停止cell偏移)
  3.如果cell的Y值在currentLocation范圍內(nèi)需要進(jìn)行二次處理(進(jìn)行cell偏移)
  4.最后cell的Y值在currentLocation下面位置進(jìn)行三次處理(設(shè)置初始值), 如下代碼:
  //cell偏移量實(shí)現(xiàn)
  - (void)cellOffsetOnTabelView:(UITableView *)tabelView
  {
  CGFloat currentLocation = tabelView.contentOffset.y + LRLastCellHeight;
  //如果需要可以打開(kāi)下面這段代碼
  #if 0
  //下拉禁止 第一個(gè)cell往下移動(dòng)
  if (currentLocation < LRCellHeight) return;
  #endif
  //如果超出規(guī)定的位置以 ->“上”
  if (self.frame.origin.y < tabelView.contentOffset.y + LRLastCellHeight - LRCellHeight) {

    self.backGView.height = LRLastCellHeight;
    
    self.backGView.y = - (LRLastCellHeight - LRCellHeight);
    
    }else if (self.frame.origin.y <= currentLocation && self.frame.origin.y >= tabelView.contentOffset.y) {//cell開(kāi)始進(jìn)入規(guī)定的位置
    
    //通過(guò)絕對(duì)值 取出移動(dòng)的Y值
    CGFloat moveY = ABS(self.frame.origin.y - currentLocation) / LRCellHeight * (LRLastCellHeight - LRCellHeight);
    
    //每次進(jìn)來(lái)把當(dāng)前cell提到最上層
    [self.superview bringSubviewToFront:self];
    
    //移動(dòng)的值 + cell固定高度
    self.backGView.height = LRCellHeight + moveY;
    
    //設(shè)置偏移量Y值
    self.backGView.y = - moveY;
    
    }else{//超出規(guī)定的位置以 ->“下”
    self.backGView.height = LRCellHeight;
    self.backGView.y = 0;
          }
    }
  

• 調(diào)用方法

主要核心代碼實(shí)現(xiàn)完, 其他部分在ViewController調(diào)用就非常簡(jiǎn)單了:
#pragma mark -<UITableViewDataSource>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 10;
}

  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  {
      LREffectCell * effectCell = [LREffectCell cellFromTableView:tableView];

      return effectCell;
  }

  - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
  {
      //cell 將要顯示時(shí)候我們把數(shù)據(jù)給它
      LREffectCell * effectCell = (LREffectCell *)cell;

      effectCell.backGImage.image = LRGetImage(indexPath.row);

      //初始化 -> 調(diào)用第一次滾動(dòng)
      [effectCell cellOffsetOnTabelView:_tableView];
  }

  - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
  {
      return LRCellHeight;
  }

最后需要監(jiān)聽(tīng)scrollView滾動(dòng)實(shí)現(xiàn)cell偏移:

  - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  {
      // [_tableView visibleCells]：獲取表視圖的可見(jiàn)單元格。(可見(jiàn)的視圖)
      //遍歷
      [[_tableView visibleCells] enumerateObjectsUsingBlock:^(LREffectCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
          //cell偏移設(shè)置
          [obj cellOffsetOnTabelView:_tableView];
      }];
  }

效果圖失幀嚴(yán)重建議去GitHub - 點(diǎn)擊下載 運(yùn)行效果會(huì)更明顯，包你滿意！
如果喜歡的小伙伴請(qǐng)點(diǎn)一個(gè)贊吧，歡迎留言補(bǔ)充與給出不足之處！