Question

我在标签后面添加了模糊效果。模糊拒绝落后于标签。我分别尝试了所有这三个：

label.insertSubview(backgroundBlur, at: 0)
label.addSubview(backgroundBlur)
label.sendSubview(toBack: backgroundBlur)

问题是我需要UIVisualEffectView模糊的宽度和高度基于标签文本的大小。文字是动态的。两个标签都需要有自己独立的背景。

如果还基于标签的文字宽度和高度，我怎样才能让UIVisualEffectView模糊落后于每个单独的标签？应该有两个标签，后面有2个backgroundBlurs。

let backgroundBlur: UIVisualEffectView = {
    let blur = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.dark))
    blur.layer.cornerRadius = 6
    blur.layer.masksToBounds = true
    return blur
}()

let labelOne: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.font = UIFont.boldSystemFont(ofSize: 17)
    label.textColor = UIColor.white
    label.textAlignment = .center
    label.sizeToFit()
    label.numberOfLines = 0
    return label
}()

let labelTwo: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.font = UIFont.boldSystemFont(ofSize: 17)
    label.textColor = UIColor.white
    label.textAlignment = .center
    label.sizeToFit()
    label.numberOfLines = 0
    return label
}()

override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(labelOne)
    view.addSubview(labelTwo)

    labelOne.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    labelOne.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    labelTwo.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    labelTwo.topAnchor.constraint(equalTo: labelOne.bottomAnchor, constant: 16).isActive = true

    putBlurEffectBehindLabel(backgroundBlur, labelOne)

    putBlurEffectBehindLabel(backgroundBlur, labelTwo)
}

func putBlurEffectBehindLabel(_ blur: UIVisualEffectView, _ label: UILabel){
    blur.frame = label.bounds

    // tried these individually but nada
    label.insertSubview(backgroundBlur, at: 0) 
    label.addSubview(backgroundBlur)
    label.sendSubview(toBack: backgroundBlur)

    blur.center = CGPoint(x: label.bounds.midX, y: label.bounds.midY)
}

Answer 1

您必须将UILabel添加到UIVisualEffectView

 backgroundBlur.addSubview(labelOne)
 backgroundBlur.addSubview(labelTwo)

添加backgroundBlur并设置约束
然后将labelOne，labelTwo添加到backgroundBlur并附带约束

或全部添加到UIView并将其与constraint
相关联
别忘了translatesAutoresizingMaskIntoConstraints = false

声明：

let backgroundBlur: UIVisualEffectView = {
        let blur = UIVisualEffectView(effect: UIBlurEffect(style: 
        UIBlurEffectStyle.dark))
        blur.layer.cornerRadius = 6
        blur.layer.masksToBounds = true
        blur.translatesAutoresizingMaskIntoConstraints = false
        return blur
    }()

    let labelOne: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    let labelTwo: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

<强> viewDidLoad中

self.view.addSubview(backgroundBlur)
self.view.addSubview(labelOne)
self.view.addSubview(labelTwo)

labelOne.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
labelOne.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
labelTwo.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
labelTwo.topAnchor.constraint(equalTo: labelOne.bottomAnchor, constant: 16).isActive = true

labelOne.text = "asdhaskdas saldhlsahdsa laskdhsakhd asdlhkhsad"
labelTwo.text = "asdhaskdas saldhlsahdsa laskdhsakhd asdlhkhsad"


labelOne.numberOfLines = 0
labelTwo.numberOfLines = 0

backgroundBlur.topAnchor.constraint(equalTo: labelOne.topAnchor, constant: -8).isActive = true
backgroundBlur.bottomAnchor.constraint(equalTo: labelTwo.bottomAnchor, constant: 8).isActive = true
backgroundBlur.trailingAnchor.constraint(equalTo: labelOne.trailingAnchor, constant: 8).isActive = true
backgroundBlur.leadingAnchor.constraint(equalTo: labelOne.leadingAnchor, constant: -8).isActive = true

Answer 2

我必须添加两个where名为：

UIVisualEffectView

基于@AbdelahadDarwish建议将标签添加到模糊而不是将模糊添加到标签上，我能够获得标签背后的模糊：

backgroundBlurOne
backgroundBlurTwo

同样在// this is added inside the putBlurEffectBehindLabel function blur.contentView.addSubview(label)函数内，我使用putBlurEffectBehindLabel获得了标签文字的大小然后根据UIVisualEffectView（模糊）的宽度和高度。

然后我在viewDidLoad中为labelOne和backgroundBlurOne添加了我想要的文本。

然后我在viewDidAppear中为labelTwo添加了我想要的文本和backgroundBlurTwo。我必须这样做，所以我可以使用backgroundBlurOne + 16点距离的高度，所以labelTwo可能是我需要它来自labelOne的地方。

(text! as NSString).size(withAttributes: [NSAttributedStringKey.font: UIFont])

如何根据标签的文本宽度和高度在UILabel后面发送UIVisualEffectView

2 个答案: