iOS UIKit如何为自定义渐变视图叠加带混合模式的平铺PNG噪点

你可以按以下方式修改原有代码，即可实现渐变上方叠加平铺噪点PNG的效果，同时修复原有代码每次布局时重复创建渐变层的性能问题：

修改后完整代码 #

import Foundation
import UIKit

@IBDesignable class DarkGradient: UIView {
    // 复用渐变层和噪点层，避免每次布局重复创建
    private let gradientLayer = CAGradientLayer()
    private let noiseOverlayLayer = CALayer()
    
    let titleLabel = UILabel()
    
    @IBInspectable var title: String? = nil {
        didSet {
            titleLabel.text = title
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }
    
    private func setupLayers() {
        // 配置渐变层
        gradientLayer.colors = [
            UIColor(red: 0.16, green: 0.0, blue: 0.54, alpha: 1).cgColor,
            UIColor(red: 0.26, green: 0.0, blue: 0.88, alpha: 1).cgColor
        ]
        gradientLayer.startPoint = CGPoint(x: -0.5, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.5)
        layer.insertSublayer(gradientLayer, at: 0)
        
        // 配置噪点叠加层
        guard let noiseImage = UIImage(named: "你的噪点PNG资源名") else { return }
        // 用patternImage实现图片平铺效果
        noiseOverlayLayer.backgroundColor = UIColor(patternImage: noiseImage).cgColor
        // 设置混合模式为正片叠底
        noiseOverlayLayer.compositingFilter = "multiplyBlendMode"
        // 设置不透明度9%
        noiseOverlayLayer.opacity = 0.09
        // 插入到渐变层上方
        layer.insertSublayer(noiseOverlayLayer, above: gradientLayer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 只更新层的frame，不需要重复创建
        gradientLayer.frame = bounds
        noiseOverlayLayer.frame = bounds
    }
}

关键修改说明 #

• 将渐变层、噪点层改为类的私有属性，只在初始化时创建一次，避免原有代码每次触发布局就重复插入层的性能问题
• 噪点层使用UIColor(patternImage:)初始化背景色，自动实现PNG的平铺效果
• 通过compositingFilter属性设置层的混合模式为正片叠底，匹配你要求的multiply效果
• 直接设置opacity为0.09实现9%的不透明度
• 噪点层插入到渐变层的上方，符合你渐变在下、噪点在上的需求

注意：你需要将代码里的你的噪点PNG资源名替换为你实际导入到Xcode项目中的噪点图片的资源名称，不需要加.png后缀。

内容的提问来源于stack exchange，提问作者Jamal Whorms-MonDésir