ios - UIView 的程序化 "fuzzy"样式背景

Question

当然，为背景设置纯色是微不足道的:

如今，流行的做法是使用“模糊”或“多云”背景作为应用程序的设计特征，而不是使用“纯灰色”。

例如，这里有几个“模糊”的背景 - 它只是一种纯色，可能有一些噪点，也可能是模糊的。

您可以到处看到类似这样的背景，考虑流行的提要应用程序(whassapp 等)。这是我们这个时代的“时尚”。

我突然想到，如果你能在 Swift 中用代码做到这一点，那就太棒了

注意:从 PNG 开始并不是一个优雅的解决方案:

希望可以从头开始以编程方式生成所有内容。

如果 Inspector 有一个 IBDesignable 风格的 slider ，那就太好了，“添加流行的‘颗粒状’背景……” - 在新时代应该是可能的!

Answer 1

根据我很久以前写的东西，这会让你开始:

@IBInspectable 属性:

• noiseColor:噪声/颗粒颜色，应用于 View 的 backgroundColor
• noiseMinAlpha:随机化噪声的最小 alpha
• noiseMaxAlpha:随机化噪声的最大 alpha
• noisePasses:应用噪声的次数，更多的 pass 会变慢，但可以产生更好的噪声效果
• noiseSpacing:随机噪声出现的频率，间隔越大噪声越少

解释:

当任何可设计的噪音属性发生变化时， View 将被标记为重绘。在绘图函数中生成 UIImage(或者从 NSCache 中提取，如果可用的话)。

在生成方法中，每个像素都被迭代，如果像素应该是噪声(取决于间距参数)，噪声颜色将应用随机 alpha channel 。这样做的次数与传递次数一样多。

.

// NoiseView.swift
import UIKit

let noiseImageCache = NSCache()

@IBDesignable class NoiseView: UIView {

    let noiseImageSize = CGSizeMake(128, 128)

    @IBInspectable var noiseColor: UIColor = UIColor.blackColor() {
        didSet { setNeedsDisplay() }
    }
    @IBInspectable var noiseMinAlpha: CGFloat = 0 {
        didSet { setNeedsDisplay() }
    }
    @IBInspectable var noiseMaxAlpha: CGFloat = 1 {
        didSet { setNeedsDisplay() }
    }
    @IBInspectable var noisePasses: Int = 1 {
        didSet {
            noisePasses = max(0, noisePasses)
            setNeedsDisplay()
        }
    }
    @IBInspectable var noiseSpacing: Int = 1 {
        didSet {
            noiseSpacing = max(1, noiseSpacing)
            setNeedsDisplay()
        }
    }

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)

        UIColor(patternImage: currentUIImage()).set()
        UIRectFillUsingBlendMode(bounds, .Normal)
    }

    private func currentUIImage() -> UIImage {

        //  Key based on all parameters
        let cacheKey = "\(noiseImageSize),\(noiseColor),\(noiseMinAlpha),\(noiseMaxAlpha),\(noisePasses)"

        var image = noiseImageCache.objectForKey(cacheKey) as! UIImage!

        if image == nil {
            image = generatedUIImage()

            #if !TARGET_INTERFACE_BUILDER
                noiseImageCache.setObject(image, forKey: cacheKey)
            #endif
        }

        return image
    }

    private func generatedUIImage() -> UIImage {

        UIGraphicsBeginImageContextWithOptions(noiseImageSize, false, 0)

        let accuracy: CGFloat = 1000.0

        for _ in 0..<noisePasses {
            for y in 0..<Int(noiseImageSize.height) {
                for x in 0..<Int(noiseImageSize.width) {
                    if random() % noiseSpacing == 0 {
                        let alpha = (CGFloat(random() % Int((noiseMaxAlpha - noiseMinAlpha) * accuracy)) / accuracy) + noiseMinAlpha
                        noiseColor.colorWithAlphaComponent(alpha).set()
                        UIRectFill(CGRectMake(CGFloat(x), CGFloat(y), 1, 1))
                    }
                }
            }
        }

        let image = UIGraphicsGetImageFromCurrentImageContext() as UIImage

        UIGraphicsEndImageContext()

        return image
    }
}