Aiolos

Yet another iOS Floating Panel

Aiolos, ancient greek for quick-moving/nimble, is a Swift UI framework inspired by the floating panel, that was introduced to Maps app in iOS 11. Give it a try in MindNode 5 for iOS (free trial available).

It is fully gesture-driven, takes safe area insets into account, has support for right-to-left languages baked in and automatically reacts to the on-screen keyboard. Compared to many other open source panel solutions, Aiolos is designed to be an always-visible child view controller, and therefore does not use the custom view controller transition API of iOS.

Integration with Carthage

Add this line to your Cartfile.

github "IdeasOnCanvas/Aiolos"

Integration with Swift Package Manager

Aiolos can be integrated with Swift Package Manager directly within Xcode.

Usage in Code

There’s a demo app, that demonstrates how the Panel can be set up with a different configuration for iPhones and iPads.

func makePanel(with contentViewController: UIViewController) -> Panel {
    // create Panel with default configuration
    let configuration = Panel.Configuration.default
    let panelController = Panel(configuration: configuration)

    // specify, which ViewController is displayed in the panel
    panelController.contentViewController = contentViewController

    // setup delegates that handle size configuration and animation callbacks
    panelController.sizeDelegate = self
    panelController.animationDelegate = self

    // change the configuration to fit you needs
    panelController.configuration.position = self.panelPosition(for: self.traitCollection)
    panelController.configuration.margins = self.panelMargins(for: self.traitCollection)
    panelController.configuration.appearance.separatorColor = .white

    // we want a different look/behaviour on iPhone compared to iPad
    if self.traitCollection.userInterfaceIdiom == .pad {
        panelController.configuration.appearance.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner]
    } else {
        panelController.configuration.supportedModes = [.minimal, .compact, .expanded, .fullHeight]
        panelController.configuration.appearance.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    }

    return panelController
}

Configuring the size

extension ViewController: PanelSizeDelegate {

    func panel(_ panel: Panel, sizeForMode mode: Panel.Configuration.Mode) -> CGSize {
        let width = self.panelWidth(for: self.traitCollection, position: panel.configuration.position)
        switch mode {
        case .minimal:
            return CGSize(width: width, height: 0.0)
        case .compact:
            return CGSize(width: width, height: 64.0)
        case .expanded:
            let height: CGFloat = self.traitCollection.userInterfaceIdiom == .phone ? 270.0 : 320.0
            return CGSize(width: width, height: height)
        case .fullHeight:
            return CGSize(width: width, height: 0.0)
        }
    }
}

Reacting to Panel animations

extension ViewController: PanelAnimationDelegate {

    func panel(_ panel: Panel, willTransitionTo size: CGSize) {
        print("Panel will transition to size \(size)")
    }

    func panel(_ panel: Panel, willTransitionFrom oldMode: Panel.Configuration.Mode?, to newMode: Panel.Configuration.Mode, with coordinator: PanelTransitionCoordinator) {
        print("Panel will transition from \(oldMode) to \(newMode)")
        // we can animate things along the way
        coordinator.animateAlongsideTransition({
            print("Animating alongside of panel transition")
        }, completion: { animationPosition in
            print("Completed panel transition to \(newMode)")
        })
    }
}

Credits

Aiolos is brought to you by IdeasOnCanvas GmbH, the creator of MindNode for iOS, macOS & watchOS