Parallax：视差视图_parallaxscrollview-CSDN博客

本文链接：https://blog.csdn.net/Sherry1002_/article/details/49338111

最近用tableView写了一个有视差滚动效果的小demo，在这儿给大家分享一下，希望对大家有帮助。

在tableView的自定义cell上加了一个scrollView，在scrollView上面加了一个imageView，实现视差滚动（parallax）效果。

首先，打开xcode，创建一个Single View Application的工程。这里写图片描述

在工程里创建一个tableViewCell类，命名为ImageTableViewCell。这里写图片描述

之后导入图片资源。
这里写图片描述

接下来就是写代码了。
ViewController.m

//
//  ViewController.m
//  HEHE
//
//  Created by dllo on 15/10/17.
//  Copyright (c) 2015年 Sherry. All rights reserved.
//

#import "ViewController.h"
#import "ImageTableViewCell.h"
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)
@interface ViewController () <UITableViewDataSource, UITableViewDelegate>

@property (nonatomic, retain) UITableView *tableView;
@property (nonatomic, retain) NSMutableArray *tableArray;

@end


@implementation ViewController



- (void)viewDidLoad {
    [super viewDidLoad];

    self.tableArray = [NSMutableArray array];
    [self getDataFromLocal];
    [self createVCTableView];



}
#pragma mark - tableView 代理方法
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ImageTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"imageCell"];

    NSString *imageName = self.tableArray[indexPath.row];

    [cell takeDataForCell:imageName];

    return cell;
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.tableArray.count;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return SCREEN_HEIGHT/3;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{


    for (int i = 0; i < self.tableArray.count; i++) {
        NSIndexPath *index = [NSIndexPath indexPathForRow:i inSection:0];
        ImageTableViewCell *imageCell = (ImageTableViewCell *)[self.tableView cellForRowAtIndexPath:index];
        // 当tableView滚动到负数不执行不然小cell里会有白色边
        if (scrollView.contentOffset.y > 0) {
            if (i > 3) {
                [imageCell.scrollView setContentOffset:CGPointMake(0, (scrollView.contentOffset.y -SCREEN_HEIGHT/3*(i-3))/ 2.2)];
            }
            else
            {
                [imageCell.scrollView setContentOffset:CGPointMake(0, scrollView.contentOffset.y / 2.5)];
            }

        }
    }

}


#pragma mark - 创建方法

/// 创建TableView
- (void)createVCTableView
{
    self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    self.tableView.separatorStyle = NO;
    self.tableView.bounces = NO;

    [self.tableView registerClass:[ImageTableViewCell class] forCellReuseIdentifier:@"imageCell"];

    [self.view addSubview:_tableView];
}

/// 准备数据
- (void)getDataFromLocal
{
    for (int i = 0; i < 18; i++) {
        NSString *imageName = [NSString stringWithFormat:@"%d.jpg", i];
        [self.tableArray addObject:imageName];
    }

    [self.tableView reloadData];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

ImageTableViewCell.h的代码：

//
//  ImageTableViewCell.h
//  HEHE
//
//  Created by dllo on 15/10/17.
//  Copyright (c) 2015年 Sherry. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ImageTableViewCell : UITableViewCell
@property (nonatomic, retain) UIScrollView *scrollView;
- (void)takeDataForCell:(NSString *)imageName;

@end

ImageTableViewCell.m的代码：

//
//  ImageTableViewCell.m
//  HEHE
//
//  Created by dllo on 15/10/17.
//  Copyright (c) 2015年 Sherry. All rights reserved.
//

#import "ImageTableViewCell.h"

@interface ImageTableViewCell ()

@property (nonatomic, retain) UIImageView *cellImageView;


@end


@implementation ImageTableViewCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {

        [self createSomeThingInCell];
    }

    return self;
}

/// 初始化视图
- (void)createSomeThingInCell
{


    self.cellImageView = [[UIImageView alloc] init];

    self.scrollView = [[UIScrollView alloc] init];

    [self.scrollView addSubview:self.cellImageView];
    self.scrollView.contentSize = CGSizeMake(0, [UIScreen mainScreen].bounds.size.height);
    self.scrollView.userInteractionEnabled = NO;

    [self.contentView addSubview:self.scrollView];



}

/// 给视图赋值
- (void)takeDataForCell:(NSString *)imageName
{
    UIImage *image = [UIImage imageNamed:imageName];

    [self.cellImageView setImage:image];
}



- (void)layoutSubviews
{
    [super layoutSubviews];
    _cellImageView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
    _scrollView.frame = CGRectMake(0, 0, self.cellImageView.frame.size.width, [UIScreen mainScreen].bounds.size.height/3);

}
- (void)awakeFromNib {
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}