1

My view is structured like this:

UITableView
|    
+-- MyTableViewCell
|  |  
|  +-- UICollectionView
|     |  
|     +-- MyCollectionViewCell
|       |  
|       +-- UIImageView

The UIImageView is named 'icon' and its layer has certain corner radius. I've implemented Peek and Pop for items inside the Collection View and it works, but I can't figure out how to include corner radius of the image in the preview frame.

This is how I register the tableView for previewing:

if #available(iOS 9.0, *), traitCollection.forceTouchCapability == .available {
    registerForPreviewing(with: self, sourceView: tableView)
}

And this is my previewing function (inspired from here):

func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {

    guard let indexPath = tableView.indexPathForRow(at: location) else { return nil }
    guard let cell = tableView.cellForRow(at: indexPath) as? MyTableViewCell else { return nil }

    guard let collectionIndex = cell.collectionView.indexPathForItem(at: self.view.convert(location, to: cell.collectionView)) else { return nil }

    guard let collectionViewCell = cell.collectionView.cellForItem(at: collectionIndex) as? MyCollectionViewCell else { return nil }
    let iconRect = tableView.convert(collectionViewCell.icon.frame, from: collectionViewCell.icon.superview!)
    previewingContext.sourceRect = iconRect

    return someViewController

}

This is what I get in the preview frame when force touching the image, right before the new view controller is committed (so the outside is blurred):

image1

This is what I would like to achieve, corner radius of the image is preserved (screenshot from the App Store):

image2

By reading other posts I believe the issue is that I register the whole tableView for previewing, instead of its cells. However I could not find a solution that worked for Collection View cells inside Table View cells.

Any help appreciated.

Community
  • 1
  • 1
John Doe
  • 141
  • 10

2 Answers2

0

Could you override the UIImageView and create some sort of custom drawing functionality?

Loren Rogers
  • 325
  • 3
  • 13
  • Could you elaborate on this? – John Doe Feb 22 '17 at 19:43
  • Maybe something like this: [link](http://stackoverflow.com/questions/7705879/ios-create-a-uiimage-or-uiimageview-with-rounded-corners). It's not what I said but you can definitely get access to the objects and customize them. – Loren Rogers Feb 22 '17 at 20:22
  • The image has corner radius set already and works fine. The issue is with Peek and Pop in the preview frame, I can't figure out how to keep corner radius when passing the icon rect to `previewingContext.sourceRect` – John Doe Feb 22 '17 at 20:37
  • Ah yes you did say that. My apologies. How about setting the background of UIImageView and/or parent views to transparent in IB? – Loren Rogers Feb 22 '17 at 20:50
0

Instead of converting the frame, did you try using its cellAttributes? If there is a cornerRadius on the contentView.layer of the cell, this will keep that in mind. So something like this works for us:

let cellAttributes = collectionView.layoutAttributesForItem(at: indexPath)

previewingContext.sourceRect = cellAttributes.frame
SunburstEnzo
  • 173
  • 11
  • Thanks for your answer. The cornerRadius is actually set only on my imageView's layer, and not on the contentView's layer, so I don't think this could work. – John Doe Apr 19 '18 at 20:44