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

时间:2011-02-15 05:54:24

标签: iphone uitableview

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

- (void)scrollViewDidScroll:(UIScrollView *)scrollView 

4 个答案:

答案 0 :(得分:18)

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

最佳部分:此代码仅依赖于一个外部属性: 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;),或者将您自己的分隔符创建为图像,并将它们作为子视图添加到您的单元格中,这样您就不会产生令人不快的效果。分离器消失而不褪色。

同样适用于小于全屏的表格视图。

答案 1 :(得分:4)

我希望我能正确理解你的问题:你需要根据细胞在屏幕外的数量来淡化细胞的内容吗?

我不知道你在桌子上有什么细胞,但如果他们有相同的身高,你可以这样做:

// Let's say you have a variable called cellHeight
int cellHeight = 80;

// Get the location of the top of the table
int topPosition = (int)tableView.cotentOffset.y;

// Get the index of the cell
int cellIndex = topPosition  / cellHeight;  

// Determine how much the cell is outside the view
float opacity = 1.0f - ((topPosition  % cellHeight) / cellHeight);

您现在可以使用opacity来控制透明度级别。 0.0f表示完全在视图之外,1.0f表示完全在视图内。

要获取需要更改的实际UITableViewCell,请使用

- (NSArray *)indexPathsForVisibleRows

然后搜索cellIndex

的单元格

答案 2 :(得分:3)

这是Fateh Khalsa在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
}

答案 3 :(得分:0)

您可以创建渐变图像并将其放在滚动视图的顶部上方。如果您希望“淡入淡出”仅在滚动期间可见,您可以在scrollViewBegin / DidEndScrollingAnimation上设置淡入淡出图像或将其与scrollViewDidScroll结合使用,您可以决定何时淡出(即滚动时)到顶部)。