Adding Blur Effect when open() is called

[jhuayllasco]

Hello,

Great control by the way. I am trying to implement adding a blur and vibrancy effect to this control. I am able to get the blur to occur and the LiquidFloatingActionButton is indeed visible. The issue I am having is that although the floating buttons are visible they are not responding to touch events. I cannot close the control or choose any of the cells.

So far this is what I have done. I have subclasses LiquidFloatingActionButton and have override the open() function as follows.

...

override public func open() {
    let window = UIApplication.sharedApplication().windows.first

    var darkBlur = UIBlurEffect(style: UIBlurEffectStyle.Dark)
    var blurView = UIVisualEffectView(effect: darkBlur)
    blurView.frame = (window?.bounds)!
    blurView.center = (window?.center)!

    window?.addSubview(blurView)

    let vibrancyEffect = UIVibrancyEffect(forBlurEffect: darkBlur)
    let vibrancyView : UIVisualEffectView = UIVisualEffectView(effect: vibrancyEffect)

    vibrancyView.addSubview(self)
    blurView.contentView.addSubview(vibrancyView)

    super.open()

}

...

Any thoughts on how this might be implemented? Any help to point me in the right direction or adding it to your roadmap would be great. Just not sure why it is no longer responding to touch events.

Thanks,

[jfperren]

Hi jhuayllasco, I know this message is pretty old but I am currently trying to implement the same feature. Were you able to solve the problems you had? Would you have any advices on how to do it properly?

Thanks,

Julien Perrenoud

[bharatkrishna]

I too am trying to have a blurred background when the menu is opened. I tried the code posted by @jhuayllasco and I see the same issue where the buttons become inoperative. Anyone found a way to solve this?

[jhuayllasco]

Hey sorry it took me so long to post on this subject. You do not need to override the open() function at all but make sure you add the liquidFloatingAction button to your view controller like this...

I call self.addBlurView() and createFloatingActionButton in viewDidLoad()

I hope this helps. If you still can't get it to work then let me know...

var effectView : UIVisualEffectView! var floatingActionButton: LiquidFloatingActionButton!

func createFloatingButton() { let cellFactory: (String) -> LiquidFloatingCell = { (iconName) in let cell = LiquidFloatingCell(icon: UIImage(named: iconName)!) return cell } let customCellFactory: (String, String, String) -> LiquidFloatingCell = { (iconName, buttonName, segue) in let cell = CustomCell(icon: UIImage(named: iconName)!, name: buttonName, segue: segue) return cell } cells.append(customCellFactory("ic_cloud", "Chat", "ViewMessages")) cells.append(customCellFactory("ic_system", "Add Credit", "AddCredit")) cells.append(customCellFactory("ic_place", "Location", "ShowLocation")) cells.append(customCellFactory("ic_brush", "View Cart", "ViewCart")) cells.append(customCellFactory("ic_art", "Enter Spa", "EnterSpa"))

    let screenSize: CGRect = UIScreen.mainScreen().bounds

    let screenWidth = screenSize.width
    let screenHeight = screenSize.height

    let floatingFrame = CGRect(x: screenWidth - 56, y: screenHeight - 120, width: 40, height: 40)

    floatingActionButton = LiquidFloatingActionButton(frame: floatingFrame)
    floatingActionButton.animateStyle = .Up
    floatingActionButton.dataSource = self
    floatingActionButton.delegate = self
    floatingActionButton.color = UIColor.purpleColor()

    self.view.addSubview(floatingActionButton)
}

func addBlurView(){ let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) let blurView = UIVisualEffectView(effect: blurEffect) blurView.frame = CGRectMake(0, 0, 600, 100)

    blurView.translatesAutoresizingMaskIntoConstraints = false
    profileContainer.insertSubview(blurView, aboveSubview: bgImageView)

    let topConstraint = NSLayoutConstraint(item: profileContainer, attribute: .Top, relatedBy: .Equal, toItem: blurView, attribute: .Top, multiplier: 1.0, constant: 0.0)
    let bottomConstraint = NSLayoutConstraint(item: profileContainer, attribute: .Bottom, relatedBy: .Equal, toItem: blurView, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
    let leftConstraint = NSLayoutConstraint(item: profileContainer, attribute: .Left, relatedBy: .Equal, toItem: blurView, attribute: .Left, multiplier: 1.0, constant: 0.0)
    let rightConstraint = NSLayoutConstraint(item: profileContainer, attribute: .Right, relatedBy: .Equal, toItem: blurView, attribute: .Right, multiplier: 1.0, constant: 0.0)
    self.profileContainer.addConstraints([topConstraint, rightConstraint, leftConstraint, bottomConstraint])
}

func liquidFloatingActionButtonAnimate(liquidFloatingActionButton: LiquidFloatingActionButton) { let darkBlur = UIBlurEffect(style: .Dark) effectView = UIVisualEffectView(effect: darkBlur) effectView.frame = self.view.bounds effectView.autoresizingMask = [.FlexibleHeight, .FlexibleWidth] self.view.addSubview(effectView)

    effectView.frame = self.view.frame
    effectView.frame.makeIntegralInPlace()
    effectView.contentView.addSubview(liquidFloatingActionButton)
}
func liquidFloatingActionButtonClose(liquidFloatingActionButton: LiquidFloatingActionButton) {
    effectView.removeFromSuperview()

    self.view.addSubview(liquidFloatingActionButton)
}
private func vibrancyEffectView(forBlurEffectView blurEffectView:UIVisualEffectView) -> UIVisualEffectView {
    let vibrancy = UIVibrancyEffect(forBlurEffect: blurEffectView.effect as! UIBlurEffect)
    let vibrancyView = UIVisualEffectView(effect: vibrancy)
    vibrancyView.frame = blurEffectView.bounds
    vibrancyView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
    return vibrancyView
}

Change in LiquidFloatingActionButton.swift

@objc public protocol LiquidFloatingActionButtonDelegate { // selected method optional func liquidFloatingActionButton(liquidFloatingActionButton: LiquidFloatingActionButton, didSelectItemAtIndex index: Int) optional func liquidFloatingActionButtonAnimate(liquidFloatingActionButton: LiquidFloatingActionButton) optional func liquidFloatingActionButtonClose(liquidFloatingActionButton: LiquidFloatingActionButton)

}

public func open() {

    // rotate plus icon
    self.plusLayer.addAnimation(plusKeyframe(true), forKey: "plusRot")
    self.plusRotation = CGFloat(M_PI * 0.25) // 45 degree

    let cells = cellArray()
    for cell in cells {
        insertCell(cell)
    }

    self.baseView.open(cells)
    setNeedsDisplay()
    // tell the delegate to animate
    delegate?.liquidFloatingActionButtonAnimate?(self)
}

// close all cells
public func close() {

    // rotate plus icon
    self.plusLayer.addAnimation(plusKeyframe(false), forKey: "plusRot")
    self.plusRotation = 0

    self.baseView.close(cellArray())
    setNeedsDisplay()

    // tell delegate we are closeing
    delegate?.liquidFloatingActionButtonClose!(self)
}

[bharatkrishna]

@jhuayllasco thanks for getting back! Where are you adding addBlurView()? Is it in the ViewController? What is profileContainer? Is it some view on your ViewController? Where are you adding liquidFloatingActionButtonAnimate() and other functions? Where are you defining effectView? Is it a class member variable in the ViewController?

Edit: I see that you have updated the code in your post. I will try the updated code.

[jhuayllasco]

Yes addBlurView() is on my view controller profileContainer is a UIView in my view controller.

@IBOutlet var profileContainer : UIView!

My view controller implements LiquidFloatingActionButtonDataSource, LiquidFloatingActionButtonDelegate

I updated the code to show what effectView is. Hope this helps.

[jhuayllasco]

Please make sure to check on updates to code in previous post.

[bharatkrishna]

Thanks! I could get it to work without calling addBlurView() in ViewDidLoad(). The blur effect seems to happen in liquidFloatingActionButtonAnimate() delegate function.

Last question, where is vibrancyEffectView() called?

[jhuayllasco]

I actually eliminated the call to that function as it was making the icons black.