kciter/floaty

:heart: Floating Action Button for iOS

Floaty

Floaty is simple floating action button for iOS. (formerly KCFloatingActionButton)

Why change the name?

1. Follow the swift naming convention.
2. KCFloatingActionButton is too long.

Preview

Requirements

• iOS 10.0+
• Swift 5.0

Installation

CocoaPods

use_frameworks!
pod 'Floaty', '~> 4.2.0'

Carthage

github "kciter/Floaty"

Swift Package Manager

Once you have your Swift package set up, adding Floaty as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/kciter/Floaty.git", from: "4.2.1")
]

Manually

To install manually the Floaty in an app, just drag the Floaty/*.swift file into your project.

Usage

Storyboard support

Dependent on the UIWindow.

Floaty.global.button.addItem(title: "Hello, World!")
Floaty.global.show()

Dependent on the UIViewController.

let floaty = Floaty()
floaty.addItem(title: "Hello, World!")
self.view.addSubview(floaty)

Use icon

let floaty = Floaty()
floaty.addItem("Hello, World!", icon: UIImage(named: "icon")!)
self.view.addSubview(floaty)

Use handler

Swift

let floaty = Floaty()
floaty.addItem("I got a handler", icon: UIImage(named: "icon")!, handler: { item in
    let alert = UIAlertController(title: "Hey", message: "I'm hungry...", preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "Me too", style: .default, handler: nil))
    self.present(alert, animated: true, completion: nil)
    floaty.close()
})
self.view.addSubview(floaty)

Use custom item

let item = FloatyItem()
item.buttonColor = UIColor.blueColor()
item.title = "Custom item"
Floaty.global.button.addItem(item: item)

RTL Support

You can use the rtlMode property to mirror the Floaty Button for rtl languages.

Floaty.global.rtlMode = true

Sticky

You can use the sticky property.

floaty.sticky = true // sticking to parent UIScrollView(also UITableView, UICollectionView)
scrollView.addSubview(floaty)

Friendly Tap

You can use the friendlyTap property.

fab.friendlyTap = true
scrollView.addSubview(fab)

With the default location of the frame, the button is now tappable until the right and rightbottom of the screen. This prevents tapping behind it by accident.

Animation type

Pop	Fade	Slide Left
Slide Up	None

ToDo

• Labels to come at the right hand side of the FAB Item menu.

Donate

If you like this open source, you can sponsor it. 😄

Paypal me

License

The MIT License (MIT)

Copyright (c) 2015 Lee Sun-Hyoup

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

floaty's Issues

Where can I get the obj-c code?

Tutorials contains examples of the objective-c code.

Plus icon layout distorted

Steps to reproduce the issue:

1. Open floating button.
2. Close the application.
3. Open Camera & click a picture.
4. Open the app again

You will find that image inside floating button is distorted from its actual frame.

Status bar on top is changing

I put the status bar on top to light color (so the text is white). For some reason adding this floating button is making it black.

Changing plus icon image

Can we use our own image over initial plus icon?

Position should be sticked when scrolling UITableView.

I have a UITableView with 2 section and 5 rows in each sections.

I have added floating button in viewDidLoad method.

Output showing button at end of view, but not on the tableView's end of row.

Swift and Xcode Version

The new syntax #selector in KCFloatingActionButton.swift only works with Swift 2.2+. So the version of Swift and Xcode in README might need to be changed.

Actually is it possible to make it compatible with older versions of Swift? Since many users haven't update Xcode to the latest version.

Icons in KCFloatingActionButtonItem distorted

Hey, I noticed that some of my icons seemed a bit squished. I checked in the code and found this:

/**
 Item's icon image view.
 */
var _iconImageView: UIImageView? = nil
public var iconImageView: UIImageView {
    get {
        if _iconImageView == nil {
            _iconImageView = UIImageView(frame: CGRectMake(0, 0, 21, 23))
            //                _iconImageView = UIImageView(frame: CGRectMake(frame.size.width - size, 0, 21, 23))
            _iconImageView?.center = CGPointMake(size/2, size/2) + imageOffset
            _iconImageView?.contentMode = UIViewContentMode.ScaleToFill
            addSubview(_iconImageView!)
        }
        return _iconImageView!
    }
}

In this line:
_iconImageView = UIImageView(frame: CGRectMake(0, 0, 21, 23))
you can see that the image view is not a square.

And in this line:
_iconImageView?.contentMode = UIViewContentMode.ScaleToFill
... the content mode is set to .ScaleToFill which does not maintain the image aspect ratio.

Solution
If you set it to .ScaleAspectFill it will maintain the ratio and not distort the images.

Title is not tappable anymore

Hi,

since the commit with the new animation types:

95f78ef

the titles are not tappable anymore, when you press a title it justs closes the layer instead of executing the action.

Thanks

Make Background frame to be set on whole screen, & on tapping anywhere close the fab button.

Hello,

I want the background layer to be covered on whole screen on my view, i.e above navigationBar & TabBarController, & on tap of this layer float button should be closed.

For this in "KCFloatingActionButton" class, I added my own ImageView instead of adding overlayLayer, & integrated TapGesture on it. But tap gesture is not working on click of it, its taking that tap gesture functionality around plus button, also image view is not covering my navigation bar.

Add Carthage support

*** Skipped building KCFloatingActionButton due to the error:
Dependency "KCFloatingActionButton" has no shared framework schemes

How to call function in handler

I want to call function in item handler. On respective item click I want to perform an action. Any help?

let item = KCFloatingActionButtonItem()
item.icon = UIImage(named: "red_bar")
item.title = "RECORD"
item.handler = handler
item.titleColor = UIColor(red: 1, green: 0.8, blue: 0, alpha: 1.0)

Can I use two floating buttons?

Hi

I tried creating two floating (one on the left and right of the screen) buttons using this API.

However, if I create two flaotingButtons, clicking on either triggers only one menu ( the last one added). I want the press to only open the menu corresponding to the button clicked.

Layout issues after application went to background

Hello,
I'm using the KCFloatingActionButton (1.2.1) with items that have only icons and no text.
Every thing work well, as long as the application stay at foreground :

now if i go background (when i trigger [UIApplication sharedApplication] openURL: for exemple), wait few seconds, go back to the application from the application icon, this is the layout now :

notice that the KCFloatingActionButtonItem's method : drawRect, get called when i try to go back to the application, but this time the frame value did change in this line of createCircleLayer method :
circleLayer.frame = CGRectMake(frame.size.width - size, 0, size, size)

i did not find why the frame property chage it's value, but i got a work around to fix this issue :
replace the precedent line of code :
circleLayer.frame = CGRectMake(frame.size.width - size, 0, size, size)
by :
let castParent : KCFloatingActionButton = superview as! KCFloatingActionButton; circleLayer.frame = CGRectMake(castParent.itemSize/2 - (size/2), 0, size, size)
this give me a perfect centred item circle.

fabs moves in tableview

I'm putting the fab in tableviewcontroller and when I scroll the table, the button also moves. is there a way to fix this?

thanks.

Change Icon on tapped

I want to change that floating button icon on click. Any help. I tried to change that in the function but nothing happened.

func KCFABOpened(fab: KCFloatingActionButton) {
        print("FAB Opened")
        fab.buttonImage = UIImage(named: "cross_multiple")
}

issue on TableViewController

• I setup in tableview controller， scroll down. The FloatingButton position didnt update.

Is it possible to change the image of the main button?

As titled.

How to implement storyboard support?

I see that this has storyboard support, but how do you actually use it? I'm looking everywhere for floating action button but don't see it anywhere

Opening the main button then rotating the screen causes plus to go off-screen

If you press the plus then rotate the screen while the handlers are showing then the plus moves off the center and to the right corner of the default blue circle. I think setting the center would be the best way to address this

when adding a new item image it doesnt fill the whole circle!...how can i fix that?

Adding buttons of other type!

If you could make it possible for us to add any button to the list of buttons. It'd be amazing.

filling up the custom button background

I am wanting to change the floating buttons to a custom 1 with a blue background. the image is round and is 1024 x 1024. When I place it into the code and run, the image is small and not filling up the default white background. How could I over come this?

Move FAB on the screen

Hello! Is there any option where we can move floating action button on the screen?

Swift 3

it'd be cool to have a swift 3 version, if you have any interest to create a branch i would like to help with that.

Can't assign UIColor to the button color

I have a color and I'm trying to assign it as the button color. It's crashing right before the view with the button appears and the console says:
2016-03-29 22:23:31.643 Homework[34702:2044491] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -CGColor not defined for the UIColor <UIPlaceholderColor: 0x100a1ada0>; need to first convert colorspace.' *** First throw call stack: (0x184700f5c 0x1992f7f80 0x184700ea4 0x18a07c824 0x100173ff8 0x10016df94 0x10016e098 0x189488b4c 0x189473bd4 0x189472df4 0x189454d00 0x1894549ec 0x18945407c 0x189453dd0 0x18944d4bc 0x1846b7c30 0x1846b59d4 0x1845e4de0 0x189cc40ac 0x189cbef44 0x100051eb8 0x199b228b8) libc++abi.dylib: terminating with uncaught exception of type NSException (lldb)
It points the crash to the class KCFloatingActionButton.swift line 433 and when you call that function in the same file, line 220. I'm sure the color I'm assigning is a UIColor.

Changing Padding Doesn't Change Tap Point

I am using your menu over a Google Map. In the lower right corner of the map is Google's My Location Button which, when tapped, will re-center the map on the user's current location. Because I need this icon and feature, I wanted to place the float menu button above Google's My Location Button however, when I do this and try to tap the Google My Location Button, it still opens the menu as of I tapped the menu button. Screenshot of positioning is attached. By the way, it does it no matter where the button is placed as long as it is directly above Google's My Location Button.

Title new items should be tappable as well as icons

Hi

How can I do it?

Fab falls apart when I open control center

When I open the Fab menu and then open the "control center" the whole menu falls apart.

Can you add image offset to button items?

In above image, some item is fine, but other is not(horizontal).
I need to offset image on button item.

Thank you.

Speeding up the Pop animation

Hello there,

Is it possible to increase the buttons pop speed? Currently it takes about 1 second to all buttons to appear. I would like to decrease that.

Thanks for the work!

Xcode 8 and modern Swift syntax

The Xcode 8 GM build is out now and opening up a project with this library included will cause Xcode to prompt you to convert to either Swift 2.3 or Swift 3.0 (preferred) syntax. If you choose not to then your project will no longer build.

This library will need to be updated to modern syntax before it can be used with Xcode 8.

change X and Y position of KCbutton

Hello, I am using the KC button programmatically and right now it is partly covering the location of a banner ad. How could I solve this by programmatically moving it up? Thank you for all assistance!

Invalid Layout

I have some issue while use this library.

Please check blow image.
http://screencast.com/t/ovFSvuI1C

Request: When no child items exist, treat as regular button

If I dont add any child actionitems it would be great to not have the overlay or the button rotate... so it just becomes a regular button like the native android FAB.

Size icons

Hi,
How do I increase the size of icons, they are very small in my application.

Thanks, good library component 👍

Custom image is placed outside of the FloatingActionButton in 1.3.6

When a custom image is used, the image is placed to the left top of the FAB since 1.3.6

Animation Type

How use Animation Type???

Adding FloatingActionButton to the centre of the TabBarController

Hello,
I am in beginner -intermediate stage od learning swift and developing applications. I am desperately trying to add this to the centre of my tabbarcontroller however, the location of actionButton cannot be changed and also it cannot be used as a button. Is there a way to modify.

Thank you in advance!

Changing Title

I am trying to change the title of a menu item when it has been tapped however, when I do this, the new title is no longer centered with the icon, it's higher. Let me know if you need a screenshot. I have tried everything I can think of to find a way around this but to no avail. Thank you.

Add target as UIButton to KCFloatingActionButton

Hello Author,

This is definatley not an issue, but I have a question to ask as I am in the learning stage. I would like to know how I can add action to the parent KCFloatingActionButton.
I want to add something like
"button.addTarget(self, action: "buttonAction:", forControlEvents: UIControlEvents.TouchUpInside)"
to both KCFloatingActionButton and to the KCFloatingActionButtonItem.

Could you please guide me.

Many thanks in advance,

Regards,

Vertical layout issues

Hello,

i've noticed that the button y positions changed slightly after the first menu open, in the version 1.2.1 of the KCFloatingActionButton.
the following picture show the menu opened the first time since the view did apear :

closing the menu, then reopen it give the following result :

one can notice in the second picture, has the button items higher than the first one.

the code responsible for this issue is located in KCFloatingActionButton's open() method :
item.frame.origin.y = -itemHeight item.layer.transform = CATransform3DMakeScale(0.4, 0.4, 1)
inverse the order of the instruction, to fix this issue :
item.layer.transform = CATransform3DMakeScale(0.4, 0.4, 1) item.frame.origin.y = -itemHeight

Question or enhancement

Hi There,

I was wondering how i can move the menu around without changing the following padding..
var padding: CGFloat = 14

I wanted to move the menu from bottom just Y-Axis only. I having some issue adding KCFloatingActionButton with iAd. The Floating Menu is going behind iAdd.

Thanks.

FAB button items off center

The FAB is at the bottom right in the beginning

Then I present another screen modally which has a date picker popup from bottom like so

After that I unwind from the previous segue and the FAB has been repositioned to the middle of the screen (about the same distance above its original position as the data picker is tall). This behavior only happens when that picker pops up from the bottom of the screen.

I click on the FAB that's now in the middle of the screen then is repositions it self back to the bottom right but there is one issue

Tried solving the issue like so:

// get original position of fab
xPos = FAB.frame.origin.x
yPos = FAB.frame.origin.y

@IBAction func unwindSegue(unwindSegue: UIStoryboardSegue)
 {
       // when unwind occurs, reposition fab    
        FAB.frame.origin.x = xPos
        FAB.frame.origin.y = yPos
 }

This works to reposition the FAB after the unwind occurs, but the button items still appear off center when the FAB is clicked on

Layout issue.

When hide -> show -> open, layout is incorrect.

Under TabBar its hiding.

When i appear it under UITabBarController,its hiding half.

Any ideas?

need to change titlecolor

I've seen the source code and it's quite easy to implement. :)

I just put this here so you may see it.

btw. thanks for the library bro

how can i change the image of the action button from the "+" image to another image?

how can i change the image of the action button from the "+" image to another image?

Having the menu button active with notification appearing causes plus layer issue.

If you tap the button to show the items then a notification appears, the plus layer moves to the corner instead of sticking to the center.

Can't add shadow to plus button

There is no shadow property for plus button.