How do I remove the focus shadows from a UIImageView in a UICollectionView in swift

Question

Created Jan ’16

Replies 5

Boosts 0

Views 8.8k

Participants 4

Hi,

I'm developing a level selector for a game using swift. In my project's storyboard I added a collection view and customized the collection view's cell with an image view. After running the code, the collection view showed 4 images without focus and animations. Therefore I toggled the option "Adjusts image when focused" in IB on the imageView. After turning this feature on everything worked as expected. The selection is working, the tiles move around in "paralax"-style.

However, we are using not rectangle sized images (wings, round shapes, etc.) so that we need to use the alpha channel for leaving parts of the images transparent. Now all cells show a gray shadow. Is it possible to turn that shadow off completely? Else we have to do all animations by ourselfes.

I tried to change the shadow of the layer both of the cell and the imageView but I can't turn off the shadow and the blue selection background.

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
     
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! TALevelGroupCollectionViewCell

        // Configure the cell
        let image = UIImage(named: self.world[indexPath.row])
        cell.imageView.image = image
        cell.highlighted = false
        cell.selected = false
     
        cell.imageView.layer.shadowColor = UIColor.yellowColor().CGColor
        cell.imageView.layer.shadowRadius=10
        cell.imageView.layer.shadowOffset=CGSize(width: 1, height: 1)
        cell.imageView.layer.shadowOpacity=1
     
        cell.layer.shadowColor = UIColor.yellowColor().CGColor
        cell.layer.shadowRadius=10
        cell.layer.shadowOffset=CGSize(width: 1, height: 1)
        cell.layer.shadowOpacity=1
        return cell
}

The code above only adds more shadow to the images instead of turning it off or changing it. Which view or layer is rendering the shadow?

Is ist possible to use only the image transformation without a blue background for selected cells and without shadows?

Thanks in advance,

Jack

Boost

Answer 1

Frameworks Engineer OP

Apple

Jan ’16

Hey Jack,

It is not currently possible to hide or adjust the system-provided shadow image for floating image views. Please file a feature request at http://bugreporter.apple.com if you would like to see this functionality added in the future.

As you have already found out, trying to manipulate the shadows of the cell or image view directly will not get the results you want. If you want to remove the shadows or draw them yourself, you will have to create your own custom focus animation.

0

Answer 2

JackPearse OP

Jan ’16

Thank you for the quick answer. I posted a report on http://bugreporter.apple.com

0

Answer 3

GameWeaver OP

Mar ’16

matt.ricketsonIs there an example of how to do it custom?

0

Answer 4

swiftnative OP

Mar ’16

Hi Jack, I just encountered the same problem where there doesn't seem to be a setting to disable the shadow for non-focused cells. But I found a workaround that may work for you.

The shadow is created outside the View so if you set masksToBounds = true then UIView will not draw anything external to it, i.e. Apple's shadow. Along with toggling this setting, if you also toggle between a non-transparent unfocused button image and then a transparent focused image, you can get the effect you're looking for.

As long as the zoomed image's non-alpha pixels are all within the bounds of the non-zoomed cell, then you won't see clipping when the button is deselected.

in the main viewcontroller that contains the collection view:

class MyVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

...

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.whiteColor()
        GamesCV.delegate = self
        GamesCV.dataSource = self
     }

...

     // this function is called only when focus changes from one button to another
     func collectionView(collectionView: UICollectionView, shouldUpdateFocusInContext context: UICollectionViewFocusUpdateContext) -> Bool {
        let cell1 = context.nextFocusedView as! GameCell
        let cell2 = context.previouslyFocusedView as! GameCell
        // trigger the selected property override in MyCell
        cell1.selected = true; cell2.selected = false
        // permit the focus change to occur
        return true
    }

...

in MyCell.swift:

class MyCell: UICollectionViewCell {

    @IBOutlet weak var myImage: UIImageView!

    // override the selected property so as to swap the button images
    // due to inability to disable Apple shadow on non-zoomed cells
    override var selected: Bool {
        didSet {
            if self.selected {
               // allow Apple to draw the external shadow during a zoom-on-focus
                layer.masksToBounds = false
                myImage.image = UIImage(named: "same button image with transparent background")
            } else {
                // disable externally drawing so shadow won't be drawn on non-zoomed cells
                layer.masksToBounds = true
                myImage.image = UIImage(named: "button image with background color same as view controller's")
            }
        }
    }

     func configureCell() {
        if firstcell {
            // allow Apple to draw the external shadow during a zoom-on-focus
            layer.masksToBounds = false
            myImage.image = UIImage(named: "button image with transparent background")
        }
        else {
            // disable externally drawing so shadow won't be drawn on non-zoomed cells
            layer.masksToBounds = true
            myImage.image = UIImage(named: "button image with background color same as view controller's")
        }
        // set backgrounds to clear so image transparency matches collectionview background
        backgroundColor = UIColor.clearColor()
        myImage.backgroundColor = UIColor.clearColor()
     }

...

0

Answer 5

swiftnative OP

Mar ’16

see above

0