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

时间:2018-06-02 23:43:57

标签: ios swift uilabel subviews uivisualeffectview

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

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

2 个答案:

答案 0 :(得分:0)

您必须将UILabel添加到UIVisualEffectView

 backgroundBlur.addSubview(labelOne)
 backgroundBlur.addSubview(labelTwo)
  1. 添加backgroundBlur并设置约束

  2. 然后将labelOne,labelTwo添加到backgroundBlur并附带约束

    或全部添加到UIView并将其与constraint

    相关联

    别忘了translatesAutoresizingMaskIntoConstraints = false

  3. 声明:

    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
    

答案 1 :(得分:0)

我必须添加两个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])