iOS开发-UITableView滑动视差

ui594q8h 6年前

来自: http://www.cnblogs.com/xiaofeixiang/p/5152828.html

视差滚动是指让多层背景以不同的速度移动,形成立体的运动效果,在Web上应用的比较多,App中倒是见的相对比较少,主要在UITableView中的应用的比较多,尤其是当整个UITableViewCell的背景是图片的时候,描述内容较少,滑动视差可以增强视觉效果,可以考虑使用,先来简单的看一下效果:

实现起来也比较简单,UITableView定义:

#pragma mark - UITablViewDataSource  -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{      return 1;  }    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{      return [self.dataSource count];  }    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{      MainTableViewCell *mainCell=[tableView dequeueReusableCellWithIdentifier:CELLIDENTIFIER forIndexPath:indexPath];      NSString *desc=[NSString stringWithFormat:@"FlyElephant-%ld",indexPath.row];      [mainCell setBackImage:self.dataSource[indexPath.row] description:desc];      return mainCell;  }  #pragma mark - UITableViewDelegate  -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{      return 150;  }

滑动的时候修改单元格偏移量:

#pragma mark - UIScrollViewDelegate  -(void)scrollViewDidScroll:(UIScrollView *)scrollView{      CGPoint offset=self.tableView.contentOffset;      for (MainTableViewCell *cell in self.tableView.visibleCells) {          //方式1  //        [cell setImagOffset:offset tableView:self.tableView];          //方式2          [cell setAdjustOffset:(cell.frame.origin.y-offset.y)];      }  }

MainTableViewCell定义:

@interface MainTableViewCell : UITableViewCell    -(void)setBackImage:(NSString *)imageName description:(NSString *)desc;    //视差滑动方式1  -(void)setImagOffset:(CGPoint)contentOffset tableView:(UITableView *)tablView;    //视差滑动方式2  -(void)setAdjustOffset:(CGFloat)offset;    @end

滑动视差调用方式:

-(void)setImagOffset:(CGPoint)contentOffset tableView:(UITableView *)tablView{      //偏移量      CGFloat cellOffset = self.frame.origin.y - contentOffset.y;      // 偏移量+单元格高度/tableview高度+单元格高度      CGFloat percent = (cellOffset+self.frame.size.height)/(tablView.frame.size.height+self.frame.size.height);      //偏移比例(0-1)      CGFloat extraHeight = self.frame.size.height*OFFSET_RATE;        CGRect frame=self.backImageView.frame;      frame.origin.y=extraHeight*percent;      self.backImageView.frame=frame;  }    -(void)setAdjustOffset:(CGFloat)offset{      CGRect frame = self.backImageView.frame;      frame.origin.y = (offset / 15.0);      self.backImageView.frame = frame;  }

实现起来比较简单,网上有各种各样的版本,这两种的方式算是最简单的实现~