iOS下用一行代碼實現tableview(collectionview)的parallax效果

iOS下用一行代碼實現tableview(collectionview)的parallax效果

 

 

原理很簡單，就是一個等比公式

cell的圖片位置 ／ cell圖片可以滑動的總長 ＝ cell在table中的位置 ／ cell 可滑動總長

 

實現方法：

1》 在cell的UIImageView上添加父視圖UIView，clipsToBounds設定為yes，用來剪下UIImageView，為其限定大小。

 

2》在vc的

-(void)scrollViewDidScroll:(UIScrollView *)scrollView

中即時更新每個cell的圖片位置。

代碼如下

 

 

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    for(WELTableViewCell * cell in [self.tableView visibleCells])    {        cell.image.frame = CGRectOffset(cell.image.frame, 0, ((cell.image.frame.size.height - cell.imageFrameView.frame.size.height) * ((cell.frame.origin.y + cell.imageFrameView.frame.size.height - self.tableView.contentOffset.y) / (self.tableView.frame.size.height + cell.imageFrameView.frame.size.height * 2)) + cell.imageFrameView.frame.size.height - cell.image.frame.size.height) - cell.image.frame.origin.y);    }}

PS：確實是一行代碼，哈哈。其實一行代碼只是一個噱頭，完全可以多寫幾行增加可讀性。之所以寫一行代碼，是想表達這個效果其實蠻簡單的。用算式算出位移量，重設frame。

 

 

3》在tableView初次重新整理完畢後，調用

[self scrollViewDidScroll:nil];

例如

 

-(void)viewDidAppear:(BOOL)animated

{

[super viewDidAppear:YES];

[self scrollViewDidScroll:nil];

}

 

最後，附上原始碼demo（發帖不易，討個積分，哈哈）

簡單demo（附註釋）

 

以上