I am trying to create a Floating Action button in swift programmatically. I used this video I found on youtube to create one, and it worked, despite some faults. The other problem is that the video is in Hindi so there are some parts that I don't understand completely. https://www.youtube.com/watch?v=xArCnGGzZEE
While it is a good video, there are some faults that I am trying to solve for my own use. The first was that when the floating button is pressed the blur view appears, but it only worked for portrait orientation. I managed to fix this problem, but the other problem has me lost.
So the floating action button works, and a clear view that holds a few buttons appears. The problem is that when the orientation changes with the buttons out, and I change the orientation the buttons disappear. If I change the orientation back to the orientation I pressed the floating action button on, the view with the buttons appear again. That means that the view is going somewhere, and I tried to find it, but I couldn't figure out how to do it without the constraints causing an error.
To help prove my point, this is what the view looks like.
this is what it looks like when i press the floating action button, and it works well
this is where the problem comes. I left the camera and photo button out as I change the device orientation.
If I change the orientation back to portrait, the camera and photo buttons come back, so that means that the placement of the buttons are moving out of view.
this is weird too because if i press the floating action button while to device is in landscape orientation it works well.
and i change the orientation to portrait and the camera and photo button vanish too. I know that it should still be there, because the blur view is still working.
This is the view for the button.
import Foundation
import UIKit
public typealias CameraButtonAction = (CameraButton) -> Void
open class CameraButton: NSObject {
//the action the button should perform when tapped
var action: CameraButtonAction?
//the button's background color: set default color and selected color
var backgroundColor: UIColor = UIColor.darkGray {
willSet {
floatButton.backgroundColor = newValue
backgroundColorSelected = newValue
}
}
//the button's background color: set default color
var backgroundColorSelected: UIColor = UIColor.darkGray
//indicates if the button is active
var active: Bool = false
//an array of items that the button will present
var items: [CameraButtonItem]? {
willSet {
if let item = self.items {
for abi in item {
abi.view.removeFromSuperview()
}
}
}
didSet {
placeButtonItems()
showActive(true)
}
}
//the button that will be presented to the user
var floatButton: UIButton!
//view that will hold the placement of the button's actions
var contentView: UIView!
//view where the floatbutton will be displayed
var parentView: UIView!
//blur effect that will be presented when the button is active
var blurVisualEffect: UIVisualEffectView!
//distance between each item action
let itemOffset = -55
//the float button's radius
let floatBtnRadius = 50
public init(attachedToView view: UIView, items: [CameraButtonItem]?) {
super.init()
//creates the float button
self.parentView = view
self.items = items
let bounds = self.parentView.bounds
self.floatButton = UIButton(type: .custom)
self.floatButton.layer.cornerRadius = CGFloat(floatBtnRadius / 2)
self.floatButton.layer.shadowOpacity = 1
self.floatButton.layer.shadowRadius = 2
self.floatButton.layer.shadowOffset = CGSize(width: 1, height: 1)
self.floatButton.layer.shadowColor = UIColor.gray.cgColor
let cameraImg = UIImage(named: "otherCamera")
self.floatButton.setImage(cameraImg, for: UIControl.State())
self.floatButton.backgroundColor = self.backgroundColor
self.floatButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 8, right: 0)
self.floatButton.isUserInteractionEnabled = true
self.floatButton.translatesAutoresizingMaskIntoConstraints = false
self.floatButton.addTarget(self, action: #selector(CameraButton.buttonTapped(_:)), for: .touchUpInside)
self.floatButton.addTarget(self, action: #selector(CameraButton.buttonTouchDown(_:)), for: .touchDown)
self.parentView.addSubview(self.floatButton)
self.contentView = UIView(frame: bounds)
self.blurVisualEffect = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
blurVisualEffect.translatesAutoresizingMaskIntoConstraints = false
self.blurVisualEffect.frame = self.contentView.frame
self.contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.blurVisualEffect.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.contentView.addSubview(self.blurVisualEffect)
self.contentView.insertSubview(self.blurVisualEffect, at: 0)
let tap = UITapGestureRecognizer(target: self, action: #selector(CameraButton.backgroundTapped(_:)))
self.contentView.addGestureRecognizer(tap)
self.installConstraints()
}
required public init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setImage(_ image: UIImage?, forState state: UIControl.State) {
floatButton.setImage(image, for: state)
floatButton.adjustsImageWhenHighlighted = false
floatButton.contentEdgeInsets = UIEdgeInsets.zero
}
//MARK: - Auto Layout Methods
//install all the necessary constraints for the button. By the default the button will be placeed at 15pts from the bottom and the 15 pts from the right of its parentView
func installConstraints() {
let views: [String: UIView] = ["floatButton":self.floatButton, "parentView":self.parentView]
let width = NSLayoutConstraint.constraints(withVisualFormat: "H:[floatButton(\(floatBtnRadius))]", options: NSLayoutConstraint.FormatOptions.alignAllCenterX, metrics: nil, views: views)
let height = NSLayoutConstraint.constraints(withVisualFormat: "V:[floatButton(\(floatBtnRadius))]", options: NSLayoutConstraint.FormatOptions.alignAllCenterX, metrics: nil, views: views)
self.floatButton.addConstraints(width)
self.floatButton.addConstraints(height)
let trailingSpacing = NSLayoutConstraint.constraints(withVisualFormat: "V:[floatButton]-15-|", options: NSLayoutConstraint.FormatOptions.alignAllCenterX, metrics: nil, views: views)
let bottomSpacing = NSLayoutConstraint.constraints(withVisualFormat: "H:[floatButton]-15-|", options: NSLayoutConstraint.FormatOptions.alignAllCenterX, metrics: nil, views: views)
self.parentView.addConstraints(trailingSpacing)
self.parentView.addConstraints(bottomSpacing)
}
//MARK: - Button Actions Methods
@objc func buttonTapped(_ sender: UIControl) {
animatePressingWithScale(1.0)
if let unwrappedAction = self.action {
unwrappedAction(self)
}
}
@objc func buttonTouchDown(_ sender: UIButton) {
animatePressingWithScale(0.9)
}
//MARK: -Gesture Recognizer Methods
@objc func backgroundTapped(_ gesture: UIGestureRecognizer) {
if self.active {
self.toggle()
}
}
//MARK: - Custom methods
//presents or hides all the actionButtons actions
func toggleMenu() {
self.placeButtonItems()
self.toggle()
}
//MARK: Action Button Item Placement
//defines the posistion of all the actionButton's actions
func placeButtonItems() {
if let optionalItems = self.items {
for item in optionalItems {
item.view.center = CGPoint(x: self.floatButton.center.x - 83, y: self.floatButton.center.y)
//item.view.removeFromSuperview()
self.contentView.addSubview(item.view)
}
}
}
//MARK: - Float menu Methods
//presents or hides all the actionButton's actions and changes the active state
func toggle() {
//print("First: \(active)")
self.animateMenu()
self.showBlur()
self.active = !self.active
self.floatButton.backgroundColor = self.active ? backgroundColorSelected : backgroundColor
self.floatButton.isSelected = self.active
print("Second: \(active)")
}
func animateMenu() {
UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0.1, options: UIView.AnimationOptions.allowAnimatedContent, animations: {
self.showActive(false)
}, completion: {completion in
if self.active == false {
//self.hideBlur()
}
})
}
func showActive(_ active: Bool) {
if self.active == active {
self.contentView.alpha = 1.0
if let optionalItems = self.items {
for (index, item) in optionalItems.enumerated() {
let offset = index + 1
let translation = self.itemOffset * offset
item.view.transform = CGAffineTransform(translationX: 0, y: CGFloat(translation))
item.view.alpha = 1
}
}
} else {
self.contentView.alpha = 0.0
if let optionalItems = self.items {
for item in optionalItems {
item.view.transform = CGAffineTransform(translationX: 0, y: 0)
item.view.alpha = 0
}
}
}
}
func showBlur() {
self.parentView.insertSubview(self.contentView, belowSubview: self.floatButton)
}
func hideBlur() {
self.contentView.removeFromSuperview()
}
//animating the button by pressing, by the default this method just scales the button down when its pressed and returns to its normal size when the button is no longer pressed
//parameter scale: how much the button should be scaled
func animatePressingWithScale(_ scale: CGFloat) {
UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0.1, options: UIView.AnimationOptions.allowAnimatedContent, animations: {
self.floatButton.transform = CGAffineTransform(scaleX: scale, y: scale)
}, completion: nil)
}
}
this is the view for the button items
import Foundation
import UIKit
public typealias CameraButtonItemAction = (CameraButtonItem) -> (Void)
open class CameraButtonItem: NSObject {
//the action the item should perform when tapped
open var action: CameraButtonItemAction?
//Description of the item's action
open var text: String {
get {
return self.label.text!
}
set {
self.label.text = newValue
}
}
//view that will hold the item's button and label
var view: UIView!
//label that contain the item's text
var label: UILabel!
//main button that will perform the defined action
var button: UIButton!
//image used by the button
var image: UIImage!
//size needed for the view property present the item's content
let viewSize = CGSize(width: 200, height: 35)
//button's size by default the button is 35x35
let buttonSize = CGSize(width: 35, height: 35)
var labelBackground: UIView!
let backgroundInset = CGSize(width: 10, height: 10)
public init(title optionalTitle: String?, image: UIImage?) {
super.init()
//so when the button is pressed a view will appear with buttons and labels that can be pressed. The view has no background color.
self.view = UIView(frame: CGRect(origin: CGPoint.zero, size: self.viewSize))
self.view.alpha = 0
self.view.isUserInteractionEnabled = true
//self.view.backgroundColor = UIColor.purple
//this creates the button that we can press
self.button = UIButton(type: .custom)
self.button.frame = CGRect(origin: CGPoint(x: self.viewSize.width - self.buttonSize.width, y: 0), size: buttonSize)
self.button.layer.shadowOpacity = 1
self.button.layer.shadowRadius = 2
self.button.layer.shadowOffset = CGSize(width: 1, height: 1)
self.button.layer.shadowColor = UIColor.black.cgColor
self.button.addTarget(self, action: #selector(CameraButtonItem.buttonPressed(_:)), for: .touchUpInside)
if let unwrappedImage = image {
self.button.setImage(unwrappedImage, for: UIControl.State())
}
if let text = optionalTitle, text.trimmingCharacters(in: CharacterSet.whitespaces).isEmpty == false {
self.label = UILabel()
self.label.font = UIFont(name: "HelveticaNeue-Medium", size: 13)
self.label.textColor = UIColor.black
self.label.textAlignment = .center
self.label.text = text
self.label.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(CameraButtonItem.labelTapped(_:))))
self.label.sizeToFit()
self.labelBackground = UIView()
self.labelBackground.frame = self.label.frame
self.labelBackground.backgroundColor = UIColor.white
self.labelBackground.layer.cornerRadius = 5
self.labelBackground.layer.shadowOpacity = 0.8
self.labelBackground.layer.shadowOffset = CGSize(width: 0, height: 1)
self.labelBackground.layer.shadowRadius = 0.2
self.labelBackground.layer.shadowColor = UIColor.lightGray.cgColor
//Adjust the label's background inset
self.labelBackground.frame.size.width = self.label.frame.size.width + backgroundInset.width
self.labelBackground.frame.size.height = self.label.frame.size.height + backgroundInset.height
self.label.frame.origin.x = self.label.frame.origin.x + backgroundInset.width / 2
self.label.frame.origin.y = self.label.frame.origin.y + backgroundInset.height / 2
//adjust the label's background position
//distance between the button and the label
self.labelBackground.frame.origin.x = CGFloat(130 - self.label.frame.size.width)
self.labelBackground.center.y = self.view.center.y
self.labelBackground.addSubview(self.label)
//Add Tap Gesture Recognizer
let tap = UITapGestureRecognizer(target: self, action: #selector(CameraButtonItem.labelTapped(_:)))
self.view.addGestureRecognizer(tap)
self.view.addSubview(self.labelBackground)
}
self.view.addSubview(self.button)
}
//MARK: -Button Action Methods
@objc func buttonPressed(_ sender: UIButton) {
if let unwrappedAction = self.action {
unwrappedAction(self)
}
}
//MARK: - Gesture Recognizer Methods
@objc func labelTapped(_ gesture: UIGestureRecognizer) {
if let unwrappedAction = self.action {
unwrappedAction(self)
}
}
}
and this is the viewcontroller that i set up the button in the collectionview
import UIKit
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 100, height: 150)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
}
}
extension ViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! TestingCollectionViewCell
cell.backgroundColor = .white
let img = UIImage(named: self.items[indexPath.row])
cell.imageView.image = img
cell.imageName.text = "\(self.items[indexPath.row])"
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("\(items[indexPath.row])")
self.presentInfoView(withInfo: items[indexPath.row])
}
}
class ViewController: UIViewController, BlurDelegate {
var actionButton: CameraButton!
func removeBlurView() {
for subview in view.subviews {
if subview.isKind(of: UIVisualEffectView.self) {
subview.removeFromSuperview()
self.infoView.removeFromSuperview()
}
}
}
fileprivate var items: [String] = [
"photo1",
"photo2",
"photo3",
"photo4",
"photo5",
"photo6",
"photo7",
"photo8",
"photo9",
"photo10",
"photo11",
"photo12",
"photo13",
"photo14",
"photo15",
"photo16",
"photo17",
"photo18",
"photo19",
"photo20",
"photo21",
"photo22",
"photo23",
"photo24"
]
override func viewDidLoad() {
super.viewDidLoad()
let collection = UICollectionView(frame: view.frame, collectionViewLayout: UICollectionViewFlowLayout())
//allows us to use auto layout constraints
collection.translatesAutoresizingMaskIntoConstraints = false
collection.backgroundColor = .black
view.addSubview(collection)
collection.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
collection.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
collection.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
collection.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
collection.dataSource = self
collection.delegate = self
collection.register(TestingCollectionViewCell.self, forCellWithReuseIdentifier: "cell")
self.navigationItem.title = "Testing"
setUpButton()
}
func setUpButton() {
let cameraBtn = UIImage(named: "CameraBtn")
let photoBtn = UIImage(named: "PhotoBtn")
let cameraRound = UIImage(named: "otherCamera")
let camera = CameraButtonItem(title: "Camera", image: cameraBtn)
let photo = CameraButtonItem(title: "Photo", image: photoBtn)
camera.action = { item in
print(item)
print("Camera Btn Pressed")
}
photo.action = { item in
print(item)
print("Photo Btn Pressed")
}
actionButton = CameraButton(attachedToView: self.view, items: [camera, photo])
actionButton.setImage(cameraRound, forState: UIControl.State())
actionButton.backgroundColor = .green
actionButton.action = { button in button.toggleMenu()
//self.setBlurView()
}
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
var touch: UITouch? = touches.first
if touch?.view != infoView {
dismissView()
}
}
func dismissView() {
//dismiss(animated: true, completion: nil)
removeBlurView()
}
func setBlurView() {
let blurView = UIVisualEffectView()
blurView.frame = view.frame
blurView.effect = UIBlurEffect(style: .regular)
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurView)
}
func presentInfoView(withInfo info: String) {
setBlurView()
view.addSubview(infoView)
//infoView.addView()
let img = UIImage(named: info)
infoView.imageView.image = img
infoView.nameLbl.text = info
infoView.backgroundColor = .white
infoView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
infoView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8).isActive = true
//infoView.widthAnchor.constraint(equalToConstant: view.frame.width - 64).isActive = true
infoView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.8).isActive = true
//infoView.heightAnchor.constraint(equalToConstant: view.frame.height - 64).isActive = true
infoView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -44).isActive = true
infoView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
infoView.alpha = 0
UIView.animate(withDuration: 0.5) {
self.infoView.alpha = 1
self.infoView.transform = .identity
}
}
}
What I tried to do is add a constraint to the view and the floating action button, but it caused the whole thing to crash. I also tried to add a function that deleted the current constraints when the device orientation changes and add a new constraint for the specific orientation, but there was no real difference.
If there is any more information I can give, please ask. Thank you very much