UITableView 视差效果

   <p>之前在项目中用过一个视差效果，其实实现并不是很难，我们先看一下效果</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3749f2b8720e897b2d3773073300bb8f.gif"></p>    <p style="text-align:center">视差效果.gif</p>    <p>大概说一下思路:</p>    <p>每个cell中有一个UIImageView，在tableview向上滑动的时候，cell中的imageview相对cell向下移动，形成一个视差效果。也就是说，除了屏幕最上端的cell中的imageview的y为0以外，下面的cell中的imageview的Y值均为负值。</p>    <p>接下来就依照已知量来计算每个imageView的y值，并且在tableview滚动的时候实时更改imageView的Y值。</p>    <p>已知量：</p>    <ol>     <li>tableView的高度(tableViewHeight)</li>     <li>tableView的偏移量</li>     <li>cell的高度</li>     <li>imageView的高度</li>     <li>cell的Y值</li>     <li>cell相主屏幕的偏移量（cellOffset） -> cellY值 - tableView的偏移量</li>    </ol>    <p>求imageView的偏移量（imageViewOffset）。如下图所示。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c8648ed06fb43890e97fe0e49dd76ad2.png"></p>    <p style="text-align:center">图解.png</p>    <p>思路：</p>    <p>当cell的偏移量变为0的时候，imageViewY的值也由负值变为0。</p>    <p>imageViewY的最大值为 imageViewHeight - cellHeight。</p>    <p>因此可得如下公式：</p>    <p>cellOffset/tableViewHeight = imageViewOffset/(imageViewHeight - cellHeight);</p>    <p>imageViewOffset = cellOffset/tableViewHeight * (imageViewHeight - cellHeight);</p>    <p>好了，啰嗦完了，上代码：</p>    <p>新建一个工程，在工程中自定义一个cell，cell中放一个UIImageView控件，让UIImageView控件的高度大于Cell的高度。我这里设置为300；cell的高度设为200；</p>    <p>并且增加两个方法：</p>    <pre>  <code class="language-objectivec">// 获取图片最大偏移量      - (CGFloat)imageOverflowHeight；      // 重新设置图片偏移量      - (void)setImageOffset:(CGPoint)imageOffset；</code></pre>    <p>自定义cell.m中的代码如下：</p>    <pre>  <code class="language-objectivec">-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier      {          self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];            if (self) {                _mainImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width , 300)];                _mainImageView.contentMode = UIViewContentModeScaleAspectFill;                [self.contentView addSubview:_mainImageView];                _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 80, [UIScreen mainScreen].bounds.size.width, 40)];                _titleLabel.backgroundColor = [UIColor colorWithRed:0.94 green:0.94 blue:0.94 alpha:0.50];                _titleLabel.text = @"这是图片上的文字";                _titleLabel.textAlignment = 1;                [self.contentView addSubview:_titleLabel];          }            return self;      }        /**       *  返回图片大于imageView的高度       *       *  @return 图片大于imageView的高度       */      - (CGFloat)imageOverflowHeight      {          // 减200 是因为cell的高度设为200，所以直接写固定值了          return _mainImageView.frame.size.height - 200;      }        /**       *  设置imageView偏移量       *       *  @param imageOffset 偏移量       */      - (void)setImageOffset:(CGPoint)imageOffset      {          CGRect frame = _mainImageView.frame;          frame.origin = imageOffset;          _mainImageView.frame = frame;      }</code></pre>    <p>在VC中添加一个tableview控件，工程中拖入一些图片备用。VC.m的代码如下：</p>    <pre>  <code class="language-objectivec">@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>      @property (nonatomic, strong) NSMutableArray *sourceArr;      @property (nonatomic, strong) UITableView *mainTable;      @end        @implementation ViewController        - (void)viewDidLoad {          [super viewDidLoad];            _sourceArr = [NSMutableArray array];            for (NSInteger i = 1; i <= 44; i++) {                    NSString *imageName = [NSString stringWithFormat:@"img%ld.jpg", i];                    [_sourceArr addObject:imageName];            }            _mainTable = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];            _mainTable.delegate = self;            _mainTable.dataSource = self;            _mainTable.separatorStyle = UITableViewCellSeparatorStyleNone;            [_mainTable registerClass:[LTParallaxCell class] forCellReuseIdentifier:@"cell"];            [self.view addSubview:_mainTable];          }        /**       *  设置imageView的偏移量       *       *  @param cell       */      - (void)updateImageViewCellOffset:(LTParallaxCell *)cell      {          // 获取cell的偏移量          CGFloat cellOffset = cell.frame.origin.y - self.mainTable.contentOffset.y;          // 获取imageView的最大偏移量           CGFloat imgMaxHeight = [cell imageOverflowHeight];          // 计算imageView新的偏移量           CGFloat offset = 0.0f - imgMaxHeight * cellOffset / self.mainTable.frame.size.height;          // 设置imageView新的偏移量          [cell setImageOffset:CGPointMake(0.0f, offset)];        }        - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView      {          return 1;      }        - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section      {          return [_sourceArr count];      }        - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath      {          LTParallaxCell *cell        = [tableView dequeueReusableCellWithIdentifier:@"cell"];            cell.mainImageView.image    = [UIImage imageNamed:[_sourceArr objectAtIndex:indexPath.row]];            cell.selectionStyle         = UITableViewCellSelectionStyleNone;            cell.clipsToBounds          = YES;            return cell;      }        - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath      {          return 200;      }        #pragma mark - UIScrollViewdelegate methods        - (void)scrollViewDidScroll:(UIScrollView *)scrollView      {          for (LTParallaxCell *cell in self.mainTable.visibleCells) {              [self updateImageViewCellOffset:cell];          }      }        #pragma mark - UITableViewDelegate        - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath      {          [self updateImageViewCellOffset:(LTParallaxCell *)cell];      }        - (void)didReceiveMemoryWarning {          [super didReceiveMemoryWarning];          // Dispose of any resources that can be recreated.      }        @end</code></pre>    <p>至此，一个视差效果就完成了，如果有什么错误的地方欢迎大家指正。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/00f069c91bea</p>    <p> </p>