Stacking UIViews with blend modes in iOS

user1114055 picture user1114055 · Jan 4, 2013 · Viewed 9.3k times · Source

I have two different UIImageViews. I'd like to make the top UIImageView blend in using the Screen blend mode with the bottom UIImageView.

I know of the property of CALayer: compositingFilter and I know that it doesn't work in iOS. I've searched a lot for solutions, and I've found how one should subclass UIView and override drawRect.

I've tried to set the context in drawRect to the screen blend mode, although it still draws every one of the images normally. Perhaps I am doing something wrong, or the approach should be different. Maybe I need OpenGL or CALayer to achieve this. Could someone assist?

Answer

Kurt Revis picture Kurt Revis · Jan 5, 2013

Unfortunately there is no way to do a non-composite blend between UIViews on iOS. UIKit doesn't provide the functionality, and you've already noted, CALayer can't do it either.

In general, implementing -drawRect in a UIView won't help you. You're drawing into an empty bitmap -- it doesn't contain the bits of the views behind it, since those might change at any time (any view or layer might be animated). CA fundamentally assumes that layers' contents should be independent of each other.

You could try, in your -drawRect:

  1. create an image context
  2. capture the views under your view using -[CALayer renderInContext:] for each
  3. create an image from the image context
  4. draw that image into your view
  5. set the blend mode and draw on top of that

But that will be slow and fragile, and won't work if you animate any of the views. I wouldn't recommend it.

If you really need to do this, you're going to have to switch your whole scene to render with OpenGL, where you've got more freedom.