前言######
最近在寫demo的時候，有用到幾種TableView上拉和下拉的效果，就順便總結(jié)了一下，demo是分為幾個模塊寫的，可以獨立使用，希望對朋友們有幫助。
代碼地址：tableView常用的上拉和下拉效果
代碼效果##
demo技術(shù)點：下拉放大、下拉回彈、上拉放大、上拉回彈效果、自定義tableView的dataSouce等
效果圖.png
功能分析###
一、上拉回彈效果
核心思想：改變最后一個cell的y值和高度
步驟：
1.計算剛好拖到底部時候的offset
剛好拖動到底部的距離 = scrollView.contentSize.height - scrollView.frame.size.height
要是在向上拖動一點點就會導(dǎo)致整個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的時候一定不要習(xí)慣性的設(shè)置 _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];
//計算放大系數(shù)
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 是對程序猿最大的鼓勵！
