關(guān)于tableView視差效果，我們來封裝一下。</br>
具體實現(xiàn)思路請看：</br>
一. 在工程中新建一個繼承于UITableView的類，在.m中重寫初始化方法。
在初始化方法中注冊已經(jīng)寫好的cell，并設(shè)置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;
// 設(shè)置默認(rèn)cell高度
self.cellHeight = 200;
// 設(shè)置默認(rèn)imageView高度
self.imageHeight = 300;
}
return self;
}
二. 在.h文件中聲明幾個屬性，方便用戶對樣式做基本設(shè)置。
/** 數(shù)據(jù)源數(shù)組，存儲圖片名稱或地址 */
@property (nonatomic, strong) NSArray *sourceArray;
/** 數(shù)據(jù)源數(shù)組 */
@property (nonatomic, strong) NSArray *titleSourceArray;
/** cell的高度 */
@property (nonatomic, assign) CGFloat cellHeight;
/** 圖片高度 */
@property (nonatomic, assign) CGFloat imageHeight;
/** 是否包含標(biāo)題 */
@property (nonatomic, assign) BOOL isHasTitle;
/** 標(biāo)題背景色 */
@property (nonatomic, strong) UIColor *titleBackgroundColor;
/** 標(biāo)題文字顏色 */
@property (nonatomic, strong) UIColor *titleTextColor;
三. 實現(xiàn)幾個代理方法
- (void) updateImageViewOffsetOfCell:(LTParallaxCell *)cell
{
// 獲取當(dāng)前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基礎(chǔ)上增加幾個屬性并重寫set方法
/** 標(biāo)題背景色 */
@property (nonatomic, strong) UIColor *titleBackgroundColor;
/** 標(biāo)題文字顏色 */
@property (nonatomic, strong) UIColor *titleTextColor;
/** 圖片高度 */
@property (nonatomic, assign) CGFloat imageViewHeight;
/** cell高度 */
@property (nonatomic, assign) CGFloat cellHeight;
set方法實現(xiàn)如下：
/**
* isHasTitle的set方法
*
* @param isHasTitle
*/
- (void)setIsHasTitle:(BOOL)isHasTitle
{
if (_isHasTitle != isHasTitle) {
_isHasTitle = isHasTitle;
// 判斷有標(biāo)題，則將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;
}
/**
* 設(shè)置圖片高度
*
* @param imageViewHeight 圖片高度
*/
-(void)setImageViewHeight:(CGFloat)imageViewHeight
{
if (_imageViewHeight != imageViewHeight) {
_imageViewHeight = imageViewHeight;
// 將圖片高度修改為用戶設(shè)置
_mainImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width , _imageViewHeight)];
}
}
封裝好的代碼地址：https://github.com/menglingtong/LTParallaxTableView/tree/master
五. 調(diào)用方法
使用起來就很簡單了，將頭文件引入到VC中，按照我們開放好的接口挨個設(shè)置就好啦！例如：
LTParallaxTableView *tableView = [[LTParallaxTableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];
// 設(shè)置包含標(biāo)題
tableView.isHasTitle = YES;
// 將圖片數(shù)組傳入
tableView.sourceArray = sourceArr;
// 將標(biāo)題數(shù)組傳入
tableView.titleSourceArray = titleSourceArr;
// 設(shè)置cell的高度
tableView.cellHeight = 200;
// 設(shè)置imageView的高度
tableView.imageHeight = 300;
// 設(shè)置標(biāo)題背景顏色
tableView.titleBackgroundColor = [UIColor colorWithRed:0.36 green:0.72 blue:0.33 alpha:0.40];
[self.view addSubview:tableView];
