Top Related Projects
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion
Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
Animated side menu with customizable UI
:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion
Quick Overview
Context-Menu.iOS is a customizable and easy-to-use context menu for iOS applications. It provides a sleek, animated circular menu that can be triggered by long-press gestures, offering a unique and intuitive way to present additional options to users.
Pros
- Highly customizable appearance and behavior
- Smooth animations and intuitive user interaction
- Easy integration with existing iOS projects
- Supports both Swift and Objective-C
Cons
- Limited to circular menu layout
- May not fit all app design aesthetics
- Requires iOS 8.0 or later
- Not actively maintained (last update was in 2017)
Code Examples
- Creating a basic context menu:
let menuController = ContextMenuController(menuItems: [
ContextMenuItem(title: "Like", image: UIImage(named: "like")),
ContextMenuItem(title: "Share", image: UIImage(named: "share")),
ContextMenuItem(title: "Delete", image: UIImage(named: "delete"))
])
- Customizing the menu appearance:
menuController.menuItemSize = CGSize(width: 65, height: 65)
menuController.menuItemBackgroundColor = .white
menuController.menuItemsSpacing = 10
- Implementing the delegate method to handle item selection:
extension YourViewController: ContextMenuDelegate {
func contextMenuDidSelect(_ contextMenu: ContextMenuController, cell: ContextMenuCell, targetedView: UIView, didSelect item: ContextMenuItem, forRowAt index: Int) {
switch item.title {
case "Like":
// Handle like action
case "Share":
// Handle share action
case "Delete":
// Handle delete action
default:
break
}
}
}
Getting Started
-
Install via CocoaPods by adding to your Podfile:
pod 'ContextMenu.iOS'
-
Import the module in your Swift file:
import ContextMenu_iOS
-
Create a
ContextMenuController
instance and set up your menu items:let menuController = ContextMenuController(menuItems: [ ContextMenuItem(title: "Option 1", image: UIImage(named: "option1")), ContextMenuItem(title: "Option 2", image: UIImage(named: "option2")) ]) menuController.delegate = self
-
Present the menu when needed:
menuController.showInView(self.view, targetedView: sender)
-
Implement the
ContextMenuDelegate
protocol to handle item selection.
Competitor Comparisons
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion
Pros of circle-menu
- More visually appealing with circular animation
- Supports both Swift and Objective-C
- Customizable menu items with icons and colors
Cons of circle-menu
- Limited to circular layout, less flexible than Context-Menu.iOS
- May require more screen space for proper display
- Less actively maintained (last update 3 years ago)
Code Comparison
Context-Menu.iOS:
let menuController = ContextMenuController()
menuController.menuItems = [
ContextMenuItem(title: "Like", image: UIImage(named: "like")),
ContextMenuItem(title: "Share", image: UIImage(named: "share"))
]
menuController.showInView(self.view, atLocation: touchPoint)
circle-menu:
let items = [
CircleMenuItem(icon: UIImage(named: "home")),
CircleMenuItem(icon: UIImage(named: "search")),
CircleMenuItem(icon: UIImage(named: "settings"))
]
let circleMenu = CircleMenu(
frame: self.view.bounds,
normalIcon: "icon_menu",
selectedIcon: "icon_close",
buttonsCount: 3,
duration: 4,
distance: 120,
showDelay: 0.1
)
circleMenu.delegate = self
self.view.addSubview(circleMenu)
Both libraries offer easy-to-implement menu solutions for iOS apps. Context-Menu.iOS provides a more traditional context menu style with flexible positioning, while circle-menu offers a unique circular animation that can enhance the visual appeal of an app. The choice between the two depends on the specific design requirements and desired user experience of the application.
Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
Pros of GuillotineMenu
- Unique and visually striking animation for menu transitions
- Customizable appearance and behavior
- Supports both portrait and landscape orientations
Cons of GuillotineMenu
- Limited to a specific menu style, less versatile than Context-Menu.iOS
- May not fit all app designs or user experience requirements
- Potentially more complex to implement and customize
Code Comparison
GuillotineMenu:
let menuButton = UIButton()
let guillotineMenu = GuillotineMenu(menuButton: menuButton)
guillotineMenu.delegate = self
view.addSubview(guillotineMenu)
Context-Menu.iOS:
let menuView = ContextMenuView(frame: view.bounds)
menuView.delegate = self
menuView.dataSource = self
view.addSubview(menuView)
Both libraries offer easy-to-use APIs for implementing their respective menu styles. GuillotineMenu focuses on a specific animation and menu type, while Context-Menu.iOS provides a more flexible framework for creating various context menu styles.
GuillotineMenu is ideal for apps seeking a unique and eye-catching menu animation, particularly suited for navigation menus or app settings. Context-Menu.iOS, on the other hand, offers greater versatility and is better suited for traditional context menus throughout an app.
The choice between these libraries depends on the specific design requirements and user experience goals of your iOS application.
Animated side menu with customizable UI
Pros of Side-Menu.iOS
- Provides a customizable side menu with smooth animations
- Supports both left and right side menu configurations
- Easy to integrate with existing iOS projects
Cons of Side-Menu.iOS
- Limited to side menu functionality, less versatile than Context-Menu.iOS
- May require more screen space, potentially impacting overall UI design
Code Comparison
Side-Menu.iOS:
let menuLeftNavigationController = UISideMenuNavigationController(rootViewController: YourViewController)
SideMenuManager.default.leftMenuNavigationController = menuLeftNavigationController
SideMenuManager.default.addPanGestureToPresent(toView: self.navigationController!.navigationBar)
Context-Menu.iOS:
let menuController = ContextMenuController()
menuController.menuItems = [MenuItem]()
menuController.settings = ContextMenuSettings()
view.addSubview(menuController.view)
Both libraries offer easy-to-use APIs for implementing their respective menu types. Side-Menu.iOS focuses on creating and managing side menus, while Context-Menu.iOS provides more flexibility for creating context-specific menus that can be placed anywhere in the UI.
Side-Menu.iOS is better suited for apps requiring a traditional navigation drawer, while Context-Menu.iOS offers more versatility for various menu types and placements within the app interface.
:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
Pros of folding-cell
- More visually appealing and interactive UI element
- Provides a unique way to expand and collapse content
- Suitable for various use cases like lists, cards, and menus
Cons of folding-cell
- More complex implementation compared to Context-Menu.iOS
- May require more customization for specific design needs
- Potentially higher performance impact due to animations
Code Comparison
folding-cell:
let cell = FoldingCell()
cell.itemCount = 4
cell.delegate = self
cell.foregroundView = customView
cell.containerView = containerView
Context-Menu.iOS:
let menuController = ContextMenuController()
menuController.menuItems = [MenuItem]()
menuController.delegate = self
menuController.showInView(self.view, atLocation: point)
Both libraries offer unique UI components for iOS applications. folding-cell provides an innovative folding animation for expanding and collapsing content, making it suitable for creating visually appealing lists or cards. Context-Menu.iOS, on the other hand, focuses on creating customizable context menus with various animations.
While folding-cell offers a more distinctive and eye-catching UI element, it may require more effort to implement and customize. Context-Menu.iOS provides a simpler solution for adding context menus to your app, but with less visual impact.
The choice between these libraries depends on your specific UI requirements and the level of customization you need for your iOS application.
:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion
Pros of expanding-collection
- More visually appealing and interactive UI with expanding cards
- Supports both portrait and landscape orientations
- Includes a demo app for easy implementation and testing
Cons of expanding-collection
- More complex implementation compared to Context-Menu.iOS
- Limited to collection view-based interfaces
- May require more customization for specific use cases
Code Comparison
expanding-collection:
let expandingCollection = ExpandingViewController(collectionViewLayout: CustomCollectionViewFlowLayout())
expandingCollection.itemSize = CGSize(width: 256, height: 335)
expandingCollection.collectionView?.backgroundColor = .black
navigationController?.pushViewController(expandingCollection, animated: true)
Context-Menu.iOS:
let menuController = ContextMenuController(menuItems: [.photoLibrary, .camera, .location])
menuController.delegate = self
menuController.presentInViewController(self, animated: true)
Both repositories offer unique UI components for iOS applications. expanding-collection provides a more visually rich and interactive experience with expanding cards, while Context-Menu.iOS focuses on a simpler context menu implementation. The choice between the two depends on the specific requirements of your project and the desired user experience.
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
Context-Menu.iOS
You can easily add awesome animated context menu to your app.
Check this [project on dribbble] (https://dribbble.com/shots/1785274-Menu-Animation-for-Additional-Functions?list=users&offset=17)
Check this [project on Behance] (https://www.behance.net/gallery/20411445/Mobile-Animations-Interactions)
Installation
CocoaPods
pod 'ContextMenu.iOS', '~> 1.1.0'
Manually
Copy all files from YALContextMenu
folder to your xcode project.
Usage
Objective-C
You are welcome to see the sample of the project for fully operating sample in the Example folder.
- Add folder YALContextMenu to your project.
#import âYALContextMenuTableView.hâ
to your view controller- Create custom UITableViewCell with UIView property for rotation animation and UIView property for fade out animation.
- Your custom cell should implement YALContextMenuCell protocol
@protocol YALContextMenuCell <NSObject>
- (UIView *)animatedIcon;
- (UIView *)animatedContent;
@end
- Use the following code sample to start menu
- (IBAction)presentMenuButtonTapped:(UIBarButtonItem *)sender {
// init YALContextMenuTableView tableView
if (!self.contextMenuTableView) {
self.contextMenuTableView = [[YALContextMenuTableView alloc]initWithTableViewDelegateDataSource:self];
self.contextMenuTableView.animationDuration = 0.15;
//optional - implement custom YALContextMenuTableView custom protocol
self.contextMenuTableView.yalDelegate = self;
//optional - implement menu items layout
self.contextMenuTableView.menuItemsSide = Right;
self.contextMenuTableView.menuItemsAppearanceDirection = FromTopToBottom;
//register nib
UINib *cellNib = [UINib nibWithNibName:@"ContextMenuCell" bundle:nil];
[self.contextMenuTableView registerNib:cellNib forCellReuseIdentifier:@"contextMenuCellReuseId"];
}
// it is better to use this method only for proper animation
[self.contextMenuTableView showInView:self.navigationController.view withEdgeInsets:UIEdgeInsetsZero animated:YES];
}
- Use default UITableViewDataSource methods for additional set up and customisation of the cell.
- Сall
updateAlongsideRotation
method before the rotation animation started andreloadData
method after rotation animation finished or in UIViewControllerTransitionCoordinator'sanimateAlongsideTransition
block for proper rotation animation.
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{
//should be called after rotation animation completed
[self.contextMenuTableView reloadData];
}
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
[super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];
[self.contextMenuTableView updateAlongsideRotation];
}
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
[coordinator animateAlongsideTransition:nil completion:^(id<UIViewControllerTransitionCoordinatorContext> context) {
//should be called after rotation animation completed
[self.contextMenuTableView reloadData];
}];
[self.contextMenuTableView updateAlongsideRotation];
}
Swift
You should add the following line to your bridging header:
@import ContextMenu_iOS;
Customisation
To customise menu items side position you can specify a 'menuItemsSide' property. When it set to 'Right' the first cell will be opened from right to left and selected cell will be closed vice versa and when it set to 'Left' the first cell will be opened from left to right and selected cell will be closed vice versa. Default - Right.
Also, to customise menu items appearance direction you can specify 'menuItemsAppearanceDirection' property. Default - FromTopToBottom.
To customise cell set up your custom drawables in the animated icon. Actually the cell design and layout is completely at your choice.
animationDuration is to be used for animation speed in seconds.
Compatibility
iOS 7, iOS 8, iOS 9
Version: 1.1.0
Let us know!
Weâd be really happy if you sent us links to your projects where you use our component. Just send an email to github@yalantis.com And do let us know if you have any questions or suggestion regarding the animation.
P.S. Weâre going to publish more awesomeness wrapped in code and a tutorial on how to make UI for iOS (Android) better than better. Stay tuned!
License
Copyright 2017, Yalantis
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
Top Related Projects
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion
Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
Animated side menu with customizable UI
:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion
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