Panels is a framework to easily add sliding panels to your application

Overview

Build Status Carthage compatible CocoaPods Platform Language

Twitter

Panels is a framework to easily add sliding panels to your application. It takes care of the safe area in new devices and moving your panel when the keyboard is presented/dismissed.

Updated to Swift 5.1

Sliding Panel demo1 Sliding Panel demo2 Sliding Panel demo3

Usage

First, create your own panel, you can use Interface Builder, use as reference the examples provided. Make sure that you conform the protocol Panelable

import UIKit
import Panels

class PanelOptions: UIViewController, Panelable {
    @IBOutlet var headerHeight: NSLayoutConstraint!
    @IBOutlet var headerPanel: UIView!
}

This protocol defines the interface needed to be able to adjust the sliding panel to the container, expanding and collapsing. It will take care of the safe area

Then in your ViewController, where the panel is presented:

class YourViewController: UIViewController {
    lazy var panelManager = Panels(target: self)
    override func viewDidLoad() {
        super.viewDidLoad()
        let panel = UIStoryboard.instantiatePanel(identifier: "YourPanelName")
        let panelConfiguration = PanelConfiguration(size: .oneThird)
        
        // To present the panel
        panelManager.show(panel: panel, config: panelConfiguration)
        ....
        // To dismiss the panel
        panelManager.dismiss()
    }
}

If you want to get notifications when the panel is presented, collapsed or expanded, just conform the protocol PanelNotifications

You can find extra options in the PanelConfiguration object:

    /// Storyboard name, the first Viewcontroller will be instantiated
    public var panelName: String

    /// Panel height
    public var panelSize: PanelDimensions

    /// Panel margins between the header and the next views.
    public var panelMargin: CGFloat

    /// Visible area when the panel is collapsed
    public var panelVisibleArea: CGFloat

    /// Safe area is avoided if this flag is true.
    public var useSafeArea = true

    /// Collapse and expand when tapping the header view.
    public var respondToTap = true

    /// Collapse and expand when dragging the header view.
    public var respondToDrag = true

    /// Collapse when tapping outside the panel
    public var closeOutsideTap = true

    /// Animate the panel when the superview is shown.
    public var animateEntry = false

    /// If parent view is a navigationcontroller child, this flag allow a better calculation when the panelSize is .fullScreen
    public var enclosedNavigationBar = true

You could add an arrow indicator to give more feedback to your panels. The perfect companion for Panels is Arrows

Arrows Example

Installation

CocoaPods

Add the line pod "Panels" to your Podfile

Carthage

Add the line github "antoniocasero/Panels" to your Cartfile

SPM

dependencies: [
  .package(url: "https://github.com/antoniocasero/Panels.git", from: "2.2.3")
]

Author

Project created by Antonio Casero (@acaserop on Twitter).

Credits

Sketch UI (Elements)

Comments
  • Panel reopens after being dismissed

    Panel reopens after being dismissed

    I have created a Panel and when it is called I call the show function on the panel. Everything works fine here.

    lazy var panelManager = Panels(target: self)
    let panel = UIStoryboard.instantiatePanel(identifier: "Timer")
    var panelConfiguration = PanelConfiguration(size: .custom(230))
    panelConfiguration.animateEntry = true
    panelConfiguration.useSafeArea = false
    panelConfiguration.respondToDrag = true
    panelConfiguration.respondToTap = false
    self.panelManager.show(panel: panel, config: panelConfiguration)
    

    My issue arrises when I try to dismiss the panel using the panelManager. self.panelManager.dismiss() I'm calling the dismiss function when I Post to NotificationCenter that the timer was stopped. I'm using the PanelNotification to see when it is presented to begin observing when the timer will be stopped.

        func panelDidPresented() {
            isPannelOpen = true
            panelDismissed = false
            NotificationCenter.default.post(name: .CurrentSession, object: nil, userInfo: ["sessionInterval": sessionInterval,
                                                                                           "sessionClientName": sessionClientName])
            NotificationCenter.default.addObserver(self, selector: #selector(timeLeft(notification:)), name: .TimeLeft, object: nil)
            NotificationCenter.default.addObserver(self, selector: #selector(stopTimer(notification:)), name: .StopTimer, object: nil)
    
            print("Did present")
        }
    
        @objc func stopTimer(notification: Notification) {
            self.panelManager.dismiss()
            self.timer?.invalidate()
            self.timer = nil
            NotificationCenter.default.removeObserver(self, name: .TimeLeft, object: nil)
            NotificationCenter.default.removeObserver(self, name: .StopTimer, object: nil)
            NotificationCenter.default.removeObserver(TimerViewController(), name: .CurrentSession, object: nil)
        }
    

    Initially it works and the panel will be dismissed, but when I scroll up or down on the table view... weirdgrandioseghostshrimp-size_restricted

    I can't seem to figure out how to stop it from doing this. Does using NotificationCenter not work well with Panels?

    opened by JordanCoin 7
  • HeaderHeight calculation pushes Header further down with each show

    HeaderHeight calculation pushes Header further down with each show

    The premise is relatively simple, looking at https://github.com/antoniocasero/Panels/blob/master/Sources/Panels.swift#L50 the safeAreaBottom is added to the PanelHeightConstraint every time show is being executed.

    Now in my specific use case, I instantiate the Panelable VC with my parent VC and only show the Panel on didSelect, I dismiss it on didDeselect. With this behavior, the headerHeigh grows every time I execute show which ends up pushing my header further down each time. The examples show the same behavior (although, it's constraints break and recovery recovers the correct constraints).

    bug 
    opened by caffeineflo 7
  • 2nd time dismiss animation works but panel stay

    2nd time dismiss animation works but panel stay

    Panel

    1. Show
    2. Dismiss
    3. Show
    4. Dismiss (Here after dismiss animation, panel stay remain on visible position )

    Any help?

    Below is my code, took latest from pods (2.0.3)

                if self.currentPanel != nil {
                    panelManager?.dismiss()
                    self.currentPanel = nil
                } else {
                    currentPanel = UIStoryboard.instantiatePanel(identifier: "PanelOptions")
                    var panelConfiguration = PanelConfiguration(size: .custom(200))
                    panelConfiguration.panelVisibleArea = 30
                    
                    panelManager?.show(panel: currentPanel as! UIViewController & Panelable, config: panelConfiguration)
                }
    
    opened by deshan 4
  • crash when running on real device

    crash when running on real device

    Hi, I installed the panels pod and setup all the necessary code, then i launched the app on the simulator and everything works like a charm, but when i try to run on a real device the app crashs with the next error:

    dyld: Library not loaded: @rpath/Panels.framework/Panels Referenced from: /private/var/containers/Bundle/Application/4CA47637-BDFB-4473-9305-729F57C14B4A/Metro Sahel.app/Metro Sahel Reason: no suitable image found. Did find: /private/var/containers/Bundle/Application/4CA47637-BDFB-4473-9305-729F57C14B4A/Metro Sahel.app/Frameworks/Panels.framework/Panels: code signature invalid for '/private/var/containers/Bundle/Application/4CA47637-BDFB-4473-9305-729F57C14B4A/Metro Sahel.app/Frameworks/Panels.framework/Panels'

    Capture d’écran 2020-03-05 à 11 24 28 PM

    Xcode version : 11.3.1 Device used: iPhone 7 Plus / iOS 13.3.1

    opened by AmineNac 2
  • Example app crashes if you tap

    Example app crashes if you tap "Close" twice

    The example app crashes while unwrapping an optional if you open the "Material" example, then open the panel and tap Close a few times.

    movePanel(value:keyboard:completion:)

    panelHeightConstraint!.constant = value
    Thread 1: Fatal error: Unexpectedly found nil while unwrapping an Optional value
    
    opened by julianschiavo 2
  • Ensure present/expand/collapse events fire after animation

    Ensure present/expand/collapse events fire after animation

    Thanks for a great and simple library!

    I needed to do some UI work after the animation of collapse/expand completes, but noticed it was not behaving as expected. So I moved the events within the completion handler to make sure those events are passed onto me only after the animation completes.

    opened by basememara 1
  • UITextField will cause the panel to collapse

    UITextField will cause the panel to collapse

    Hi, As the title said when I trying to select the UITextField in the panel. It will collapse to the button. Is there any settings can prevent this situation? Thanks.

    opened by laolarou726 1
  • 'NSInvalidArgumentException

    'NSInvalidArgumentException

    Followed all the steps and the demo project. But whenever I try call panel view controller, ti gives me the following errors Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UIView constant]: unrecognized selector sent to instance.

    opened by jarrarhaider 0
  • Specify a platform for this target in Example Podfile

    Specify a platform for this target in Example Podfile

    $ pod install
    
    ...
    
    [!] Automatically assigning platform `ios` with version `11.2` on target `Panels_Example` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
    
    opened by ykws 0
  • keyboard present and Penel moves up with the keyboard

    keyboard present and Penel moves up with the keyboard

    Hi I am getting this behavior when a panel is present and the keyboard is opened. Penel moves up and fits the keyboard top(below picture). How to stop this behavior? I have tried keyboard observer too but no success yet. conf.keyboardObserver = false Thanks for this nice library.

    IMG_475D92C76697-1

    opened by deshan 0
  • Drag gesture doesn't follow the movement

    Drag gesture doesn't follow the movement

    Hi, great project to reproduce Android bottom sheets. It would be great to have a drag gesture that follow the movement, not just a toggle up/down. Best.

    enhancement 
    opened by appcornerit 2
Releases(2.2.3)
Owner
Antonio Casero
Software Engineer
Antonio Casero
You can easily add awesome animated context menu to your app.

Context-Menu.iOS You can easily add awesome animated context menu to your app. Made in Check this [project on dribbble] (https://dribbble.com/shots/17

Yalantis 1.8k Sep 13, 2022
SwiftySideMenu is a lightweight and easy to use side menu controller to add left menu and center view controllers with scale animation based on Pop framework.

SwiftySideMenu SwiftySideMenu is a lightweight, fully customizable, and easy to use controller to add left menu and center view controllers with scale

Hossam Ghareeb 84 Feb 4, 2022
Simple side/slide menu control for iOS, no code necessary! Lots of customization. Add it to your project in 5 minutes or less.

▤ SideMenu If you like SideMenu, give it a ★ at the top right of this page. SideMenu needs your help! If you're a skilled iOS developer and want to he

Jon Kent 5.4k Sep 22, 2022
BottomSheet lets you add custom bottom sheets to your SwiftUI apps.

BottomSheet lets you add custom bottom sheets to your SwiftUI apps.

Daniel Saidi 163 Sep 16, 2022
slider view for choosing categories. add any UIView type as category item view. Fully customisable

CategorySliderView Horizontal or vertical slider view for choosing categories. Add any UIView type as category item view. Fully customisable Demo Inst

Cem Olcay 354 Mar 22, 2022
XLPagerTabStrip is a Container View Controller that allows us to switch easily among a collection of view controllers

XLPagerTabStrip is a Container View Controller that allows us to switch easily among a collection of view controllers. Pan gesture can be used to move on to next or previous view controller. It shows a interactive indicator of the current, previous, next child view controllers.

xmartlabs 6.8k Sep 19, 2022
Easily create dragabble menu with SwiftUI

SwiftUIDragMenu Easily create dragabble menu The gifs are not very good quality. Content is fluid. Sorry for this :( How to install this package Open

Mehmet ateş 0 Jul 2, 2022
📷A simple and convenient way to manage your webcam's picture settings, right from your menu bar

Viewfinder A simple and convenient way to manage your webcam's picture settings, right from your menu bar. About • Download • Building from Source • C

Lukas Romsicki 22 Sep 20, 2022
a simple macOS menu bar application that shows you the lyrics of current playing spotify track.

lyricsify a simple macOS menu bar application that shows you the lyrics of current playing spotify track.

Krisna Pranav 4 Sep 16, 2021
Mac menu bar tool to view the architecture of the running application

Silicon Info About Silicon Info is a tiny menu bar application allows the user to quickly view the architecture of the currently running application.

William Castelli (Billy) 254 Sep 8, 2022
Alejandro Piguave 9 Aug 15, 2022
Push Hero - pure Swift native macOS application to test push notifications

Dropdowns ❤️ Support my app ❤️ Push Hero - pure Swift native macOS application to test push notifications Quick Access - Organise files in the Mac men

Khoa 306 Sep 22, 2022
Weather Dock is a MacOS headless application that shows popover view under the menu bar with weather info.

Weather Dock Weather forecast in MacOS menu bar Weather Dock is a MacOS headless application that shows popover view under the menu bar with weather i

Alexander Stepanischev 4 Aug 22, 2022
An easy to use and setup floating view for your app. 🎡

HHFloatingView An easy to use and setup floating view for your app. ?? Installation Manually - Add HHFloatingView/Source folder to your Project. And y

Hemang 95 Jul 31, 2022
Library provides easy to implement variation of Android (Material Design) Floating Action Button for iOS. You can use it as your app small side menu. 🌶

RHSideButtons ?? Library provides easy to implement variation of Android (Material Design) Floating Action Button for iOS. You can use it as your app

Robert Herdzik 166 May 3, 2022
Custom transition between controllers. Settings controller for your iOS app.

SPLarkController About Transition between controllers to top. You can change animatable height after presentation controller. For presentation and dis

Ivan Vorobei 967 Sep 18, 2022
Barber lives in your macOS menu bar and keeps track of what needs to be updated.

Barber Barber is a macOS application to keep track of application updates easily. It lives in your menu bar, and uses homebrew to determine what's out

Max Ainatchi 1 Nov 30, 2021
Control your display's brightness from the macOS menu bar. Simple and easy to use.

MonitorControl Lite Control your display's brightness from the macOS menu bar. Simple and easy to use. About MonitorControl Lite is a simplified versi

null 51 Sep 19, 2022
Check load of each core of CPU on your Mac menu bar.

Gaufre Gaufre ?? is the app for checking load of each core of CPU on your Mac menu bar. The application name was decided to be Gaufre, derived from si

null 4 Jun 26, 2022