Parallax：视差视图

最近用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
}

到这里就结束啦~写的不是很完善，有好的建议可以告诉我哦~

图片资源链接地址：

http://download.csdn.net/detail/sherry1002_/9204333