前言

之前在UITableViewCell系列之(一)讓你的cell支持二次編輯中說(shuō)過(guò)，很早就想系統(tǒng)的寫一篇關(guān)于UITableViewCell的文章，目的是總結(jié)一下自己在項(xiàng)目開(kāi)發(fā)中用過(guò)的一些關(guān)于UITableViewCell的特殊用法。但是苦于最近很忙，零碎的時(shí)間不夠用，沒(méi)有時(shí)間停留在文章的脈絡(luò)和排版上，只能把我所想寫的文章拆開(kāi)，以短篇的形式拿出來(lái)。如下是我所要說(shuō)的視覺(jué)差滾動(dòng)效果（即：滾動(dòng)tableView時(shí)候，每一行的圖片都會(huì)根據(jù)滾動(dòng)方向和滾動(dòng)距離的不同進(jìn)行移動(dòng)，給人一種圖片在移動(dòng)的視覺(jué)體驗(yàn)），由于下面gif圖失真卡頓嚴(yán)重，真實(shí)效果大家可以參考demo，不喜歡按部就班地看步驟的同學(xué)，也可以直接看代碼。

visionDiff.gif

步驟

備注: demo中cell是用xib文件定義、布局的，而非代碼的方式

1. 自定義cell。給cell的contentView添加一個(gè)UIImageView子控件
2. 給imageView添加上下左右約束
3. 給cell添加一個(gè)對(duì)象方法。用于tableView滾動(dòng)時(shí)，更新imageView的Y坐標(biāo)值
4. 在UIScrollViewDelegate的scrollViewDidScroll:方法里調(diào)用cell的對(duì)象方法，更新imageView的Y坐標(biāo)值

注意事項(xiàng)：

1. cell的imageView的上、下邊距要超出cell，不然tableView滾動(dòng)的時(shí)候沒(méi)有多余的部分顯示。約束設(shè)置如下：

Snip20160730_1.png

2. 控制器不能使UITableViewController，只能是UIViewController的view上添加一個(gè)UITableView

3. demo中涉及到了坐標(biāo)系轉(zhuǎn)換的問(wèn)題，不了解坐標(biāo)系轉(zhuǎn)換的可以參考如下兩個(gè)方法的使用:

// - (CGRect)convertRect:(CGRect)rect toView:(nullable UIView *)view;
// 把以A視圖為坐標(biāo)系的rect1轉(zhuǎn)換為以B視圖為坐標(biāo)系的rect2并返回rect2
CGRect rect2 = [A convertRect:rect1 toView:B];

// - (CGRect)convertRect:(CGRect)rect fromView:(nullable UIView *)view;
// 把以B視圖為坐標(biāo)系的frame1轉(zhuǎn)換為以B視圖為坐標(biāo)系的frame2并返回frame2
CGRect frame2 = [A convertRect:frame1 fromView:B];

主要代碼如下：
1. cell.m文件中

- (void)updateBackImageViewYForTableView:(UITableView *)tableView andView:(UIView *)view {
    // 1.cell在view坐標(biāo)系上的frame
    CGRect frameOnView = [tableView convertRect:self.frame toView:view];
    // 2.cell 和 view 的中心距離差
    CGFloat distanceOfCenterY = CGRectGetHeight(view.frame) * 0.5 - CGRectGetMinY(frameOnView);
    // 3.cell 和 backImageView的高度差
    CGFloat distanceH = CGRectGetHeight(self.backImageView.frame) - CGRectGetHeight(self.frame);
    // 4.計(jì)算圖片Y值偏移量
    CGFloat distanceWillMove = distanceOfCenterY / CGRectGetHeight(view.frame) * distanceH;
    
    // 5.更新圖片的Y值
    CGRect backImageFrame = self.backImageView.frame;
    backImageFrame.origin.y = distanceWillMove - distanceH * 0.5;
    self.backImageView.frame = backImageFrame;
}

2. 控制器.m文件中

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 1.獲取當(dāng)前屏幕上顯示的所有的cell
    NSArray *visibleCells = [self.tableView visibleCells];
    for (WSTableViewCell *cell in visibleCells) {
        // 2.更新cell的imageView的Y坐標(biāo)值
        [cell updateBackImageViewYForTableView:self.tableView andView:self.view];
    }
}

文／VV木公子（簡(jiǎn)書(shū)作者）
如果你對(duì)本文感興趣，請(qǐng)點(diǎn)擊喜歡。如果對(duì)本系列感興趣，請(qǐng)關(guān)注本人，日后將會(huì)更新更多關(guān)于UITableViewCell的文章。

PS:如非特別說(shuō)明，所有文章均為原創(chuàng)作品，著作權(quán)歸作者所有，轉(zhuǎn)載轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，并注明出處，所有打賞均歸本人所有！