将UIVisualEffectView添加到按钮 [英] Adding a UIVisualEffectView to button

问题描述

我在故事板场景中添加了透明删除UIButton，该场景以图片为背景，并且我为其添加了一些自动布局约束.

我希望按钮背景为UIVisualEffectView，所以我考虑以编程方式将视图添加到按钮所在的位置，然后删除该按钮并将其添加回去，使其位于UIVisualEffectView的顶部. 问题1)，这是一个好主意吗?还是应该在视图层次结构中找到位置并将其放置在按钮之前的一级?

到目前为止，这就是我所拥有的.对于UIButton:

@IBOutlet weak var delete: UIButton! {
    didSet {
        let borderAlpha = CGFloat(0.7)
        let cornerRadius = CGFloat(5.0)
        delete.setTitle("Delete", forState: UIControlState.Normal)
        delete.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
        delete.backgroundColor = UIColor.clearColor()
        delete.layer.borderWidth = 1.0
        delete.layer.borderColor = UIColor(white: 1.0, alpha: borderAlpha).CGColor
        delete.layer.cornerRadius = cornerRadius
    }
}

和UIVisualEffectView:

override func viewDidLoad() {
    super.viewDidLoad()

    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
    visualEffectView.frame = delete.frame
    visualEffectView.bounds = delete.bounds
    view.addSubview(visualEffectView)
}

这会产生一个模糊的视图，与按钮的大小相同，但是它不在按钮的顶部. 问题2)我还需要以某种方式传递自动布局约束吗?

在此先感谢您的帮助.

解决方案

下面是一个简单的示例，您可以使用它来插入具有视觉效果的UIVisualEffectView.

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 500, height: 100))
button.setTitle("Visual Effect", forState: .Normal)

let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.blueColor().CGColor, UIColor.redColor().CGColor, UIColor.brownColor().CGColor, UIColor.greenColor().CGColor, UIColor.magentaColor().CGColor, UIColor.purpleColor().CGColor, UIColor.cyanColor().CGColor]
gradientLayer.locations = [0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]
button.layer.insertSublayer(gradientLayer, atIndex: 0)
gradientLayer.frame = button.bounds

let containerEffect = UIBlurEffect(style: .Dark)
let containerView = UIVisualEffectView(effect: containerEffect)
containerView.frame = button.bounds

containerView.userInteractionEnabled = false // Edit: so that subview simply passes the event through to the button

button.insertSubview(containerView, belowSubview: button.titleLabel!)
button.titleLabel?.font = UIFont.boldSystemFontOfSize(30)

let vibrancy = UIVibrancyEffect(forBlurEffect: containerEffect)
let vibrancyView = UIVisualEffectView(effect: vibrancy)
vibrancyView.frame = containerView.bounds
containerView.contentView.addSubview(vibrancyView)

vibrancyView.contentView.addSubview(button.titleLabel!)

这就是我所做的

• 创建一个按钮.
• 创建一个渐变图层并将其添加到按钮的0索引处.
• 创建具有UIBlurEffectDark效果的容器视图.
• 将容器视图添加到按钮.
• 创建具有相同效果的振动视图，并将其添加到上述containerView的contentView中.
• 将标签从按钮移动到动态视图的标题

然后，这是最终结果. titleLabel文本与鲜艳度很好地融合在一起，并具有所应用的效果.

i have a transparent delete UIButton added to a story board scene, which has a picture as a background, and i have added some auto layout constraints to it.

i want the button background to be a UIVisualEffectView so i was thinking of programatically adding the view to where the button is, then removing the button and adding it back so it's on top of the UIVisualEffectView. Question 1) is this a good idea - or should i find the position in the view hierarchy and place it one level before the button?

here's what i have thus far. for the UIButton:

@IBOutlet weak var delete: UIButton! {
    didSet {
        let borderAlpha = CGFloat(0.7)
        let cornerRadius = CGFloat(5.0)
        delete.setTitle("Delete", forState: UIControlState.Normal)
        delete.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
        delete.backgroundColor = UIColor.clearColor()
        delete.layer.borderWidth = 1.0
        delete.layer.borderColor = UIColor(white: 1.0, alpha: borderAlpha).CGColor
        delete.layer.cornerRadius = cornerRadius
    }
}

and for the UIVisualEffectView:

override func viewDidLoad() {
    super.viewDidLoad()

    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
    visualEffectView.frame = delete.frame
    visualEffectView.bounds = delete.bounds
    view.addSubview(visualEffectView)
}

this produces a blurred view, the same size as the button, but it's not on top of the button. Question 2) do i need to somehow pass the auto layout constraints, too?

thanks in advance for any help.

解决方案

Here is a simple example that you could use in order to insert UIVisualEffectView with vibrancy effect.

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 500, height: 100))
button.setTitle("Visual Effect", forState: .Normal)

let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.blueColor().CGColor, UIColor.redColor().CGColor, UIColor.brownColor().CGColor, UIColor.greenColor().CGColor, UIColor.magentaColor().CGColor, UIColor.purpleColor().CGColor, UIColor.cyanColor().CGColor]
gradientLayer.locations = [0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]
button.layer.insertSublayer(gradientLayer, atIndex: 0)
gradientLayer.frame = button.bounds

let containerEffect = UIBlurEffect(style: .Dark)
let containerView = UIVisualEffectView(effect: containerEffect)
containerView.frame = button.bounds

containerView.userInteractionEnabled = false // Edit: so that subview simply passes the event through to the button

button.insertSubview(containerView, belowSubview: button.titleLabel!)
button.titleLabel?.font = UIFont.boldSystemFontOfSize(30)

let vibrancy = UIVibrancyEffect(forBlurEffect: containerEffect)
let vibrancyView = UIVisualEffectView(effect: vibrancy)
vibrancyView.frame = containerView.bounds
containerView.contentView.addSubview(vibrancyView)

vibrancyView.contentView.addSubview(button.titleLabel!)

And, here is what I have done,

• Create a button.
• Create a gradient layer and add it to 0 index of the button.
• Create a container view with effect of UIBlurEffectDark.
• Add the container view to the button.
• Create a vibrancy view with the same effect and add it to the contentView of the above containerView.
• Move the label from button to the vibrancy view's title

And, here is the final result. The titleLabel text blends nicely with vibrancy and the effect applied.

这篇关于将UIVisualEffectView添加到按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！