Search code examples
iosswiftuitableviewpopupexpand

iOS - Swift : Expand user profile picture in UITableView

I am trying to obtain an animation from UITableViewCell (holding information about user, with profile picture ), by expanding user's profile picture from this:

enter image description here

////////////////
to this
///////////////

enter image description here enter code here

It works, but the problem is that the animation somehow starts from the corner of the screen, not from the rounded image in UITableViewCell. 

func handlePictureTap(conversationTableCell: ConversationTableCell) {
    guard let cellIndexPath = self.conversationsTableView.indexPath(for: conversationTableCell) else { return }

    transitionDelegate.openingFrame = self.frameForCellAtIndexPath(cellIndexPath)

    let userProfileViewController = UserViewController(nibName: "UserViewController", bundle: nil)
    userProfileViewController.recentProfileProtocol = self
    userProfileViewController.transitioningDelegate = transitionDelegate
    userProfileViewController.modalPresentationStyle = .overCurrentContext
    userProfileViewController.userProfileName = conversationTableCell.conversationName.text!
    userProfileViewController.userProfileImage = conversationTableCell.conversationPicture.image

    self.present(navEditorViewController, animated: true, completion: nil)
}

And the function for frameForCellAtIndexPath. 

func frameForCellAtIndexPath(_ indexPath: IndexPath) -> CGRect {
    let cell = self.conversationsTableView.cellForRow(at: indexPath) as! ConversationTableCell

    let profileImageFrame = cell.conversationPicture.frame

    return profileImageFrame
}

I cannot manage to obtain the correct frame for it, related to entire screen, in order for my animation to start from cell's profile picture.

Any suggestions are welcome

Solution

  • You are starting the animation from the frame of the image which is relative to the table view cell coordinate system where it is placed in the upper left.

    To determine the current position of the cell relative to the table view you can use something like this:

    let rect = tableView.rectForRow(at: indexPath)

    In case you need the rect relative to another view you can use UIViews

    convert(_ rect: NSRect, from view: NSView?) -> NSRect

    Update

    To apply that to your specific case assuming that you need the openingRect in screen coordinates you could do something like:

    let cellOrigin = tableView.rectForRow(at: indexPath).origin

let rectRelativeToTable = CGRect(x: imageFrame.origin.x + cellOrigin.x,
                                 y: imageFrame.origin.y + cellOrigin.y,
                                 width: imageFrame.size.width,
                                 height: imageFrame.size.height)

let openingRect = tableView.convert(rectRelativeToTable, to: nil)