How to achieve the parallax effect using UIPointerInteraction for Collection View Cells

Question

I am trying to achieve a parallax effect that is similar to that of tvOS. When a user points to a cell (via a mouse or trackpad in iPadOS), I want the cursor to take the form of the cell.

I read and followed Apple's documentation on this, see here: https://developer.apple.com/documentation/uikit/pointer_interactions/integrating_pointer_interactions_into_your_ipad_app

However, I cannot get this effect to work on cells. It works on random UIViews that I add to the screen, but never on UICollectionView cells.

Here, I pasted code for the added UIPointerInteraction functionality to a bare basic UICollectionView Controller. In this example, the cell does recognize its being pointed at. However, it does not produce the correct effect (the cursor does not morph into the size of the cell.

Note: I call cell.addInteraction(UIPointerInteraction(delegate: self)) in the cellForItemAt method in the collectionView.

extension CollectionViewController: UIPointerInteractionDelegate {


    func pointerInteraction(_ interaction: UIPointerInteraction, regionFor request: UIPointerRegionRequest, defaultRegion: UIPointerRegion) -> UIPointerRegion? {

         var pointerRegion: UIPointerRegion? = nil

         if let cell = interaction.view as? UICollectionViewCell {

             //pointer has entered one of the collection view cells
             pointerRegion = UIPointerRegion(rect: cell.bounds)
         }

         return pointerRegion
     }

    func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle? {

        var pointerStyle: UIPointerStyle? = nil

        if let cell = interaction.view as? UICollectionViewCell {

            let parameters = UIPreviewParameters()
            parameters.visiblePath =  UIBezierPath(rect: cell.bounds)

            let targetedPreview =  UITargetedPreview(view: cell, parameters: parameters)

            let pointerEffect = UIPointerEffect.lift(targetedPreview)

            // Shape the pointer to match the inner path of this view.
            let pointerShape = UIPointerShape.path(UIBezierPath(rect: cell.bounds))

            pointerStyle = UIPointerStyle(effect: pointerEffect, shape: pointerShape)

        }

        return pointerStyle
    }
}

maxpower · Answer 1 · 2020-06-16T16:10:11.137

When I add a pointer interaction to a collection view cell whose rectangle is entirely filled with non-transparent views I do not see any parallax.

When I add a pointer interaction to a collection view cell whose rectangle is not entirely filled (think a circle view inside a rectangle) I see parallax.

The code is the exact same for both collection views/cells for pointer interaction too (much like your code above). My assumption is that Apple only applies parallax if there is (sufficient?) transparency within the cell.

Here is my current code:

func pointerInteraction(_ interaction: UIPointerInteraction, regionFor request: UIPointerRegionRequest, defaultRegion: UIPointerRegion) -> UIPointerRegion? {
    return defaultRegion //I don't think you even need this method unless you want to change the region...
}

func pointerInteraction(_ interaction: UIPointerInteraction, styleFor region: UIPointerRegion) -> UIPointerStyle? {
    return UIPointerStyle(effect: .lift(.init(view: self)))
}

How to achieve the parallax effect using UIPointerInteraction for Collection View Cells

1 Answers1