Skip to content

chidori-app/CDRTranslucentSideBar

Repository files navigation

CDRTranslucentSideBar

CDRTranslucentSideBar is a useful sidebar menu library for iOS. You can craete beautiful blurred sidebar using CDRTranslucentSideBar.

CDRTranslucentSideBar1   CDRTranslucentSideBar2

##How To Get Started

###Manual Installation

  • Download source code.
  • Add CDRTranslucentSideBar.h and CDRTranslucentSideBar.m from CDRTranslucentSideBar folder to your project.

Installation with CocoaPods

pod 'CDRTranslucentSideBar'

##Requirements iOS7.0 or higher.

##Usage

###Set up Import CDRTranslucentSideBar.h into ViewController and create property of sidebar.

#import "CDRTranslucentSideBar.h"

@interface CDRViewController () <CDRTranslucentSideBarDelegate>
@property (nonatomic, strong) CDRTranslucentSideBar *sideBar;
@property (nonatomic, strong) CDRTranslucentSideBar *rightSideBar;

@end

###Initialize Initialize the sidebar and set properties in viewDidLoad.

self.sideBar = [[CDRTranslucentSideBar alloc] init];
self.sideBar.delegate = self;
self.sideBar.tag = 0;

//Example of Right Sidebar
self.rightSideBar = [[CDRTranslucentSideBar alloc] initWithDirectionFromRight:YES];
self.rightSideBar.delegate = self;
self.rightSideBar.translucentStyle = UIBarStyleBlack;
self.rightSideBar.tag = 1;

####sideBarWidth The sideBarWidth value. You can change the sidebar width by changing this value.

####animationDuration The animation duration value to show sidebar. This property specify the duration to show sidebar by action.

####translucentStyle CDRTranslucentSideBar uses UIToolbar to provide blur effect. This property specifies its appearance.

###Set Content of Sidebar Set content of sidebar by setContentViewInSideBar. You can use subclass of UIView for contentView, like UITableView.

//Example of Left Sidebar
UITableView *tableView = [[UITableView alloc] init];
tableView.dataSource = self;
tableView.delegate = self;

// Set ContentView in SideBar
[self.sideBar setContentViewInSideBar:tableView];

###Show Sidebar To show the sidebar using BarButtonItem, call show method.

- (IBAction)OnSideBarButtonTapped:(id)sender
{
    [self.sideBar show];
}

###Set PanGestureRecognizer CDRTranslucentSideBar can be shown by pan gesture. Create UIPangestureRecognizer and action to handle the gesture.

UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanGesture:)];
   
[self.view addGestureRecognizer:panGestureRecognizer];

####PanGesture Handler Create the action to handle the gesture.

- (void)handlePanGesture:(UIPanGestureRecognizer *)recognizer
{

	// if you have left and right sidebar, you can control the pan gesture by start point.
	if (recognizer.state == UIGestureRecognizerStateBegan) {
	CGPoint startPoint = [recognizer locationInView:self.view];

		// Left SideBar
		if (startPoint.x < self.view.bounds.size.width / 2.0) {
			self.sideBar.isCurrentPanGestureTarget = YES;
		}
		// Right SideBar
		else {
			self.rightSideBar.isCurrentPanGestureTarget = YES;
		}
	}

	[self.sideBar handlePanGestureToShow:recognizer inView:self.view];
	[self.rightSideBar handlePanGestureToShow:recognizer inView:self.view];

	// if you have only one sidebar, do like following

	// self.sideBar.isCurrentPanGestureTarget = YES;
	//[self.sideBar handlePanGestureToShow:recognizer inView:self.view];
}

###Delegates CDRTranslucentSideBar has four delegate methods.

  • - (void)sideBar:(CDRTranslucentSideBar *)sideBar didAppear:(BOOL)animated;
  • - (void)sideBar:(CDRTranslucentSideBar *)sideBar willAppear:(BOOL)animated;
  • - (void)sideBar:(CDRTranslucentSideBar *)sideBar didDisappear:(BOOL)animated;
  • - (void)sideBar:(CDRTranslucentSideBar *)sideBar willDisappear:(BOOL)animated;

##Example See the sample project CDRTranslucentSideBar.xcodeproj.

##FAQ ###How to add the side bar under navigation bar? Please check this issue. don't show navigation bar item of main screen in slide menu like this plese give suggition

##Credits CDRTranslucentSideBar was originally created by Masamichi Ueta in the development of Chidori.

CDRTranslucentSideBar is used in Chidori, iOS application.

##Contact Ask nscallop on Twitter (@nscallop)

##License CDRTranslucentSideBar is available under the apache 2.0 license. See the LICENSE file for more info.