关于tableView视差效果，我们来封装一下。
具体实现思路请看：
- http://www.jianshu.com/p/00f069c91bea
- http://www.lrymlt.cn/blog/?p=109
一. 在工程中新建一个继承于UITableView的类，在.m中重写初始化方法。
在初始化方法中注册已经写好的cell，并设置self为代理人，签
- (instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style
{
self = [super initWithFrame:frame style:style];
if (self) {
[self registerClass:[LTParallaxCell class] forCellReuseIdentifier:@"mycell"];
self.delegate = self;
self.dataSource = self;
self.separatorStyle = UITableViewCellSeparatorStyleNone;
// 设置默认cell高度
self.cellHeight = 200;
// 设置默认imageView高度
self.imageHeight = 300;
}
return self;
}
二. 在.h文件中声明几个属性，方便用户对样式做基本设置。
/** 数据源数组，存储图片名称或地址 */
@property (nonatomic, strong) NSArray *sourceArray;
/** 数据源数组 */
@property (nonatomic, strong) NSArray *titleSourceArray;
/** cell的高度 */
@property (nonatomic, assign) CGFloat cellHeight;
/** 图片高度 */
@property (nonatomic, assign) CGFloat imageHeight;
/** 是否包含标题 */
@property (nonatomic, assign) BOOL isHasTitle;
/** 标题背景色 */
@property (nonatomic, strong) UIColor *titleBackgroundColor;
/** 标题文字颜色 */
@property (nonatomic, strong) UIColor *titleTextColor;
三. 实现几个代理方法
- (void) updateImageViewOffsetOfCell:(LTParallaxCell *)cell
{
// 获取当前cell的偏移量
CGFloat cellY = cell.frame.origin.y - self.contentOffset.y;
// 计算图片最大的偏移量范围
CGFloat imgMaxHeight = [cell imageOverflowHeight];
// 计算图片偏移量
CGFloat offset = 0.0f - imgMaxHeight * cellY / self.frame.size.height;
[cell setImageOffset:CGPointMake(0.0f, offset)];
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return _cellHeight;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return _sourceArray.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
LTParallaxCell *cell = [self dequeueReusableCellWithIdentifier:@"mycell"];
cell.mainImageView.image = [UIImage imageNamed:[_sourceArray objectAtIndex:indexPath.row]];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.clipsToBounds = YES;
cell.imageViewHeight = _imageHeight;
if (_isHasTitle != 0) {
cell.isHasTitle = _isHasTitle;
}
if (_titleSourceArray != nil) {
cell.titleLabel.text = [_titleSourceArray objectAtIndex:indexPath.row];
}
if (_titleBackgroundColor != nil) {
cell.titleBackgroundColor = _titleBackgroundColor;
}
return cell;
}
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
[self updateImageViewOffsetOfCell:(LTParallaxCell *)cell];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
for (LTParallaxCell *cell in self.visibleCells) {
[self updateImageViewOffsetOfCell:cell];
}
}
四. 在原有cell基础上增加几个属性并重写set方法
/** 标题背景色 */
@property (nonatomic, strong) UIColor *titleBackgroundColor;
/** 标题文字颜色 */
@property (nonatomic, strong) UIColor *titleTextColor;
/** 图片高度 */
@property (nonatomic, assign) CGFloat imageViewHeight;
/** cell高度 */
@property (nonatomic, assign) CGFloat cellHeight;
set方法实现如下：
/**
* isHasTitle的set方法
*
* @param isHasTitle
*/
- (void)setIsHasTitle:(BOOL)isHasTitle
{
if (_isHasTitle != isHasTitle) {
_isHasTitle = isHasTitle;
// 判断有标题，则将titleLabel控件添加到图层中
if (_isHasTitle) {
_titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 80, [UIScreen mainScreen].bounds.size.width, 40)];
_titleLabel.text = @"这是图片上的文字";
_titleLabel.textAlignment = 1;
[self.contentView addSubview:_titleLabel];
}
}
}
- (void)setTitleBackgroundColor:(UIColor *)titleBackgroundColor
{
if (_titleBackgroundColor != titleBackgroundColor) {
_titleBackgroundColor = titleBackgroundColor;
}
_titleLabel.backgroundColor = titleBackgroundColor;
}
/**
* 设置图片高度
*
* @param imageViewHeight 图片高度
*/
-(void)setImageViewHeight:(CGFloat)imageViewHeight
{
if (_imageViewHeight != imageViewHeight) {
_imageViewHeight = imageViewHeight;
// 将图片高度修改为用户设置
_mainImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width , _imageViewHeight)];
}
}
封装好的代码地址：https://github.com/menglingtong/LTParallaxTableView/tree/master
五. 调用方法
使用起来就很简单了，将头文件引入到VC中，按照我们开放好的接口挨个设置就好啦！例如：
LTParallaxTableView *tableView = [[LTParallaxTableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];
// 设置包含标题
tableView.isHasTitle = YES;
// 将图片数组传入
tableView.sourceArray = sourceArr;
// 将标题数组传入
tableView.titleSourceArray = titleSourceArr;
// 设置cell的高度
tableView.cellHeight = 200;
// 设置imageView的高度
tableView.imageHeight = 300;
// 设置标题背景颜色
tableView.titleBackgroundColor = [UIColor colorWithRed:0.36 green:0.72 blue:0.33 alpha:0.40];
[self.view addSubview:tableView];