Convert Figma logo to code with AI

kciter logoFloaty

:heart: Floating Action Button for iOS

1,573
310
1,573
59

Top Related Projects

Material Design Floating Action Button in liquid state

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

Quick Overview

Floaty is a lightweight and customizable floating action button (FAB) library for iOS, written in Swift. It provides an easy way to add expandable floating buttons to iOS applications, similar to those seen in Material Design.

Pros

  • Easy to integrate and customize
  • Supports both Swift and Objective-C
  • Highly configurable with various animation options
  • Actively maintained with regular updates

Cons

  • Limited to iOS platform only
  • May require additional effort to match non-Material Design UI styles
  • Documentation could be more comprehensive

Code Examples

Adding a basic Floaty button:

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

Customizing the appearance:

floaty.buttonColor = UIColor.red
floaty.plusColor = UIColor.white
floaty.itemButtonColor = UIColor.blue
floaty.itemTitleColor = UIColor.white

Adding multiple items with icons:

floaty.addItem("Star", icon: UIImage(named: "star"))
floaty.addItem("Edit", icon: UIImage(named: "edit"))
floaty.addItem("Share", icon: UIImage(named: "share"))

Getting Started

  1. Install Floaty using CocoaPods by adding the following to your Podfile:
pod 'Floaty', '~> 4.2.0'
  1. Import Floaty in your Swift file:
import Floaty
  1. Create and add a Floaty instance to your view:
let floaty = Floaty()
floaty.addItem(title: "First Item")
floaty.addItem(title: "Second Item")
self.view.addSubview(floaty)
  1. Customize the appearance and behavior as needed:
floaty.buttonColor = UIColor.blue
floaty.openAnimationType = .pop
floaty.itemSpace = 14
floaty.handleFirstItemDirectly = true

Competitor Comparisons

Material Design Floating Action Button in liquid state

Pros of LiquidFloatingActionButton

  • Offers a unique liquid animation effect for the floating action button
  • Provides customizable options for the liquid animation, such as color and elasticity
  • Supports both Swift and Objective-C

Cons of LiquidFloatingActionButton

  • Limited to floating action buttons only, while Floaty supports various button types
  • Less actively maintained, with fewer recent updates compared to Floaty
  • Lacks some advanced features present in Floaty, such as drag-to-move functionality

Code Comparison

LiquidFloatingActionButton:

let floatingActionButton = LiquidFloatingActionButton(frame: CGRect(x: self.view.frame.width - 56 - 16, y: self.view.frame.height - 56 - 16, width: 56, height: 56))
floatingActionButton.responsible = true
floatingActionButton.animateStyle = .up
floatingActionButton.cells = [LiquidFloatingCell(icon: UIImage(named: "icon"))]
self.view.addSubview(floatingActionButton)

Floaty:

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

Both libraries offer easy-to-use implementations for floating action buttons in iOS applications. LiquidFloatingActionButton focuses on providing a unique liquid animation effect, while Floaty offers more versatility in terms of button types and advanced features. The choice between the two depends on the specific requirements of your project and the desired visual effects.

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

Pros of circle-menu

  • More visually appealing and interactive circular menu design
  • Supports customizable animations and transitions
  • Includes additional features like button highlighting and menu item icons

Cons of circle-menu

  • Limited to circular menu layout, less flexible than Floaty's customizable positioning
  • May require more setup and configuration compared to Floaty's simpler implementation
  • Potentially higher performance overhead due to complex animations

Code Comparison

circle-menu:

let circleMenu = CircleMenu(
    frame: view.bounds,
    normalIcon:"icon_menu",
    selectedIcon:"icon_close",
    buttonsCount: 4,
    duration: 4,
    distance: 120)
view.addSubview(circleMenu)

Floaty:

let floaty = Floaty()
floaty.addItem("Item 1", icon: UIImage(named: "icon1"))
floaty.addItem("Item 2", icon: UIImage(named: "icon2"))
view.addSubview(floaty)

Both libraries offer easy-to-use implementations for adding interactive menu elements to iOS applications. circle-menu focuses on a visually striking circular menu design with customizable animations, while Floaty provides more flexibility in button positioning and a simpler setup process. The choice between the two depends on the specific design requirements and desired user interaction for your app.

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

Pros of folding-cell

  • More visually appealing and interactive UI element
  • Provides a unique expanding cell animation for table views
  • Offers customizable content for both folded and unfolded states

Cons of folding-cell

  • Limited to table view cells, less versatile than Floaty
  • May require more setup and configuration for each cell
  • Potentially higher performance impact due to complex animations

Code Comparison

folding-cell:

let cell = FoldingCell()
cell.backgroundColor = .clear
cell.foregroundView = foregroundView
cell.containerView = containerView
cell.foregroundColor = .white
cell.containerColor = .clear

Floaty:

let floaty = Floaty()
floaty.addItem("Item 1", icon: UIImage(named: "icon1"))
floaty.addItem("Item 2", icon: UIImage(named: "icon2"))
floaty.paddingX = 16
floaty.paddingY = 16
self.view.addSubview(floaty)

Summary

While folding-cell offers a unique and visually appealing expanding cell animation for table views, Floaty provides a more versatile floating action button that can be used in various contexts. folding-cell may require more setup for each cell but offers customizable content for both folded and unfolded states. Floaty, on the other hand, is simpler to implement and can be easily added to any view with multiple action items.

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

Pros of expanding-collection

  • More visually appealing and interactive UI component
  • Supports custom card layouts and content
  • Provides smooth animations and transitions

Cons of expanding-collection

  • More complex implementation and setup
  • Limited to collection view-based interfaces
  • Potentially higher performance overhead for large datasets

Code Comparison

expanding-collection:

let expandingCollection = ExpandingCollection(collectionViewLayout: layout)
expandingCollection.dataSource = self
expandingCollection.delegate = self
view.addSubview(expandingCollection)

Floaty:

let floaty = Floaty()
floaty.addItem("Item 1", icon: UIImage(named: "icon1"))
floaty.addItem("Item 2", icon: UIImage(named: "icon2"))
view.addSubview(floaty)

Summary

expanding-collection offers a more visually rich and interactive UI component compared to Floaty's simpler floating action button. While expanding-collection provides greater customization and animation options, it comes with increased complexity and potential performance considerations. Floaty, on the other hand, is easier to implement and more versatile for various app layouts but lacks the advanced visual features of expanding-collection.

The code comparison shows that expanding-collection requires more setup and integration with collection view data sources and delegates, while Floaty can be quickly added to a view with minimal configuration.

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion

Pros of paper-onboarding

  • More visually appealing and customizable onboarding experience
  • Smooth animations and transitions between onboarding steps
  • Better suited for complex, multi-step onboarding processes

Cons of paper-onboarding

  • Limited to onboarding scenarios, less versatile than Floaty
  • Potentially steeper learning curve for implementation
  • May require more setup and configuration

Code Comparison

paper-onboarding:

let onboarding = PaperOnboarding()
onboarding.dataSource = self
onboarding.delegate = self
view.addSubview(onboarding)

Floaty:

let floaty = Floaty()
floaty.addItem("Item 1", icon: UIImage(named: "icon"))
floaty.addItem("Item 2", icon: UIImage(named: "icon"))
view.addSubview(floaty)

paper-onboarding focuses on creating a structured onboarding flow with multiple pages, while Floaty provides a simple floating action button with customizable items. paper-onboarding requires implementing data source and delegate methods, whereas Floaty allows for quick addition of items with minimal setup. The choice between the two depends on the specific use case and desired user experience.

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

Pros of animated-tab-bar

  • More visually appealing with animated icons and transitions
  • Offers a variety of pre-designed tab bar styles
  • Supports both Swift and Objective-C

Cons of animated-tab-bar

  • Limited to tab bar functionality
  • May require more setup and customization for specific use cases
  • Potentially higher performance overhead due to animations

Code Comparison

animated-tab-bar:

let tabBarController = RAMAnimatedTabBarController()
let item1 = RAMAnimatedTabBarItem(title: "Home", image: UIImage(named: "home"), tag: 1)
item1.animation = RAMBounceAnimation()
tabBarController.viewControllers = [vc1, vc2, vc3]
tabBarController.setViewControllers([vc1, vc2, vc3], animated: true)

Floaty:

let floaty = Floaty()
floaty.addItem("Item 1", icon: UIImage(named: "icon1"))
floaty.addItem("Item 2", icon: UIImage(named: "icon2"))
view.addSubview(floaty)

Summary

animated-tab-bar focuses on creating visually appealing tab bars with animations, while Floaty provides a floating action button with expandable menu items. animated-tab-bar offers more customization options for tab bars but is limited to that specific UI element. Floaty, on the other hand, is more versatile and can be used in various contexts where a floating action button is needed. The choice between the two depends on the specific requirements of your app's user interface and functionality.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Floaty

Swift 5.0 Version License Platform Build Status

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

Preview gif

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

Storyboard support1 Storyboard support2

Dependent on the UIWindow.

Floaty.global.button.addItem(title: "Hello, World!")
Floaty.global.show()
Dependent on the UIWindow

Dependent on the UIViewController.

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

Use icon

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

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 handler

Use custom item

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

RTL Support

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

Floaty.global.rtlMode = true

Rtl Enabled Rtl Disabled

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

PopFadeSlide Left
Pop animation gif Fade animation gif Slide left animation gif
Slide UpNone
Slide up animation gif None animation gif

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

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.