Want a UIVisualEffectView affected by content above as well as below it?

Question

I have a UIVisualEffectView with a UIBlurEffect effect as a pinned UICollectionViewCell in a UICollectionView .

The blur is masked with an icon so that the icon appears in a subtle shimmery way, responding to whatever it is drawn on top of.

The effect is on top of the collection's background. As it stays pinned and the varying background scrolls underneath, it gently changes to reflect the background and looks very nice.

However, except for the collections's scrolling background, most content is drawn in front of the blur effect . This is necessary because that other content is more important and shouldn't be obscured.

Even though it is behind the more important content, I'd like the effect view to reflect the content that is scrolling in front of it. Any suggestions for how this might be made to work?

Ideas:

• Could I grab a chunk from the previously drawn frame and draw this under the effect view? How would I do that?
• Could I render the whole collection view, apply the blur, and then render everything that should be on top of the blur a second time? How can I make that efficient?!

Thanks.

Answer 1

I went with a slightly refined version of the second option.

I added some duplicate cells to the collection view that are rendered behind the blur, and then also in front. I've only done this for one of my cell types with lots of colour in it. It works pretty well.

If you have a better approach I'll happily assign you the correct answer.