1 Reply
      Latest reply on May 23, 2020 1:21 AM by Kabe
      Nansse Level 1 Level 1 (0 points)

        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.

        • Re: Special blending mode (Overlay) for UIView with app background
          Kabe Level 1 Level 1 (0 points)

          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