Geek Answers Handbook

How to fade out the contents of a table cell that reaches the top when scrolling?

Hi everyone, I need to implement this functionality. I need to fade the contents of the cell until it disappears, I mean, until it reaches the top of the table. I don’t understand how to do this. Please help me.I tried to use the scrollview method but did not get how to do this.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
+5
source share
4 answers

For those who want this, here are some ready-to-use copies / paste codes that fully work:

The best part: this code only depends on ONE external property: self.tableViewso just make sure you are set up and you're good to go!

-:

#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];, ( ).

. none (self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;) , .

, .

+17

, : , ?

, , , - :

// Let 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.

+4

You can create a gradient image and place it above the top of your scroll. If you want the “fading” to be displayed only during scrolling, you can animate the image fading out and falling out on scrollViewBegin / DidEndScrollingAnimation, or combine it with scrollViewDidScroll, you can decide when it is appropriate to disappear (i.e. when you scroll up).

0
source

Here is the Fateh Khalsa 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
}
0
source

More articles: