滚动时如何淡化到达顶部的表格视图的单元格内容？ [英] How to fade the content of cell of table view which reaches at the top while scrolling?

问题描述

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

Hi everyone i need to implement this functionality.I need to fade the content of the cell while its going to disappear, i mean while it reaches at the top of table view.I am not getting how to do that.Please help me.I tried to use the scrollview's method but not getting how to do that.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView 

推荐答案

对于任何想要它的人，这里是一些完全正常工作的可立即复制/粘贴的代码：

最佳部分：此代码仅依赖于ONE外部财产： self.tableView ，所以只需确保设置好，你就可以了！

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

Just stick this method in your view controller somewhere:

#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'文件！

Don't forget to add <UIScrollViewDelegate> to your class's '.h' file!

您可能还想拨打电话这个方法在 viewDidLoad 方法的某个地方，如下所示： [self scrollViewDidScroll：self.tableView]; 以便底部单元格将开始淡出（因为它通常被表视图边缘切断）。

You may also want to put a call to this method somewhere in your viewDidLoad method like this: [self scrollViewDidScroll:self.tableView]; so that the bottom cell will start out faded (since it's normally cut off by the table view edge).

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

TIP: Set your table view separator style to none (self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;), or create your own separators as images and add them as a subview to your cells, so that you don't get the unpleasant effect of the separators disappearing without fading.

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

这篇关于滚动时如何淡化到达顶部的表格视图的单元格内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！