前言：
之前看见的
印物App里的定制模块的TableView效果还是不错的，所以仿这个App实现了最主要的亮点之一TableView滚动效果(层叠效果)。cell中的细节功能是没有添加的, 需要的话大家可以自己进行扩展添加!
效果图：
功能实现:
首先TableView与cell的初始化过程就不多解释了, 接下来我们来看看重要的代码实现:
-
首先实现
cell中的方法需要用到2个属性来帮助我们实现这个方法
//底层View
@property (nonatomic, weak)UIView *backGView;
//上层Image
@property (nonatomic, weak)UIImageView *backGImage;//这个方法是我们主要实现的核心代码 /** cell偏移设置*/ - (void)cellOffsetOnTabelView:(UITableView *)tabelView;思路:
1.需要规定一个固定的currentLocation值
2.如果cell的Y值小于tabelView.contentOffset.y值(超出 屏幕上面的位置), 需要进行一次处理(停止cell偏移)
3.如果cell的Y值在currentLocation范围内需要进行二次处理(进行cell偏移)
4.最后cell的Y值在currentLocation下面位置进行三次处理(设置初始值), 如下代码:
//cell偏移量实现
- (void)cellOffsetOnTabelView:(UITableView *)tabelView
{
CGFloat currentLocation = tabelView.contentOffset.y + LRLastCellHeight;
//如果需要可以打开下面这段代码
#if 0
//下拉禁止 第一个cell往下移动
if (currentLocation < LRCellHeight) return;
#endif
//如果超出规定的位置以 ->“上”
if (self.frame.origin.y < tabelView.contentOffset.y + LRLastCellHeight - LRCellHeight) {self.backGView.height = LRLastCellHeight; self.backGView.y = - (LRLastCellHeight - LRCellHeight); }else if (self.frame.origin.y <= currentLocation && self.frame.origin.y >= tabelView.contentOffset.y) {//cell开始进入规定的位置 //通过绝对值 取出移动的Y值 CGFloat moveY = ABS(self.frame.origin.y - currentLocation) / LRCellHeight * (LRLastCellHeight - LRCellHeight); //每次进来把当前cell提到最上层 [self.superview bringSubviewToFront:self]; //移动的值 + cell固定高度 self.backGView.height = LRCellHeight + moveY; //设置偏移量Y值 self.backGView.y = - moveY; }else{//超出规定的位置以 ->“下” self.backGView.height = LRCellHeight; self.backGView.y = 0; } } -
调用方法
主要核心代码实现完, 其他部分在ViewController调用就非常简单了:
#pragma mark -<UITableViewDataSource>
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return 10;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
LREffectCell * effectCell = [LREffectCell cellFromTableView:tableView];
return effectCell;
}
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
//cell 将要显示时候我们把数据给它
LREffectCell * effectCell = (LREffectCell *)cell;
effectCell.backGImage.image = LRGetImage(indexPath.row);
//初始化 -> 调用第一次滚动
[effectCell cellOffsetOnTabelView:_tableView];
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return LRCellHeight;
}
最后需要监听scrollView滚动实现cell偏移:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// [_tableView visibleCells]：获取表视图的可见单元格。(可见的视图)
//遍历
[[_tableView visibleCells] enumerateObjectsUsingBlock:^(LREffectCell * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
//cell偏移设置
[obj cellOffsetOnTabelView:_tableView];
}];
}
效果图失帧严重建议去GitHub - 点击下载 运行效果会更明显，包你满意！
如果喜欢的小伙伴请点一个赞吧，欢迎留言补充与给出不足之处！
