滚动时如何淡化到达顶部的表格视图的单元格内容？

Question

大家好我需要实现这个功能.我需要淡化单元格的内容,而它会消失,我的意思是当它到达表格视图的顶部.我没有得到如何做到这一点.请帮助我.我试图使用scrollview的方法,但没有得到如何做到这一点.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView 

Answer 1

对于任何想要它的人来说,这里有一些完全正常工作的可立即复制/粘贴的代码:

最佳部分:此代码仅依赖于一个外部属性: self.tableView,所以只需确保设置好,您就可以开始了!

只需将此方法粘贴到您的视图控制器中:

#pragma mark - Scroll View Delegate Methods

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // Fades out top and bottom cells in table view as they leave the screen
    NSArray *visibleCells = [self.tableView visibleCells];

    if (visibleCells != nil  &&  [visibleCells count] != 0) {       // Don't do anything for empty table view

        /* Get top and bottom cells */
        UITableViewCell *topCell = [visibleCells objectAtIndex:0];
        UITableViewCell *bottomCell = [visibleCells lastObject];

        /* Make sure other cells stay opaque */
        // Avoids issues with skipped method calls during rapid scrolling
        for (UITableViewCell *cell in visibleCells) {
            cell.contentView.alpha = 1.0;
        }

        /* Set necessary constants */
        NSInteger cellHeight = topCell.frame.size.height - 1;   // -1 To allow for typical separator line height
        NSInteger tableViewTopPosition = self.tableView.frame.origin.y;
        NSInteger tableViewBottomPosition = self.tableView.frame.origin.y + self.tableView.frame.size.height;

        /* Get content offset to set opacity */
        CGRect topCellPositionInTableView = [self.tableView rectForRowAtIndexPath:[self.tableView indexPathForCell:topCell]];
        CGRect bottomCellPositionInTableView = [self.tableView rectForRowAtIndexPath:[self.tableView indexPathForCell:bottomCell]];
        CGFloat topCellPosition = [self.tableView convertRect:topCellPositionInTableView toView:[self.tableView superview]].origin.y;
        CGFloat bottomCellPosition = ([self.tableView convertRect:bottomCellPositionInTableView toView:[self.tableView superview]].origin.y + cellHeight);

        /* Set opacity based on amount of cell that is outside of view */
        CGFloat modifier = 2.5;     /* Increases the speed of fading (1.0 for fully transparent when the cell is entirely off the screen,
                                     2.0 for fully transparent when the cell is half off the screen, etc) */
        CGFloat topCellOpacity = (1.0f - ((tableViewTopPosition - topCellPosition) / cellHeight) * modifier);
        CGFloat bottomCellOpacity = (1.0f - ((bottomCellPosition - tableViewBottomPosition) / cellHeight) * modifier);

        /* Set cell opacity */
        if (topCell) {
            topCell.contentView.alpha = topCellOpacity;
        }
        if (bottomCell) {
            bottomCell.contentView.alpha = bottomCellOpacity;
        }
    }
}

不要忘记添加<UIScrollViewDelegate>到班级的'.h'文件中!

您可能还希望在方法中的某个位置调用此方法,viewDidLoad如下所示:[self scrollViewDidScroll:self.tableView];这样底部单元格将开始淡出(因为它通常被表视图边缘切断).

提示:将表格视图分隔符样式设置为无(self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;),或者将自己的分隔符创建为图像,并将它们作为子视图添加到单元格中,这样就不会让分隔符的不愉快效果消失而不会消失.

同样适用于小于全屏的桌面视图.

Answer 2

Here is Fateh Khalsa's solution in Swift

func scrollViewDidScroll(scrollView: UIScrollView)
{
    let visibleCells = tableView.visibleCells

    if visibleCells.count == 0 {
        return
    }

    guard let bottomCell = visibleCells.last else {
        return
    }

    guard let topCell = visibleCells.first else {
        return
    }

    for cell in visibleCells {
        cell.contentView.alpha = 1.0
    }

    let cellHeight = topCell.frame.size.height - 1
    let tableViewTopPosition = tableView.frame.origin.y
    let tableViewBottomPosition = tableView.frame.origin.y + tableView.frame.size.height

    let topCellPositionInTableView = tableView.rectForRowAtIndexPath(tableView.indexPathForCell(topCell)!)
    let bottomCellPositionInTableView = tableView.rectForRowAtIndexPath(tableView.indexPathForCell(bottomCell)!)
    let topCellPosition = tableView.convertRect(topCellPositionInTableView, toView: tableView.superview).origin.y
    let bottomCellPosition = tableView.convertRect(bottomCellPositionInTableView, toView: tableView.superview).origin.y + cellHeight

    let modifier: CGFloat = 2.5
    let topCellOpacity = 1.0 - ((tableViewTopPosition - topCellPosition) / cellHeight) * modifier
    let bottomCellOpacity = 1.0 - ((bottomCellPosition - tableViewBottomPosition) / cellHeight) * modifier

    topCell.contentView.alpha = topCellOpacity
    bottomCell.contentView.alpha = bottomCellOpacity
}