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
- Install Floaty using CocoaPods by adding the following to your Podfile:
pod 'Floaty', '~> 4.2.0'
- Import Floaty in your Swift file:
import Floaty
- 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)
- 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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Floaty
Floaty is simple floating action button for iOS. (formerly KCFloatingActionButton)
Why change the name?
- Follow the swift naming convention.
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. :smile:
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.
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
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot