Top Related Projects
iOS 7/8 style side menu with parallax effect.
A lightweight, easy to use, Side Drawer Navigation Controller
PKRevealController is a delightful view controller container for iOS, enabling you to present multiple controllers on top of one another.
A UIViewController subclass for presenting side view controllers inspired on the FaceBook and Wunderlist apps, done right !
iOS Slide Menu View based on Google+, iQON, Feedly, Ameba iOS app. It is written in pure swift.
Quick Overview
JVFloatingDrawer is an iOS library that provides a customizable floating drawer interface. It allows developers to create a drawer-like UI component that can be pulled up from the bottom of the screen, similar to the Apple Maps app or many ride-sharing applications.
Pros
- Easy to integrate into existing iOS projects
- Highly customizable appearance and behavior
- Smooth animations and gestures for a polished user experience
- Compatible with both Swift and Objective-C
Cons
- Limited documentation and examples
- Not actively maintained (last update was several years ago)
- May require additional work to ensure compatibility with the latest iOS versions
- Lacks some advanced features found in more comprehensive libraries
Code Examples
- Creating a basic floating drawer:
let drawer = JVFloatingDrawerSpringAnimator(presentedViewController: contentViewController, presentingViewController: self, drawer: .bottom)
drawer.openHeightBehavior = .fixed(height: 300)
drawer.dismissesOppositeDrawer = true
- Customizing the drawer appearance:
drawer.cornerRadius = 20
drawer.backgroundColor = .white
drawer.shadowOpacity = 0.3
drawer.shadowRadius = 10
- Adding a handle to the drawer:
let handle = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 5))
handle.backgroundColor = .lightGray
handle.layer.cornerRadius = 2.5
drawer.addHandle(handle)
- Implementing drawer delegate methods:
extension YourViewController: JVFloatingDrawerDelegate {
func drawerWillOpen(_ drawer: JVFloatingDrawerViewController) {
print("Drawer will open")
}
func drawerDidClose(_ drawer: JVFloatingDrawerViewController) {
print("Drawer did close")
}
}
Getting Started
- Add JVFloatingDrawer to your project using CocoaPods:
pod 'JVFloatingDrawer'
- Import the library in your Swift file:
import JVFloatingDrawer
- Create a drawer instance and present it:
let contentVC = YourContentViewController()
let drawer = JVFloatingDrawerSpringAnimator(presentedViewController: contentVC, presentingViewController: self, drawer: .bottom)
drawer.openHeightBehavior = .fixed(height: 300)
present(drawer, animated: true, completion: nil)
- Customize the drawer as needed using the available properties and methods.
Competitor Comparisons
iOS 7/8 style side menu with parallax effect.
Pros of RESideMenu
- More customizable appearance with options for background image and blur effects
- Supports both left and right side menus
- Includes built-in animations for menu transitions
Cons of RESideMenu
- Less flexible in terms of drawer positioning (limited to left/right sides)
- May have a steeper learning curve due to more complex implementation
Code Comparison
RESideMenu:
RESideMenu *sideMenu = [[RESideMenu alloc] initWithContentViewController:contentViewController
leftMenuViewController:leftMenuViewController
rightMenuViewController:rightMenuViewController];
self.window.rootViewController = sideMenu;
JVFloatingDrawer:
JVFloatingDrawerViewController *drawerViewController = [JVFloatingDrawerViewController new];
drawerViewController.leftViewController = leftViewController;
drawerViewController.centerViewController = centerViewController;
self.window.rootViewController = drawerViewController;
Both libraries offer similar functionality for creating side menus or drawers in iOS applications. RESideMenu provides more built-in customization options and animations, while JVFloatingDrawer offers a simpler implementation and potentially more flexibility in drawer positioning. The choice between the two depends on specific project requirements and desired user experience.
A lightweight, easy to use, Side Drawer Navigation Controller
Pros of MMDrawerController
- More comprehensive and feature-rich, offering additional customization options
- Better documentation and examples, making it easier for developers to implement
- Actively maintained with regular updates and bug fixes
Cons of MMDrawerController
- Larger codebase, potentially increasing app size and complexity
- Steeper learning curve due to more advanced features and options
- May be overkill for simple drawer implementations
Code Comparison
MMDrawerController:
MMDrawerController *drawerController = [[MMDrawerController alloc]
initWithCenterViewController:centerViewController
leftDrawerViewController:leftDrawerViewController
rightDrawerViewController:rightDrawerViewController];
[drawerController setMaximumLeftDrawerWidth:260.0];
[drawerController setOpenDrawerGestureModeMask:MMOpenDrawerGestureModeAll];
[drawerController setCloseDrawerGestureModeMask:MMCloseDrawerGestureModeAll];
JVFloatingDrawer:
JVFloatingDrawerViewController *drawerViewController = [JVFloatingDrawerViewController new];
drawerViewController.leftViewController = leftViewController;
drawerViewController.centerViewController = centerViewController;
drawerViewController.rightViewController = rightViewController;
[self presentViewController:drawerViewController animated:YES completion:nil];
Both libraries provide similar functionality for implementing drawer navigation, but MMDrawerController offers more advanced features and customization options at the cost of increased complexity. JVFloatingDrawer is simpler and easier to implement for basic drawer functionality.
PKRevealController is a delightful view controller container for iOS, enabling you to present multiple controllers on top of one another.
Pros of PKRevealController
- More customizable with options for left and right side panels
- Supports both sliding and parallax effects for reveal animations
- Better documentation and example project included
Cons of PKRevealController
- Less frequently updated (last update in 2017)
- More complex implementation due to additional features
- Requires more setup code compared to JVFloatingDrawer
Code Comparison
PKRevealController:
let frontViewController = UIViewController()
let leftViewController = UIViewController()
let revealController = PKRevealController(frontViewController: frontViewController, leftViewController: leftViewController)
JVFloatingDrawer:
let drawerViewController = UIViewController()
let mainViewController = UIViewController()
let drawerController = JVFloatingDrawerViewController()
drawerController.leftDrawerViewController = drawerViewController
drawerController.centerViewController = mainViewController
Both libraries provide similar functionality for creating sliding drawer interfaces in iOS applications. PKRevealController offers more customization options and animation styles, but comes with increased complexity. JVFloatingDrawer, while simpler to implement, has fewer features and customization options. The choice between the two depends on the specific requirements of your project and the level of control you need over the drawer behavior.
A UIViewController subclass for presenting side view controllers inspired on the FaceBook and Wunderlist apps, done right !
Pros of SWRevealViewController
- More mature and widely adopted, with a larger community and better documentation
- Supports both left and right side menus, as well as rear views
- Offers more customization options and configuration settings
Cons of SWRevealViewController
- Heavier and more complex implementation, which may be overkill for simpler projects
- Less modern UI design, as it follows a more traditional side menu pattern
- Requires more setup and configuration to get started
Code Comparison
SWRevealViewController:
SWRevealViewController *revealViewController = self.revealViewController;
if (revealViewController) {
[self.sidebarButton setTarget: self.revealViewController];
[self.sidebarButton setAction: @selector(revealToggle:)];
[self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];
}
JVFloatingDrawer:
let drawerController = JVFloatingDrawerViewController()
drawerController.leftViewController = leftViewController
drawerController.centerViewController = centerViewController
self.window?.rootViewController = drawerController
SWRevealViewController offers more built-in functionality but requires more setup code, while JVFloatingDrawer provides a simpler, more modern implementation with less initial configuration. The choice between the two depends on the specific project requirements and desired user interface style.
iOS Slide Menu View based on Google+, iQON, Feedly, Ameba iOS app. It is written in pure swift.
Pros of SlideMenuControllerSwift
- Written in Swift, providing better performance and type safety
- Supports both left and right side menus
- Customizable animation and gesture options
Cons of SlideMenuControllerSwift
- Less flexible in terms of drawer positioning (limited to left and right sides)
- May require more setup and configuration compared to JVFloatingDrawer
Code Comparison
SlideMenuControllerSwift:
let slideMenuController = SlideMenuController(mainViewController: mainViewController, leftMenuViewController: leftViewController, rightMenuViewController: rightViewController)
self.window?.rootViewController = slideMenuController
self.window?.makeKeyAndVisible()
JVFloatingDrawer:
JVFloatingDrawerSpringAnimator *animator = [[JVFloatingDrawerSpringAnimator alloc] init];
JVFloatingDrawerViewController *drawerViewController = [[JVFloatingDrawerViewController alloc] initWithAnimator:animator];
[drawerViewController setDrawerViewController:leftViewController forSide:JVFloatingDrawerSideLeft];
SlideMenuControllerSwift offers a more modern Swift implementation with built-in support for both left and right menus. It provides customizable animations and gestures but may be less flexible in drawer positioning compared to JVFloatingDrawer. JVFloatingDrawer, written in Objective-C, offers more flexibility in drawer placement but may require more manual setup. The code comparison shows that SlideMenuControllerSwift has a slightly simpler initialization process, while JVFloatingDrawer allows for more granular control over the drawer setup and animation.
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
JVFloatingDrawer
JVFloatingDrawer is a floating style drawer navigation. There is a growing number of applications leveraging the drawer pattern. Most share a similar look and feel. With JVFloatingDrawer we aimed to bring a facelift to the conventional setup.
Usage
JVFloatingDrawer is very easy to use. Below is all that is needed to get going.
JVFloatingDrawerViewController *drawerViewController = [[JVFloatingDrawerViewController alloc] init];
// Assign to your own view controllers
drawerViewController.leftViewController = leftDrawerViewController;
drawerViewController.rightViewController = rightDrawerViewController;
drawerViewController.centerViewController = centerViewController;
self.drawerViewController.backgroundImage = [UIImage imageNamed:@"background-image-example.jpg"];
drawerViewController.animator = [[JVFloatingDrawerSpringAnimator alloc] init];
To see an example implementation of this run the example project. Clone the repo, run pod install
from the Example directory, and open up Example/JVFloatingDrawer.xcworkspace
.
Installation
JVFloatingDrawer is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "JVFloatingDrawer"
How it Works
JVFloatingDrawer is split up into several extensible components that communicate with each other.
JVFloatingDrawerViewController
The JVFloatingDrawerViewController
maintains references to a center, left, and/or right UIViewController
object. The centerViewController
can be replaced simply by reassigning it to a different view controller. The same goes for the leftViewController
and rightViewController
.
Opening and Closing the Drawer
JVFloatingDrawerViewController
is where you open, close, and toggle your side drawers.
- (void)openDrawerWithSide:(JVFloatingDrawerSide)drawerSide animated:(BOOL)animated
completion:(void(^)(BOOL finished))completion;
- (void)closeDrawerWithSide:(JVFloatingDrawerSide)drawerSide animated:(BOOL)animated
completion:(void(^)(BOOL finished))completion;
- (void)toggleDrawerWithSide:(JVFloatingDrawerSide)drawerSide animated:(BOOL)animated
completion:(void(^)(BOOL finished))completion;
Drawer Widths
You can also customize the leftDrawerWidth
and rightDrawerWidth
by setting these properties.
Background Image
The background image is set by assigning the backgroundImage
property.
Animators
Animators are the main players of JVFloatingDrawer
. JVFloatingDrawer
comes with a prebuilt spring animator that can be customized by settings its animationDuration
, animationDelay
, springDamping
, and initialSpringVelocity
. After instantiating a new animator object you assign it to the animator
property on the JVFloatingDrawerViewController
to let it work its magic. You can make your own animators by implementing the JVFloatingDrawerAnimation
protocol. More on that later.
JVFloatingDrawerView
JVFloatingDrawerView
is an internal class that you will not have to deal with as a user. It's tasked with laying out the drawer via autolayout constraints. It handles decorations like the shadow and rounded corners you see around the center view controller. Each view controller (center, left, and right) of the JVFloatingDrawerViewController
are wrapped in UIView
containers. This is how we support swapping drawers.
Creating Your Own Animators
The JVFloatingDrawerSpringAnimator
class is a featured animator for you to use. If you want to create your own however, it's easy. All animators adhere to the JVFloatingDrawerAnimation
protocol. JVFloatingDrawerAnimation
has two required methods presentation and dismissal:
Presentation
- (void)presentationWithSide:(JVFloatingDrawerSide)drawerSide sideView:(UIView *)sideView centerView:(UIView *)centerView animated:(BOOL)animated completion:(void(^)(BOOL finished))completion
Given a drawer side, the containing side view, and the containing center view, implementations must bring the side view on screen. If the drawerSide
is equal to JVFloatingDrawerSideLeft
the view will be left-adjacent to the centerView
. If the drawerSide
is equal to JVFloatingDrawerSideRight
the view will be right-adjacent to the centerView
. You have complete control over how you do this. I used view transforms in my implementation and called UIView
's -animateWithDuration:delay:usingSpringWithDamping:...
. Technically, you don't even have to make it floating. You could copy the traditional drawer slide-in style if you like. Finally, implementations must react accordingly if the user wants this animated or not via the animated
flag, and then call the completion
block at the end.
Dismissal
- (void)dismissWithSide:(JVFloatingDrawerSide)drawerSide sideView:(UIView *)sideView centerView:(UIView *)centerView animated:(BOOL)animated completion:(void(^)(BOOL finished))completion
Dismissal is the exact same as presentation except it needs to be able to get the current position of the open drawer and move it off screen. Again, how you do this is up to you.
Optional Methods
- (void)willRotateOpenDrawerWithOpenSide:(JVFloatingDrawerSide)drawerSide sideView:(UIView *)sideView centerView:(UIView *)centerView
- (void)didRotateOpenDrawerWithOpenSide:(JVFloatingDrawerSide)drawerSide sideView:(UIView *)sideView centerView:(UIView *)centerView
-willRotateOpenDrawerWithOpenSide:sideView:centerView
is invoked right before a device orientation change so the animator can handle it. -didRotateOpenDrawerWithOpenSide:sideView:centerView
is invoked right after. The JVFloatingDrawerSpringAnimator
only implements -didRotateOpenDrawerWithOpenSide:sideView:centerView
and calls the same code as -presentationWithSide:sideView:centerView:animated:completion:
in it.
Author
Julian Villella
License
JVFloatingDrawer is available under the MIT license. See the LICENSE file for more info.
Top Related Projects
iOS 7/8 style side menu with parallax effect.
A lightweight, easy to use, Side Drawer Navigation Controller
PKRevealController is a delightful view controller container for iOS, enabling you to present multiple controllers on top of one another.
A UIViewController subclass for presenting side view controllers inspired on the FaceBook and Wunderlist apps, done right !
iOS Slide Menu View based on Google+, iQON, Feedly, Ameba iOS app. It is written in pure 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