kciter / floaty

:heart: Floating Action Button for iOS

💼 Currently working on

Cobalt. Inc.

CTO, 2018. 07 ~

📘 Writing / Translation

• 리액트 훅을 활용한 마이크로 상태 관리
• Vue.js 이 정도는 알아야지

📺 Presentation

• My presentations

❤️ Open Source

Look below!

floaty's Issues

Where can I get the obj-c code?

Tutorials contains examples of the objective-c code.

Move FAB on the screen

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

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,

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.

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.

Under TabBar its hiding.

When i appear it under UITabBarController,its hiding half.

Any ideas?

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

As titled.

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.

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.

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.

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.

Size icons

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

Thanks, good library component 👍

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

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

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.

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

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

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.

Animation Type

How use Animation Type???

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.

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.

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

Title new items should be tappable as well as icons

Hi

How can I do it?

Invalid Layout

I have some issue while use this library.

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

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.

Can't add shadow to plus button

There is no shadow property for plus button.

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

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

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

issue on TableViewController

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

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

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.

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.

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

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.

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

Add Carthage support

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

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!

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

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.

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.

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.

Changing plus icon image

Can we use our own image over initial plus icon?

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?

Layout issue.

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

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.

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!

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.