Adding Blur Effect when open() is called about liquidfloatingactionbutton HOT 8 OPEN

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

from liquidfloatingactionbutton.

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

from liquidfloatingactionbutton.

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?

from liquidfloatingactionbutton.

@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.

from liquidfloatingactionbutton.

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.

from liquidfloatingactionbutton.

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

from liquidfloatingactionbutton.

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?

from liquidfloatingactionbutton.

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

from liquidfloatingactionbutton.