视差化滚动cell
首先欣赏下demo的效果图
大家可以到我的github下载代码,自己跑一下效果会更好哟(__)
parallax.gif我们追求的视差效果
- 当我们的cell滚动到屏幕中间的时候,所展示的图片也应该刚好处于中心
- 当一个cell从底部滚动到顶部的过程,cell中的图片位置应该从偏高滚动偏低(偏高、偏低是针对图片自己来说的)
如何去实现
既然我们要随着tableView的滚动而更新cell中图片的位置,必然会使用到tableView的contentOffset
,然后为了性能着想,我们更新图片位置的cell不应该是全部,而应该是当前屏幕中的cell,所以又想到了tableView的visibleCells
属性
Just do it!!!
为了方便移植使用,我创建了基类cell ParallaxCell
,然后新建一个cell继承于它就可以使用视差化子视图的特性了;
首先看一下ParallaxCell.h
文件
//初始化cell的时候记得先用注册哟!!!且仅针对cell的高度是一样的cell
@interface ParallaxCell : UITableViewCell
/**
* 重置视差化状态,因为cell的重用机制,重用之后要刷新状态
*/
- (void)resetParallaxState;
/**
* 设置可视差化的子视图,以及centerY上偏移的值和centerY下偏移的值
*
* @param view 允许被可视差化的视图
* @param minNum centerY上偏移的值
* @param maxNum centerY下偏移的值
*/
- (void)parallaxWithView:(UIView *)view offsetUp:(CGFloat)offsetUp offsetDown:(CGFloat)offsetDown;
/**
* 通过传入scrollview就更可以根据滚动的情况,更新之前需要视差化的视图的位置
*
* @param scrollView scrollView
*/
- (void)updateViewFrameWithScrollView:(UIScrollView *)scrollView;
再看一下ParallaxCell.m
文件
static NSString *const kParallaxView = @"kParallaxView";
static NSString *const kParallaxOriginalCenterY = @"kParallaxOriginalCenterY";
static NSString *const kParallaxOffsetUp = @"kParallaxOffsetUp";
static NSString *const kParallaxOffsetDown = @"kParallaxOffsetDown";
@interface ParallaxCell ()
@property (nonatomic, strong) NSMutableArray *originalCenterYArray;//用于记录视差化视图的原始中心Y值
@property (nonatomic, strong) NSMutableArray *parallaxViewArray;//记录视差化的视图
@property (nonatomic, assign) BOOL hasInited;//为了应付重用,用于只记录alloc出来的,重用出来的需要重置状态
@end
@implementation ParallaxCell
- (void)resetParallaxState
{
self.parallaxViewArray = [NSMutableArray array];
}
- (void)parallaxWithView:(UIView *)view offsetUp:(CGFloat)offsetUp offsetDown:(CGFloat)offsetDown
{
if (!self.hasInited) {
if (!self.originalCenterYArray) {
self.originalCenterYArray = [NSMutableArray array];
}
[self.originalCenterYArray addObject:@(view.center.y)];
}
NSDictionary *dict = @{kParallaxView : view,
kParallaxOriginalCenterY : self.originalCenterYArray[self.parallaxViewArray.count],
kParallaxOffsetUp : @(offsetUp),
kParallaxOffsetDown : @(offsetDown)};
[self.parallaxViewArray addObject:dict];
}
- (void)updateViewFrameWithScrollView:(UIScrollView *)scrollView
{
self.hasInited = YES;
//(cell的origin.y 加上 一个cell的高度 减去 当前滚动的偏移Y值 )除以 (屏幕的高度 加上 一个cell的高度)这个下面有画图解释
CGFloat percent = (self.frame.origin.y + self.frame.size.height - scrollView.contentOffset.y)/([UIScreen mainScreen].bounds.size.height+self.frame.size.height);
[self updateViewFrameWithPercent:percent];
}
- (void)updateViewFrameWithPercent:(CGFloat)percent
{
for (NSInteger index = 0; index < self.parallaxViewArray.count; index ++) {
NSDictionary *dataDict = self.parallaxViewArray[index];
UIView *view = dataDict[kParallaxView];
CGFloat originalCenterY = [dataDict[kParallaxOriginalCenterY] floatValue];
CGFloat offsetUp = [dataDict[kParallaxOffsetUp] floatValue];
CGFloat offsetDown = [dataDict[kParallaxOffsetDown] floatValue];
view.center = CGPointMake(view.center.x, [self interpolateFrom:originalCenterY - offsetUp to:originalCenterY + offsetDown percent:percent]);
}
}
/**
* 插值计算(线性),设置一个值的起始值与结束值,然后根据传入的百分比返回当前对应的值
*
* @param from 起始值
* @param to 结束值
* @param percent 百分比
*
* @return 当前值
*/
- (CGFloat)interpolateFrom:(CGFloat)from to:(CGFloat)to percent:(CGFloat)percent
{
if (percent > 1) {
return to;
}
if (percent < 0) {
return from;
}
return (to - from)*percent + from;
}
@end
最需要注意的地方:
- 就是cell 的重用机制,当cell从重用队列取出cell的时候,这个时候它的状态还是之前cell的状态,比如我们之前对它图片的位置进行的修改也保留了下来,如果我们重用之后不进行重置,就会以之前的状态进行处理,这当然不是我们想要的;
- 然后又因为我使用
- (void)parallaxWithView:(UIView *)view offsetUp:(CGFloat)offsetUp offsetDown:
为需要视差化的控件,逐一添加,而不是一次性添加所有需要视差化的控件,所以内部不好判断时机去重置cell的状态,所以我就添加了一个- (void)resetParallaxState
方法去重置; - 然后就是percent的计算原理,如下图所示:
cell的位置相对于视差化范围height的percent ,和cell中视差化视图的位置相对于移动范围的percent是相同的。比如说最上面即将离开屏幕cell在视差化范围的percent接近于0,那么cell中的图片也就处于可移动范围中最偏下的位置;同理,最下面即将进入屏幕cell在视差化范围percent接近于1,那么cell中图片也就处于可移动范围中最偏上的位置。
自定义cell的使用
自定义一个cell继承于ParallaxCell
,并且把需要可视差化的控件暴露在.h文件,这里代码需要注意布局,如果用masonry代码约束,或者xib约束,可能出现异常;然后就是cell的真实高度和宽度获取,在初始化的时候是获取不到的,所以布局的时候使用[UIScreen mainScreen].bounds.size.width
来获取宽度,高度就类方法+ (CGFloat)getHeight
来获取;其实我想说的是,如果你用ParallaxCell
来实现视差化,如果出现异常,麻烦看看自定义cell的布局;
ViewController中的使用
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
CustomScrollCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CustomScrollCell" forIndexPath:indexPath];
[cell resetParallaxState];
cell.headerImageView.image = [UIImage imageNamed:[self.imageNameArray objectAtIndex:indexPath.row]];
[cell parallaxWithView:cell.headerImageView offsetUp:50 offsetDown:50];
[cell parallaxWithView:cell.nameLabel offsetUp:10 offsetDown:10];
[cell updateViewFrameWithScrollView:tableView];
return cell;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
for (CustomScrollCell *cell in self.tableView.visibleCells) {
[cell updateViewFrameWithScrollView:scrollView];
}
}
注意调用方法顺序:
- 第一要先调用
[cell resetParallaxState];
- 第二调用
[cell parallaxWithView:cell.headerImageView offsetUp:50 offsetDown:50];
- 第三调用
[cell updateViewFrameWithScrollView:tableView];
- 在
cellForRow
和scrollViewDidScroll
方法里面都要调用[cell updateViewFrameWithScrollView:scrollView];
写在最后
自己参考过两个demo,代码质量与实现方法有高低之分;而且别人的代码总有取巧的方法,如果你不能完全明白作者的意图,可能会思考一段时间才会想通;所以你觉得不错的,多花点时间耐心的看下去总会懂的;
第一个参考DiceTableViewCell;这个有点low,不过至少实现了一些基本效果但是问题很多,可以喵一眼;
第二个参考MJParallaxCollectionView;我的思路大体和它相同,其中有一些取巧的地方需要自己甄别一下;但是我觉得它没有进行封装,所以进行了大量优化;
最最后,如果描述中出现错误,抑或实现思路有问题,麻烦各位大神多多指正!!!