Special blending mode (Overlay) for UIView with app background

Question

Created May ’20

Replies 1

Boosts 0

Views 2.3k

Participants 3

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.

Boost

Answer 1

Kabe OP

May ’20

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

0