开发者

How to fade the content of cell of table view which reaches at the top while scrolling?

Hi everyone i need to impl开发者_如何学Pythonement 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 


For anyone who wants it, here's some ready-to-go copy/paste-able code that is fully working:

Best Part: This code is only reliant on ONE outside property: self.tableView, so just make sure that's set up and you're good to go!

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;
        }
    }
}

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

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).

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.

Works just as well with smaller than full-screen table views.


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
}


I hope i understand your question correctly: You need to fade the content of the cell depending on how much that cell is out of the screen?

I don't know what cells you have in the table, but IF they have the same height, you can do something like this:

// 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);

You can now use opacity to control the transparency level. 0.0f means completely outside the view, 1.0f means completely inside.

To get the actual UITableViewCell which you need to change, use

- (NSArray *)indexPathsForVisibleRows

and then search for the cell that cellIndex.


You can create a gradient image and place it above the top of your scrollview. If you would like the "fade" to only be visible during scrolling, you can animate the image fading in and out on scrollViewBegin/DidEndScrollingAnimation or combine that with scrollViewDidScroll, you can decide when it's appropriate to fade out (i.e. when you're scrolled to the top).

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜