前言######
最近在写demo的时候，有用到几种TableView上拉和下拉的效果，就顺便总结了一下，demo是分为几个模块写的，可以独立使用，希望对朋友们有帮助。
代码地址：tableView常用的上拉和下拉效果
代码效果##
demo技术点：下拉放大、下拉回弹、上拉放大、上拉回弹效果、自定义tableView的dataSouce等
效果图.png
功能分析###
一、上拉回弹效果
核心思想：改变最后一个cell的y值和高度
步骤：
1.计算刚好拖到底部时候的offset
刚好拖动到底部的距离 = scrollView.contentSize.height - scrollView.frame.size.height
要是在向上拖动一点点就会导致整个tableView被拖起来，所以
偏移量 offset = scrollView.contentOffset.y -(scrollView.contentSize.height - scrollView.frame.size.height);
2、拿到之前在cellForRowAtIndexPath保存的最后一个cell
这个代码在cellForRowAtIndexPath
//保存最后一个cell和cell的y值
if(sectionModel.tableViewRowArray.count-1 == indexPath.row)
{
self.lastCell = scaleCell;
}
3、计算变化的高度
注意： [LZBScaleTableViewCell getScaleTableViewCellHeight]是cell的固定高度
cellFrame.size.height = [LZBScaleTableViewCell getScaleTableViewCellHeight] + offset;
4.最后给cell赋值
cell.coverImageView.bounds = cellFrame;
cell.coverImageView.center = CGPointMake(cellFrame.size.width *0.5, cellFrame.size.height *0.5);
完整的代码demo
- (void)pullUpTranslationScrollView:(UIScrollView *)scrollView
{
CGFloat offset = scrollView.contentOffset.y -(scrollView.contentSize.height - scrollView.frame.size.height);
if(offset >0)
{
//拿到最后一个cell
LZBScaleTableViewCell *cell = self.lastCell;
CGRect cellFrame = cell.frame;
cellFrame.size.height = [LZBScaleTableViewCell getScaleTableViewCellHeight] + offset;
cell.coverImageView.bounds = cellFrame;
cell.coverImageView.center = CGPointMake(cellFrame.size.width *0.5, cellFrame.size.height *0.5);
}
}
注意点：改变coverImageView的时候一定不要习惯性的设置 _coverImageView.contentMode = UIViewContentModeScaleAspectFill;
_coverImageView.clipsToBounds = YES;
二、上拉放大效果
这个效果比较简单，大同小异，直接上代码，也可以参考简书：tableView的上拉放大效果
- (void)pullUpBottomViewScaleWithScrollView:(UIScrollView *)scrollView
{
CGFloat offset = scrollView.contentOffset.y -(scrollView.contentSize.height - ([UIScreen mainScreen].bounds.size.height -naviView_Height));
if(offset > 0)
{
//拿到最后一个cell
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:[self.dataSource itemSectionObjectWithIndexPathSection:self.sectionArray.count -1].items.count-1 inSection:self.sectionArray.count -1];
LZBScaleTableViewCell *cell =[self.tableView cellForRowAtIndexPath:indexPath];
//计算放大系数
CGFloat percent = 1 + offset/[LZBScaleTableViewCell getScaleTableViewCellHeight];
CGRect cellFrame = cell.coverImageView.bounds;
CGPoint cellCenter = cell.coverImageView.center;
cellCenter.x = cellCenter.x;
//改变CenterY
cellCenter.y = ([LZBScaleTableViewCell getScaleTableViewCellHeight] + offset ) * 0.5;
//放大宽、高
cellFrame.size.width = [UIScreen mainScreen].bounds.size.width * percent;
cellFrame.size.height = [LZBScaleTableViewCell getScaleTableViewCellHeight] * percent;
cell.coverImageView.center = cellCenter;
cell.coverImageView.bounds = cellFrame;
}
}
三、下拉放大
只是计算offset的方式不一样而已，核心思想一致
- (void)pullDownScrollScaleWithScrollView:(UIScrollView *)scrollView
{
if(scrollView.contentOffset.y < 0)
{
//获取第一个cell
LZBScaleTableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
CGFloat cellHeight = [LZBScaleTableViewCell getScaleTableViewCellHeight];
//获得offset
CGFloat offset = -scrollView.contentOffset.y;
CGFloat percent = (offset + cellHeight)/cellHeight;
//获得cell的尺寸
CGRect cellFrame = cell.coverImageView.frame;
CGPoint cellCenter = cell.coverImageView.center;
cellFrame.size.width = [UIScreen mainScreen].bounds.size.width *percent;
cellFrame.size.height = cellHeight *percent;
cellCenter.x = cellCenter.x;
cellCenter.y = cellHeight * 0.5 + scrollView.contentOffset.y * 0.5;
cell.coverImageView.center = cellCenter;
cell.coverImageView.bounds = cellFrame;
}
}
四、下拉回弹
- (void)pullDownScrollScaleWithScrollView:(UIScrollView *)scrollView
{
if(scrollView.contentOffset.y < 0)
{
//获取第一个cell
LZBScaleTableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
CGFloat cellHeight = [LZBScaleTableViewCell getScaleTableViewCellHeight];
//获得offset
CGFloat offset = -scrollView.contentOffset.y;
//获得cell的尺寸
CGRect cellFrame = cell.coverImageView.frame;
CGPoint cellCenter = cell.coverImageView.center;
cellFrame.size.width = [UIScreen mainScreen].bounds.size.width;
cellFrame.size.height = cellHeight + offset;
cellCenter.x = cellCenter.x;
cellCenter.y = cellHeight * 0.5 + scrollView.contentOffset.y * 0.5;
cell.coverImageView.center = cellCenter;
cell.coverImageView.bounds = cellFrame;
}
}
demo中还重点写了两种tableView常用的场景，你是否还是只在控制器中写,那么你就out了，你可以期待我下一篇的介绍
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
代码地址：tableView常用的上拉和下拉效果
最后赠言###
如果觉得文章对您有帮助，不要忘记star哦!😝，star 是对程序猿最大的鼓励！
网友评论