How can I round the corners of the sourceRect for Peek and Pop 3D Touch?

Question

In Safari, if you use 3D touch, the sourceRect of the link that is being touched has rounded corners. When I set the source rect in: func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? { func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? { on previewingContext, I can only set previewingContext.sourceRect which doesn't allow me to round the corners, or set a multi corner area. How can I do this?

Answer 1

You can indirectly set round corners to the sourceRect by adding a corner radius to the sourceView's layer. The when you set previewingContext.sourceRect to the sourceView's bounds, the area that stays in focus will also have the rounded corners.

Here is an example that uses a pressable UILabel:

class ViewController: UIViewController {

    var previewingContext: UIViewControllerPreviewing?
    let label = UILabel(frame: CGRectMake(150, 250, 100, 50))

    override func viewDidLoad() {
        super.viewDidLoad()

        let background = UIImageView(frame: view.bounds)
        background.image = UIImage(named: "image.jpg")
        view.addSubview(background)

        label.backgroundColor = UIColor.whiteColor()
        label.text = "Press me!"
        label.textAlignment = .Center
        label.layer.cornerRadius = 20
        label.clipsToBounds = true
        label.userInteractionEnabled = true
        view.addSubview(label)

        previewingContext = registerForPreviewingWithDelegate(self, sourceView: label)
    }
}

extension ViewController: UIViewControllerPreviewingDelegate {

    func previewingContext(previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
        previewingContext.sourceRect = label.bounds

        return UIViewController()
    }

    func previewingContext(previewingContext: UIViewControllerPreviewing, commitViewController viewControllerToCommit: UIViewController) {
        showViewController(viewControllerToCommit, sender: self)
    }
}

Answer 2

First of all the sourceView should have a cornerRadius on its layer, indeed the blur effect will have a corner radius only if the layer of the sourceView has one. Because the sourceView is readonly, it should be set when the registering is made with the method registerForPreviewingWithDelegate:sourceView: .

As exemple in a collection view with corner radius on its cells, the registering can be made in collectionView:cellForItemAtIndexPath: . And for security, and as the previewingContext will be checked later, I keep a weak pointer to the previewingContext returned by registerForPreviewingWithDelegate:sourceView: in the cell itself :

if (self.traitCollection.forceTouchCapability == UIForceTouchCapabilityAvailable) {
    id previewingContext = [self registerForPreviewingWithDelegate:self sourceView:cell];
    cell.weakPreviewingContext = previewingContext;
}

Then in the method collectionView:didEndDisplayingCell:forItemAtIndexPath: of the UICollectionViewDelegate protocol I made the unregistering like that :

if (collectionView == self.collectionView) {
    if ([cell isKindOfClass:UserInHomeCollectionCell.class]) {
        [self unregisterForPreviewingWithContext:((UserInHomeCollectionCell*)cell).weakPreviewingContext];
    }
}

Finally in the method previewingContext:viewControllerForLocation: of the UIViewControllerPreviewingDelegate protocol I made the security check like that :

UserInHomeCollectionCell *cell = (UserInHomeCollectionCell*)[(UIViewController*)previewingContext view];
NSAssert([cell isKindOfClass:UserInHomeCollectionCell.class], @"***** INTERNAL ERROR: Invalid class for retrieved cell %@", cell);
NSAssert([previewingContext isEqual:((UserInHomeCollectionCell*)cell).weakPreviewingContext], @"***** INTERNAL ERROR: Invalid Previewing Context");