Top Related Projects
Android Floating Action Button based on Material Design specification
A DSL to make animation easy on iOS with Swift.
Quick Overview
LiquidFloatingActionButton is a custom floating action button (FAB) implementation for iOS, which provides a unique and visually appealing liquid-like animation when the button is pressed or released. This library allows developers to easily integrate a dynamic and engaging FAB into their iOS applications.
Pros
- Unique Animation: The liquid-like animation of the FAB creates a visually striking and engaging user experience.
- Customizable: The library offers various customization options, allowing developers to adjust the button's appearance and behavior to fit their app's design.
- Easy Integration: The library is well-documented and provides a straightforward integration process, making it easy for developers to incorporate the FAB into their projects.
- Smooth Transitions: The liquid animation transitions smoothly between the button's expanded and collapsed states, providing a polished and professional look.
Cons
- Limited Functionality: The library is primarily focused on the FAB's animation and appearance, and may not provide advanced functionality or integration with other UI elements.
- Performance Considerations: The liquid animation may have a higher performance impact compared to a standard FAB, especially on older or less powerful devices.
- Dependency on External Library: The project relies on the Lottie library for the animation, which adds an additional dependency to the project.
- Potential Compatibility Issues: As with any third-party library, there may be potential compatibility issues with newer versions of iOS or other dependencies.
Code Examples
Initializing the FAB
let liquidButton = LiquidFloatingActionButton(
image: UIImage(named: "your_fab_icon"),
highlightedImage: UIImage(named: "your_fab_icon_highlighted")
)
This code initializes a new LiquidFloatingActionButton
instance with the provided icon images.
Configuring the FAB
liquidButton.buttonColor = .systemBlue
liquidButton.buttonHighlightedColor = .systemIndigo
liquidButton.buttonShadowColor = .black
liquidButton.buttonShadowOffset = CGSize(width: 0, height: 2)
liquidButton.buttonShadowOpacity = 0.4
liquidButton.buttonShadowRadius = 4
This code sets various properties of the FAB, such as the button color, highlighted color, shadow color, offset, opacity, and radius.
Adding the FAB to the View
view.addSubview(liquidButton)
liquidButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
liquidButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
liquidButton.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -16)
])
This code adds the FAB to the view and sets its position using Auto Layout constraints.
Getting Started
To get started with the LiquidFloatingActionButton library, follow these steps:
-
Add the library to your project using a dependency manager like CocoaPods or Carthage.
# CocoaPods pod 'LiquidFloatingActionButton'
-
Import the library in your Swift file:
import LiquidFloatingActionButton
-
Create an instance of the
LiquidFloatingActionButton
and configure it as needed:let liquidButton = LiquidFloatingActionButton( image: UIImage(named: "your_fab_icon"), highlightedImage: UIImage(named: "your_fab_icon_highlighted") ) liquidButton.buttonColor = .systemBlue liquidButton.buttonHighlightedColor = .systemIndigo
-
Add the FAB to your view hierarchy:
view.addSubview(liquidButton) liquidButton.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ liquidButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16), liquidButton.bottomAnchor.constraint(equalTo: view.bottomAnchor
Competitor Comparisons
Android Floating Action Button based on Material Design specification
Pros of Clans/FloatingActionButton
- Supports custom FAB icons and background colors
- Provides a simple and straightforward API for creating FABs
- Includes various animation options for FAB expansion and collapse
Cons of Clans/FloatingActionButton
- Limited customization options compared to LiquidFloatingActionButton
- No support for liquid or morphing effects on the FAB
- Lacks advanced features like multiple FABs or FAB groups
Code Comparison
Clans/FloatingActionButton:
FloatingActionButton fab = new FloatingActionButton.Builder(this)
.withButtonColor(R.color.colorAccent)
.withGravity(Gravity.BOTTOM | Gravity.RIGHT)
.withMargins(0, 0, 16, 16)
.create();
yoavlt/LiquidFloatingActionButton:
LiquidFloatingActionButton liquidFab = (LiquidFloatingActionButton) findViewById(R.id.liquid_fab);
liquidFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Handle FAB click
}
});
A DSL to make animation easy on iOS with Swift.
Pros of DKChainableAnimationKit
- Provides a more flexible and expressive API for creating complex animations compared to LiquidFloatingActionButton.
- Supports a wide range of animation types, including position, scale, rotation, and more.
- Allows for easy chaining of multiple animations, making it easier to create intricate animation sequences.
Cons of DKChainableAnimationKit
- May have a steeper learning curve compared to the simpler LiquidFloatingActionButton.
- Requires more code to set up animations, which could be less efficient for simple use cases.
- May have a larger dependency footprint compared to the more focused LiquidFloatingActionButton.
Code Comparison
LiquidFloatingActionButton:
let button = LiquidFloatingActionButton(frame: CGRect(x: 20, y: 20, width: 56, height: 56))
button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
view.addSubview(button)
DKChainableAnimationKit:
let view = UIView(frame: CGRect(x: 20, y: 20, width: 100, height: 100))
view.backgroundColor = .red
view.animate()
.scale(to: 1.5)
.rotate(by: .pi / 4)
.translate(by: CGVector(dx: 50, dy: 50))
.duration(1.0)
.easing(.easeInOut)
.start()
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
LiquidFloatingActionButton
[] (https://github.com/Carthage/Carthage)
LiquidFloatingActionButton is floating action button component of material design in liquid state, inspired by Material In a Liquid State. This is also spinner loader components in liquid state.
Features
- liquid animation
- Easily customizable
- Objective-C compatible
- Swift 5.0
You can play a demo with appetize.io
Usage
You just need implement LiquidFloatingActionButtonDataSource
and LiquidFloatingActionButtonDelegate
similar to well-known UIKit design.
let floatingActionButton = LiquidFloatingActionButton(frame: floatingFrame)
floatingActionButton.dataSource = self
floatingActionButton.delegate = self
LiquidFloatingActionButtonDataSource
func numberOfCells(liquidFloatingActionButton: LiquidFloatingActionButton) -> Int
func cellForIndex(index: Int) -> LiquidFloatingCell
LiquidFloatingActionButtonDelegate
optional func liquidFloatingActionButton(liquidFloatingActionButton: LiquidFloatingActionButton, didSelectItemAtIndex index: Int)
Easily customizable
Installation
LiquidFloatingActionButton is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "LiquidFloatingActionButton"
or, if you use Carthage, add the following line to your Carthage
file.
github "yoavlt/LiquidFloatingActionButton"
License
LiquidFloatingActionButton is available under the MIT license. See the LICENSE file for more info.
Top Related Projects
Android Floating Action Button based on Material Design specification
A DSL to make animation easy on iOS with Swift.
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