Special blending mode (Overlay) for UIView with app background

I would like to blend a UIView with my app's background, using a special blend mode (in my case, the Overlay mode). However, the view to blend is contained in a complex hierarchy of views.


Blending a view with its direct siblings can be achieved using

view.layer.compositingFilter = "overlayBlendMode"
, but the view won't blend with non-siblings views, like the app background.


To recreate the problem, I made the following playground:


import UIKit
import PlaygroundSupport
class MyViewController : UIViewController {
override func loadView() {
let parentView = UIView()
parentView.backgroundColor = .purple
// Child view
let childView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 200))
childView.layer.borderColor = UIColor.orange.cgColor
childView.layer.borderWidth = 3
parentView.addSubview(childView)
// Child child view
let childChildView = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 50))
childChildView.backgroundColor = .white
childChildView.layer.compositingFilter = "overlayBlendMode"
childView.addSubview(childChildView)
self.view = parentView
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()


Screenshots of what the result should look like are available here.



Note 1: the blended view is supposed to move, because it's inside a UIScrollView.

Note 2: my app background could be a gradient or an image, so I can't just change the color of the child view to make it the same as background.

Replies

To the best of my knowledge this will not work, at least I have never managed to pull this off ;-)


The layers are composited within the view in the given mode, but the views are then composited just based on the resulting alpha.


So, what can you do to achieve what you are trying to do? Basically, you have to work with multple Layers within the same view. CALayers are generally worth diving into, especially CAShapeLayer provides a high performance GPU driven way to draw with shapes.


Hope it helps


Klaus

  • Hi Klaus, I have a similar goal and problem. We're using only "normal" layers now, but it would be nice to use other blending modes in the WKWebView, and have them shine through into the lower level of our game.

Add a Comment