将UIView(覆盖)与应用程序背景相融合

Question

我想使用特殊的混合模式（在我的例子中，是Overlay模式）将一个UIView与我的应用程序的背景混合。然而，要混合的视图包含在一个复杂的视图层次结构中。

将视图与它的直接兄弟姐妹混合，可以使用 view.layer.compositingFilter = "overlayBlendMode"，但该视图不会与非兄弟姐妹的视图融合，比如应用背景。

为了重新创建这个问题，我做了下面的游乐场。

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()

我们在这里可以看到，白色的子代视图没有被混合。

而视图应该像这样混合（边框不应该改变颜色）。

为了创建第二张图片，我在图片上应用了合成滤镜。childView 而非 childChildView这将混合所有其他子视图 - 因此这不是我想要的。我只是想让这个特定的视图被混合。

注意：这个视图应该是可以移动的，因为它在一个UIScrollView里面。

EDIT: 更复杂的例子，有图像背景和滚动视图。

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    override func loadView() {
        let parentView = UIView()

        // Background image
        let backgroundImageView = UIImageView(image: UIImage(named: "image.jpg")!)
        backgroundImageView.frame = UIScreen.main.bounds
        parentView.addSubview(backgroundImageView)

        // Page view (horizontal scrollview)
        let pageView = UIScrollView(frame: CGRect(x: 50, y: 50, width: 200, height: 200))
        pageView.contentSize = CGSize(width: 600, height: 200)
        pageView.flashScrollIndicators()
        pageView.layer.borderColor = UIColor.orange.cgColor
        pageView.layer.borderWidth = 3
        parentView.addSubview(pageView)

        // Child view (vertical scrollview)
        let childView = UIScrollView(frame: CGRect(x: 20, y: 20, width: 100, height: 150))
        childView.contentSize = CGSize(width: 100, height: 300)
        childView.layer.borderColor = UIColor.green.cgColor
        childView.layer.borderWidth = 3
        pageView.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()

Answer 1

更新2。

我尝试了几种方法，包括添加图层或创建使用背景图像作为输入图像的自定义图像过滤器，但这些解决方案都没有得到理想的结果。主要的问题始终是视图层次结构。

我可能找到了一个解决方案，一旦创建了childChildView，但在显示之前，使用生成的视图图像或实际背景图像作为childView的内容背景。我修改了一下你的示例代码，在parentView中添加了滚动视图和背景图片。看看这样做是否能达到你想要的效果。

    import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    override func loadView() {
        let parentView = UIView()
        parentView.backgroundColor = .purple

        let imageName = "image.jpg"
        let image = UIImage(named: imageName)
        let imageWidth = Int((image?.size.width)!)
        let imageheight = Int((image?.size.height)!)
        let imageView = UIImageView(image: image!)
        imageView.frame = CGRect(x: 50, y: 50, width: imageWidth , height: imageheight)
        parentView.addSubview(imageView)

        // Child view as UIScrollView
        let childView = UIScrollView(frame: CGRect(x: 55, y: 55, width: imageWidth - 10, height: imageheight - 10 ))
        childView.contentSize = CGSize(width: imageWidth - 10, height: 5000)
        childView.layer.borderColor = UIColor.orange.cgColor
        childView.flashScrollIndicators()
        childView.layer.borderWidth = 10
        parentView.addSubview(childView)

        // ChildChild view
        let childChildView = UIView(frame: CGRect(x: 15, y: 100, width: 85, height: imageheight - 180))
        childChildView.layer.compositingFilter = "overlayBlendMode"
        childChildView.backgroundColor = .white

        //Creating a static image of the background views BEFORE adding the childChildView.
        let format = UIGraphicsImageRendererFormat()
        format.scale = 1
        format.preferredRange = .standard ///color profile
        ///Change the imageView to the parentView size of the app. Not available if not set in the playground.
        let renderer = UIGraphicsImageRenderer(size: imageView.bounds.size, format: format)
        let imageBG = renderer.image { context in
            ///This draws all subviews of the parentView one after the other.
            ///Because the background image is not a parent of our current view, otherwise childView.drawHierachy would have been enough
            for subview in parentView.subviews {
                    ///Skip specific views or view classes you don't want to be added to the image. or if you only need the parentView itself rendered remove the for in loop.
                    subview.drawHierarchy(in: imageView.bounds, afterScreenUpdates: true)
            }
        }
        //Adding the static background image. This could simply also be the actual image: UIImage if no other views are supposed to be used.
        childView.layer.contents = imageBG.cgImage

        childView.addSubview(childChildView)

        self.view = parentView
    }

}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

结果如下

UPDATE:

图片中的颜色有误导性，因为你可以假设一个普通的透明效果也是一样的。但正如Coconuts所指出的，overlayBlendMode是完全不同的。我认为问题在于合成滤镜只对下面的视图起作用，即使这个视图是透明的.我试着找到了一个变通的办法，使用一个蒙版，从childview中切出一个childchild大小的正方形。但这也不行，因为遮罩也应用于所有子视图。我让它工作的唯一方法是让childchildview成为childview的兄弟姐妹，或者直接成为背景视图的子视图。但不知道在椰子提到的复杂的视图层次结构中是否能做到这一点。

    // Sibling view with adjusted x and y
    let childChildView = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 50))
    childChildView.backgroundColor = .white
    childChildView.layer.compositingFilter = "overlayBlendMode"

    parentView.addSubview(childChildView)

MISC:

要只得到样本图片的视觉结果，而不是像椰树要求的那样，实际使用overlayBlendMode滤镜。

如果你只需要混合颜色，你可以改变颜色的alpha值。

    // Child child view
    let childChildView = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 50))
    childChildView.backgroundColor = UIColor(white: 1, alpha: 0.5)
    //childChildView.layer.compositingFilter = "overlayBlendMode"
    childView.addSubview(childChildView)

或者试试这个。

    // Child child view
    let childChildView = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 50))
    childChildView.backgroundColor = .white
    childChildView.layer.opacity = 0.5
    childView.addSubview(childChildView)

当有多个滚动视图时，额外的尝试。

这是一个试图解决从椰子添加更复杂的视图层次结构与多个滚动视图。性能需要提高，或者当应用更新（重绘）视图时，调整背景图片层背景图片的部分需要同步运行。目前有点滞后。

    import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    override func loadView() {

        let parentView = UIView()

        // Background image
        let backgroundImageView = UIImageView(image: UIImage(named: "image.jpg")!)
        backgroundImageView.frame = UIScreen.main.bounds
        parentView.addSubview(backgroundImageView)

        // Page view (horizontal scrollview)
        let pageView = UIScrollView(frame: CGRect(x: 50, y: 50, width: 200, height: 200))
        pageView.contentSize = CGSize(width: 600, height: 200)
        pageView.flashScrollIndicators()
        pageView.layer.borderColor = UIColor.yellow.cgColor
        pageView.layer.borderWidth = 3
        pageView.clipsToBounds = true
        parentView.addSubview(pageView)

        // Child view (vertical scrollview)
        let childView = UIScrollView(frame: CGRect(x: 20, y: 20, width: 100, height: 150))
        childView.contentSize = CGSize(width: 100, height: 300)
        childView.layer.borderColor = UIColor.red.cgColor
        childView.layer.borderWidth = 3
        pageView.addSubview(childView)

        // Child child view
        let childChildView = UIView(frame: CGRect(x: 50, y: 50, width: 50, height: 50))

        //Child child view foreground sublayer
        let childChildFrontLayer = CALayer()
        childChildFrontLayer.frame = childChildView.frame.offsetBy(dx: -75, dy: -50)
        childChildFrontLayer.backgroundColor = UIColor.white.cgColor
        childChildFrontLayer.compositingFilter = "overlayBlendMode"

        //Child child view background sublayer
        let childChildBackLayer = CALayer()
        childChildBackLayer.contents = UIImage(named: "image.jpg")?.cgImage
        var absolutFrame = parentView.convert(childChildView.frame, from: childView)
        childChildBackLayer.frame = CGRect(x: -absolutFrame.minX, y: -absolutFrame.minY, width: backgroundImageView.frame.width, height: backgroundImageView.frame.height)

        childChildView.layer.addSublayer(childChildBackLayer)
        childChildView.layer.addSublayer(childChildFrontLayer)
        childView.addSubview(childChildView)

        //Checking for any scrolling. Is slightly faster then the scollview delegate methods but might cause main thread checker warning.
        DispatchQueue.global(qos: .userInteractive).async {
            while true {
                if pageView.isDragging || pageView.isTracking || pageView.isDecelerating || childView.isDragging || childView.isTracking || childView.isDecelerating {
                    absolutFrame = parentView.convert(childChildView.frame, from: childView)
                    DispatchQueue.main.async {
                        childChildBackLayer.frame = CGRect(x: -absolutFrame.minX, y: -absolutFrame.minY, width: backgroundImageView.frame.width, height: backgroundImageView.frame.height)
                    }
                }
            }
        }
        self.view = parentView
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Answer 2

这个问题是否与子视图背景是清晰的，因此 "混合 "后呈现白色有关。能不能把子视图背景颜色设置成和app背景相等，然后再在childChildView内混合即可？