Search code examples
iosuicollectionviewuicollectionviewcelltvos

UICollectionViewCell doesn't draw shadow when zoomed if at the sides of the collection

I'm having a funny issue working on my first tvOS application (actually my first iOS application in general since years).

What I want to achieve is to have a custom zoom and shadow for the cells of my UICollectionView when they are selected.

The weird thing is I'm able to see the zoom effect and the shadow for the cells, but when these are at both sides of the collection, the shadow is not rendered.

Let me show you the issue with few images.

This is the correct result I'd like to achieve and it works fine for "internal" cells: bigger shadow + zoom (scale).

Correct zoom and shadow for internal cell

This is the wrong result I'm getting for "external" cells: zoom (scale) is ok, but the shadow is not updated. This is also valid for the other "external" cell on the right side of the collection.

External cell without shadow update

Further funny thing is, if I do not scale the cells, then the shadow is correctly update:

No scaling, so the shadow is correctly updated

This is the code of my custom UICollectionViewCell:

import UIKit

class MyCloudCollectionViewCell: UICollectionViewCell {

    var selectTrans: UIFocusAnimationCoordinator?
    var scale : CGFloat = 0.0

    override func layoutSubviews() {
        super.layoutSubviews()

        self.clipsToBounds = false
        self.layer.masksToBounds = false
        self.layer.shadowOpacity = 0.20;
        self.layer.shadowRadius = 4.0;
        self.layer.shadowOffset = CGSize(width: 1, height: 6);
        self.scale = 1.0
    }

    override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
        coordinator.addCoordinatedAnimations({
            super.didUpdateFocus(in: context, with: coordinator)

            if self.isFocused {
                self.layer.shadowOpacity = 0.25;
                self.layer.shadowRadius = 4.0;
                self.layer.shadowOffset = CGSize(width: 1, height: 18);
                self.scale = 1.19
                let transform = CGAffineTransform(scaleX: self.scale, y: self.scale)
                self.layer.setAffineTransform(transform)
            } else {
                self.layer.shadowOpacity = 0.20;
                self.layer.shadowRadius = 4.0;
                self.layer.shadowOffset = CGSize(width: 1, height: 6);
                self.scale = 1.0
                let transform = CGAffineTransform(scaleX: self.scale, y: self.scale)
                self.layer.setAffineTransform(transform)
            }
        }, completion: nil)
    }
}

Collection also have these settings:

self.collectionView?.clipsToBounds = false
self.collectionView?.layer.masksToBounds = false
Solution

  • The problem is that the base view cell is not the right place to perform that kind of operation.

    Try to use a custom container view instead of the base view cell.