iOS 7/8 style side menu with parallax effect.

Related tags

Layout RESideMenu
Overview

RESideMenu

iOS 7/8 style side menu with parallax effect inspired by Dribbble shots (first and second).

Since version 4.0 you can add menu view controllers on both left and right sides of your content view controller.

RESideMenu Screenshot

RESideMenu Screenshot

Requirements

  • Xcode 6 or higher
  • Apple LLVM compiler
  • iOS 6.0 or higher
  • ARC

Demo

Build and run the RESideMenuExample project in Xcode to see RESideMenu in action. For storyboards integration demo, build and run RESideMenuStoryboardsExample.

Installation

CocoaPods

The recommended approach for installating RESideMenu is via the CocoaPods package manager, as it provides flexible dependency management and dead simple installation. For best results, it is recommended that you install via CocoaPods >= 0.28.0 using Git >= 1.8.0 installed via Homebrew.

Install CocoaPods if not already available:

$ [sudo] gem install cocoapods
$ pod setup

Change to the directory of your Xcode project:

$ cd /path/to/MyProject
$ touch Podfile
$ edit Podfile

Edit your Podfile and add RESideMenu:

platform :ios, '6.0'
pod 'RESideMenu', '~> 4.0.7'

Install into your Xcode project:

$ pod install

Open your project in Xcode from the .xcworkspace file (not the usual project file)

$ open MyProject.xcworkspace

Please note that if your installation fails, it may be because you are installing with a version of Git lower than CocoaPods is expecting. Please ensure that you are running Git >= 1.8.0 by executing git --version. You can get a full picture of the installation details by executing pod install --verbose.

Manual Install

All you need to do is drop RESideMenu files into your project, and add #include "RESideMenu.h" to the top of classes that will use it.

Example Usage

In your AppDelegate's - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions create the view controller and assign content and menu view controllers.

// Create content and menu controllers
//
DEMONavigationController *navigationController = [[DEMONavigationController alloc] initWithRootViewController:[[DEMOHomeViewController alloc] init]];
DEMOLeftMenuViewController *leftMenuViewController = [[DEMOLeftMenuViewController alloc] init];
DEMORightMenuViewController *rightMenuViewController = [[DEMORightMenuViewController alloc] init];

// Create side menu controller
//
RESideMenu *sideMenuViewController = [[RESideMenu alloc] initWithContentViewController:navigationController
                                                                leftMenuViewController:leftMenuViewController
                                                               rightMenuViewController:rightMenuViewController];
sideMenuViewController.backgroundImage = [UIImage imageNamed:@"Stars"];

// Make it a root controller
//
self.window.rootViewController = sideMenuViewController;

Present the menu view controller:

[self.sideMenuViewController presentLeftMenuViewController];

or

[self.sideMenuViewController presentRightMenuViewController];

Switch content view controllers:

#import <RESideMenu/RESideMenu.h>

....

[self.sideMenuViewController setContentViewController:viewController animated:YES];
[self.sideMenuViewController hideMenuViewController];

Storyboards Example

  1. Create a subclass of RESideMenu. In this example we call it DEMORootViewController.
  2. In the Storyboard designate the root view's owner as DEMORootViewController.
  3. Make sure to #import "RESideMenu.h" in DEMORootViewController.h.
  4. Add more view controllers to your Storyboard, and give them identifiers "leftMenuViewController", "rightMenuViewController" and "contentViewController". Note that in the new XCode the identifier is called "Storyboard ID" and can be found in the Identity inspector.
  5. Add a method awakeFromNib to DEMORootViewController.m with the following code:
- (void)awakeFromNib
{
    self.contentViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"contentViewController"];
    self.leftMenuViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"leftMenuViewController"];
    self.rightMenuViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"rightMenuViewController"];
}

Customization

You can customize the following properties of RESideMenu:

@property (assign, readwrite, nonatomic) NSTimeInterval animationDuration;
@property (strong, readwrite, nonatomic) UIImage *backgroundImage;
@property (assign, readwrite, nonatomic) BOOL panGestureEnabled;
@property (assign, readwrite, nonatomic) BOOL panFromEdge;
@property (assign, readwrite, nonatomic) NSUInteger panMinimumOpenThreshold;
@property (assign, readwrite, nonatomic) BOOL interactivePopGestureRecognizerEnabled;
@property (assign, readwrite, nonatomic) BOOL scaleContentView;
@property (assign, readwrite, nonatomic) BOOL scaleBackgroundImageView;
@property (assign, readwrite, nonatomic) BOOL scaleMenuView;
@property (assign, readwrite, nonatomic) BOOL contentViewShadowEnabled;
@property (assign, readwrite, nonatomic) UIColor *contentViewShadowColor;
@property (assign, readwrite, nonatomic) CGSize contentViewShadowOffset;
@property (assign, readwrite, nonatomic) CGFloat contentViewShadowOpacity;
@property (assign, readwrite, nonatomic) CGFloat contentViewShadowRadius;
@property (assign, readwrite, nonatomic) CGFloat contentViewScaleValue;
@property (assign, readwrite, nonatomic) CGFloat contentViewInLandscapeOffsetCenterX;
@property (assign, readwrite, nonatomic) CGFloat contentViewInPortraitOffsetCenterX;
@property (assign, readwrite, nonatomic) CGFloat parallaxMenuMinimumRelativeValue;
@property (assign, readwrite, nonatomic) CGFloat parallaxMenuMaximumRelativeValue;
@property (assign, readwrite, nonatomic) CGFloat parallaxContentMinimumRelativeValue;
@property (assign, readwrite, nonatomic) CGFloat parallaxContentMaximumRelativeValue;
@property (assign, readwrite, nonatomic) CGAffineTransform menuViewControllerTransformation;
@property (assign, readwrite, nonatomic) BOOL parallaxEnabled;
@property (assign, readwrite, nonatomic) BOOL bouncesHorizontally;
@property (assign, readwrite, nonatomic) UIStatusBarStyle menuPreferredStatusBarStyle;
@property (assign, readwrite, nonatomic) BOOL menuPrefersStatusBarHidden;

If you set a backgroundImage, don't forget to set the Menu View Controller's background color to clear color.

You can implement RESideMenuDelegate protocol to receive the following messages:

- (void)sideMenu:(RESideMenu *)sideMenu didRecognizePanGesture:(UIPanGestureRecognizer *)recognizer;
- (void)sideMenu:(RESideMenu *)sideMenu willShowMenuViewController:(UIViewController *)menuViewController;
- (void)sideMenu:(RESideMenu *)sideMenu didShowMenuViewController:(UIViewController *)menuViewController;
- (void)sideMenu:(RESideMenu *)sideMenu willHideMenuViewController:(UIViewController *)menuViewController;
- (void)sideMenu:(RESideMenu *)sideMenu didHideMenuViewController:(UIViewController *)menuViewController;

Contact

Roman Efimov

License

RESideMenu is available under the MIT license.

Copyright © 2013 Roman Efimov.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Quick swiping results in view completely disappearing

    Quick swiping results in view completely disappearing

    When quickly swiping the view controller to the right it sometimes disappears completely, leaving me with only the menu. When selecting a menu item the only thing happening is the statusbar changing color. To get the view controller back i have to shut down the app and relaunch it.

    (This is from the example project)

    Edit: I can replicate it on iOS6 and iOS7

    Example

    opened by Amnell 16
  • "Unbalanced calls to begin/end appearance transitions for " error

    This happens when you drag the view controller horizontally to reveal the menu partly and don't go all the way but go back to the view controller. It causes the navigation view controller to not update when pushing or popping views from the main navigation view controller.

    opened by ankurp 11
  • [RootViewController re_displayController:frame:]: unrecognized selector

    [RootViewController re_displayController:frame:]: unrecognized selector

    I tried to implement storyboard version, but I'm getting exception: [RootViewController re_displayController:frame:]: unrecognized selector sent to instance 0x9880e10

    in RESideMenu.m, line 116. My RootViewController is subclass of RESideMenu, and I don't see any difference between my and demo project :( Do you have idea what can be wrong?

    P.S. Installed via cocoapods

    opened by mladjan 10
  • presentMenuViewController does not show the menu i case i go forward and back

    presentMenuViewController does not show the menu i case i go forward and back

    Currently i implement an eshop, so i push/pop instances of the same ViewController to navigate in products/categories.

    Each ViewController has a menuViewController (both are included to a RESide Menu). When i push and then i pop a ViewController (going back) the presentMenuViewController is not working - does not open the menu controller. Instead the scroll gesture works as expected.

    Do you have any ideas why the "programmatically way" is not working when a viewController is appeared from back stack?

    opened by mspapant 10
  • Positioning issue

    Positioning issue

    It seems that if the menu is used once the positioning of views isn't completely correct anymore. See the lines at the right and bottom of the screenshot. (Note! You can't see it against a white background like here.)

    Or did I miss anything?

    image

    opened by heijmerikx 8
  • Swift Port

    Swift Port

    Anybody interested in helping converting this fantastic iOS component to Swift? I have started converting the basic Objective-C to Swift in this branch: https://github.com/SSA111/RESideMenuSwift

    opened by SSA111 6
  • How to use this if my root view controller is a UITabBarController?

    How to use this if my root view controller is a UITabBarController?

    Hi.

    This is a question, not an issue. What would be the best way to approach the following structure:

    I am using storyboards and my project contains a tab bar controller, which is the root view controller of the application. The main view controller from which this side menu will be accessible contains a navigation bar (along with the tab bar).

    Thanks!

    opened by aseemsandhu 6
  • Added support for menu on both sides/right side only

    Added support for menu on both sides/right side only

    Users can now initialize a RESideMenu instance with a menu on each side, or just a menu on the right side.

    I had to make a significant amount of changes and some of the code could using optimizing, such as the gesture recognition. Feedback would be highly appreciated.

    opened by MahirEusufzai 6
  • ScrollsToTop on TableView

    ScrollsToTop on TableView

    Hi!

    first of all: Great work from your side! Thank you very much :)

    Altough i got a little Problem. When i use RESideMenu with my UITableView the Standard ScrollToTop with Tap on the StatusBar no longer works. Is there something i can do to reactivate this function?

    Thanks for your Help! CrEaK

    opened by CrEaK 5
  • `prefersStatusBarHidden` in UIViewController don't work.

    `prefersStatusBarHidden` in UIViewController don't work.

    When set prefersStatusBarHidden in DEMOSecondViewController, The self.contentViewController.prefersStatusBarHidden doesn't work.

    Because:

    • self.contentViewController is a UINavigationViewController, have to get visibleViewController vaule.
    • when tap left menu second cell, self.contentViewController still is firstViewController's navigation.

    This pull request already fixed them.

    opened by zvving 5
  • RESideMenuStoryboardsExample rotation issues

    RESideMenuStoryboardsExample rotation issues

    Hello,

    I think there are some problems with the menu being positioned incorrectly in certain circumstances.

    Problem 1

    To reproduce problem 1:

    1. Start RESideMenuStoryboardsExample in portrait orientation
    2. Press 'Menu'
    3. You should see this: image

    Now if you restart the app in portrait orientation and then

    1. Rotate device left
    2. Press 'Menu'
    3. Rotate device right
    4. You get the menu at a different position, moved to the top: image

    These two images should look the same.

    Problem 2

    To reproduce problem 2:

    1. Start RESideMenuStoryboardsExample in portrait orientation
    2. Rotate device left
    3. Press 'Menu'
    4. Should look like this image

    Now if you restart the app in portrait orientation and then

    1. Press 'Menu'
    2. Rotate left
    3. You get the following image

    Again, these two images should look the same.

    bug 
    opened by yep 5
  • 完美解决RESideMenu二级界面能侧滑的bug(即在二级页面关闭侧滑菜单功能)

    完美解决RESideMenu二级界面能侧滑的bug(即在二级页面关闭侧滑菜单功能)

    简书地址:https://www.jianshu.com/p/9769337d297f

    解决方法是用的@icetime17的,只是代码放的位置不太一样,他的RootViewController是继承自RESideMenu的,而我是自己写了个RESideMenu的分类进行设置的。

    关键代码就👇几句:

    -(void)viewWillAppear:(BOOL)animated

    {

    [super viewWillAppear:animated];
    
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(disableRESideMenu) name:@"disableRESideMenu" object:nil];
    
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(enableRESideMenu) name:@"enableRESideMenu" object:nil];
    

    }

    -(void)enableRESideMenu

    { self.panGestureEnabled = YES;}

    -(void)disableRESideMenu

    { self.panGestureEnabled = NO;}

    分类设置完后,在需要关闭侧滑菜单的界面执行👇

    [[NSNotificationCenter defaultCenter] postNotificationName:@"disableRESideMenu" object:nil];

    为什么我要把代码放在viewWillAppear里呢?

    尝试放在viewDidLoad里面,但是程序运行起来黑屏;

    尝试放在+(void)load方法里面,但是崩在发送通知的方法,提示找不到disableRESideMenu方法,为什么呢?因为+(void)load是类方法,不能在里面直接使用对象方法- (void)enableRESideMenu。

    因此,我尝试了一下放在viewWillAppear里面。。。完美解决!!!

    opened by arr0813 0
  • Changing Orientation

    Changing Orientation

    Hi, i need some help on changing the screen orientation. im not sure how to implement so that it can support landscape orientation. Currently, when i launch the project, the screen is in portrait mode, and nothing happen when i tilt the device. Thanks!

    opened by nanaberry 0
  • how to adjust safe area insets bottom for toolbar

    how to adjust safe area insets bottom for toolbar

    opened by ph4br1c3 0
Releases(4.0.7)
Owner
Roman Efimov
Roman Efimov
A floating menu library for Android.

Hover Hover is a floating menu implementation for Android. Goals The goals of Hover are to: Provide an easy-to-use, out-of-the-box floating menu imple

Google 2.7k Dec 27, 2022
Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

Fabio Biola 1.6k Dec 30, 2022
Effect of particle Boom

ParticleDismissLayout #粒子碎裂效果 Effect of particle Boom. 视图碎裂效果。 #Preview #Usage #java final ParticleView particleAnimator = new ParticleView(MainActiv

张珂 43 Jan 21, 2022
类似 iOS 带弹簧效果的左右滑动控件,可作为 AbsListView 和 RecyclerView 的 item(作为 AbsListView 的 item 时的点击事件参考代码家的 https://github.com/daimajia/AndroidSwipeLayout )

?? BGASwipeItemLayout-Android ?? 类似iOS带弹簧效果的左右滑动控件,可作为AbsListView和RecyclerView的item。支持给BGASwipeItemLayout和其子控件设置margin和padding属性 效果图 Gradle依赖 dependen

王浩 469 Dec 9, 2022
An Android view for displaying repeated continuous side scrolling images. This can be used to create a parallax animation effect.

Scrolling Image View An Android view for displaying repeated continuous side scrolling images. This can be used to create a parallax animation effect.

Q42 1.8k Dec 27, 2022
Parallax everywhere is a library with alternative android widgets with parallax effects.

Parallax Everywhere# Parallax everywhere (PEW) is a library with alternative android views using parallax effects. Demo You can try the demo app on go

fmSirvent 712 Nov 14, 2022
Side menu with some categories to choose.

Side Menu Side menu with some categories to choose. Check this project on dribbble. Check this project on Behance. God bless Ukraine! Sample Sample &

Yalantis 5.2k Dec 23, 2022
Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app)

Android SideNavigation Library Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app). Description The Go

Evgeny Shishkin 319 Nov 25, 2022
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Arvind Meshram 5 Nov 24, 2022
An Index Side Bar With Wave Effect

WaveSideBar You can use WaveSideBar in the contacts page of your application. Refer to AlexLiuSheng/AnimSideBar. Screenshot Include the WaveSideBar to

郭佳哲 1.3k Dec 12, 2022
iOS style scroll wheel (style similar to UIPickerView)

WheelPicker iOS-style scroll wheel picker Read this in other languages: Feature Day / Night Mode Support Customizable style Support circular scro

Tian Yiyan 21 Dec 30, 2022
An adapter which could be used to achieve a parallax effect on RecyclerView.

android-parallax-recycleview Integration Step 1. Add the JitPack repository to your build file repositories { maven { url "https://jitpack

Pedro Oliveira 1.6k Nov 17, 2022
A pager for Android with parallax effect

ParallaxPagerTransformer A pager transformer for Android with parallax effect Installation in your build.gradle file dependencies { // ... com

Javier Gonzalez 654 Dec 29, 2022
A pager for Android with parallax effect

ParallaxPagerTransformer A pager transformer for Android with parallax effect Installation in your build.gradle file dependencies { // ... com

Javier Gonzalez 654 Dec 29, 2022
An Android library allowing images to exhibit a parallax effect that reacts to the device's tilt

Motion An Android library allowing images to exhibit a parallax effect. By replacing static pictures and backgrounds with a fluid images that reacts t

Nathan VanBenschoten 781 Nov 11, 2022
[Development stopped in 2014. Unfinished and not stable - not recommended to use.] An easy-to-use ViewPager subclass with parallax background effect for Android apps.

Development stopped in 2014 Not developed since 2014. Unfinished and not stable - not recommended to use. ParallaxViewPager An easy-to-use ViewPager s

Andras Kindler 437 Dec 29, 2022
Beautify your RecyclerViews with a great parallax effect !

BeautifulParallax Beautify your RecyclerViews with a great parallax effect ! Without Carpaccio public class YOURAdapter extends RecyclerView.Adapter<Y

Florent CHAMPIGNY 413 Nov 2, 2022
Simple parallax effect for your image. Only usable with Jetpack Compose.

Parallax Effect in Compose Image Example usage // In an activity or fragment... private lateinit var gravitySensorDefaulted: GravitySensorDefaulted o

Yunus Emre OCAK 2 Jul 5, 2022