FloatingPanel

Introduction to FloatingPanel

FloatingPanel is a versatile UI component designed to enhance the user interface experience for iOS applications. Primarily modeled after the interfaces seen in popular Apple applications like Maps, Shortcuts, and Stocks, FloatingPanel provides the capability to display content and utilities adjacent to the main content view in a flexible and user-friendly manner. This component is developed in Swift and is compatible with iOS 11.0 and above.

Features

FloatingPanel offers a wide array of features that make it an ideal choice for developers looking to create sophisticated interfaces:

• Simple Container View Controller: Easy to implement and manage within your app.
• Fluid Behavior Using Numeric Springing: Smooth and responsive movements that mimic natural physics.
• Scroll View Tracking: Keeps content in sync with user interactions.
• Multi-Panel Support: Ability to use more than one panel to display multiple pieces of information.
• Modal Presentation: Panels can be presented as overlays, blending seamlessly with other content.
• Flexible Positioning: Supports layouts in four positions—top, left, bottom, and right with various anchors like full, half, and tip.
• Compatibility Across Trait Environments: Optimized to work well in landscape orientations and other layout conditions.
• Composable UI Elements: Includes components like the surface, backdrop, and grabber handle.
• Objective-C Compatibility: Developers who prefer Objective-C are not left out.

Installation

Installing FloatingPanel in your project can be done via CocoaPods or Swift Package Manager. For CocoaPods, simply add pod 'FloatingPanel' to your Podfile. The Swift Package Manager guide can be followed here.

Getting Started

Adding a Floating Panel as a Child View Controller

Using FloatingPanel in your app involves creating a FloatingPanelController instance and integrating it within your view controller. Here is a basic setup:

import UIKit
import FloatingPanel

class ViewController: UIViewController, FloatingPanelControllerDelegate {
    var fpc: FloatingPanelController!

    override func viewDidLoad() {
        super.viewDidLoad()
        fpc = FloatingPanelController()
        fpc.delegate = self 
        let contentVC = ContentViewController()
        fpc.set(contentViewController: contentVC)
        fpc.track(scrollView: contentVC.tableView)
        fpc.addPanel(toParent: self)
    }
}

Presenting a Floating Panel Modally

FloatingPanel can also be used for modal presentations, which makes it appear over the current context:

let fpc = FloatingPanelController()
let contentVC = ...
fpc.set(contentViewController: contentVC)
fpc.isRemovalInteractionEnabled = true // Enables swipe-down removal
self.present(fpc, animated: true, completion: nil)

View Hierarchy and Usage

FloatingPanel maintains a distinct view hierarchy to organize elements such as the backdrop and the interactive surface. Developers have control over how and when these panels appear by utilizing methods to show and hide them flexibly, and to respond to user interactions or layout changes.

Customization Options

FloatingPanel is not just a functional tool but also a customizable one. Developers can control its appearance, behavior, and layout:

• Layout Customization: Use and define various layout states and anchors.
• Behavior Customization: Adjust how the panel responds to user interactions.
• Design Tweaks: Alter the appearance with custom shadows, corner radii, and background colors. Customize the grabber handle or substitute it with a completely custom design.
• Gesture Modifications: Add new gestures or suppress existing ones to fit the overall user experience design.

Examples

For practical implementation references, there are comprehensive examples mimicking the behavior seen in Apple Maps and Stocks apps, available in the FloatingPanel GitHub repository.

Conclusion

FloatingPanel is an excellent choice for developers wanting to implement interactive, visually appealing, and adaptable panels in their iOS applications. Its rich feature set and customization options make it a powerful tool for enhancing user experience in alignment with modern UI design standards.