Skip to content

Commit

Permalink
Updated README
Browse files Browse the repository at this point in the history
  • Loading branch information
@andreamazz
andreamazz committed Jun 28, 2013
1 parent 6de71b4 commit 0e5f94d
Showing 1 changed file with 120 additions and 105 deletions.
225 changes: 120 additions & 105 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,20 +50,23 @@ To create a new section:
To create a new row:
[self.slideoutController addViewControllerToLastSection:controller // Your UIViewController
tagged:1 // Used to change the object's properties, i.e. the badge
withTitle:@"First View"
andIcon:@"icon1.png"]; // 44x44 icon held in the project's resources
```objc
[self.slideoutController addViewControllerToLastSection:controller // Your UIViewController
tagged:1 // Used to change the object's properties, i.e. the badge
withTitle:@"First View"
andIcon:@"icon1.png"]; // 44x44 icon held in the project's resources
```
To create a new row that only calls an action:
[self.slideoutController addActionToLastSection:^{
// some action
}
tagged:3
withTitle:@"Action"
andIcon:@""];

```objc
[self.slideoutController addActionToLastSection:^{
// some action
}
tagged:3
withTitle:@"Action"
andIcon:@""];
```
The main data structure is an array of sections. Each section item is a dictionary, containing the section title and an array describing the ViewControllers. Each item of this array is a dictionary containing the title, icon's file name, a numeric tag and the reference to the ViewController.
Expand All @@ -74,105 +77,113 @@ Options Dictionary
--------------------
As of version 1.0.0 AMSlideOutNavigationController's configuration can be handled by passing an NSDictionary to it. The default values can be found in AMSlideOutNavigationController.m. Here's a brief description of the possible options:
AMOptionsEnableGesture // @(BOOL), Enables the pan gesture. Defaults to YES
AMOptionsEnableShadow // @(BOOL), Enables the shadow under the content's view. Defaults to YES
AMOptionsSetButtonDone // @(BOOL), Sets the Menu button's state to 'Done' when the tray is open. Defaults to NO
AMOptionsUseBorderedButton // @(BOOL), Sets the Menu button to have a bordered style. Defaults to NO
AMOptionsButtonIcon // UIImage, Icon displayed in the Menu button. Defaults to the embedded 'iconSlide.png'
AMOptionsTableBackground; // UIImage, Background image displayed and tiled as the TableView's background. Defaults to nil (solid color)
AMOptionsUseDefaultTitles; // @(BOOL), When enabled the content view's title is set as the manu item's text. Defaults to YES
AMOptionsSlideValue; // @(float), The width of the menu. The content's view snaps to this value. Defaults to 270
AMOptionsBackground; // UIColor, Menu's background color. Defaults to the one in the main screenshot of this page
AMOptionsSelectionBackground; // UIColor, Menu background color for the selected item. Defaults to the one in the main screenshot of this page
AMOptionsHeaderFont; // UIFont, Font used in the menu header. Defaults to Helvetica@13
AMOptionsHeaderFontColor; // UIColor, Font color used in the menu header. Defaults to the one in the main screenshot of this page
AMOptionsHeaderShadowColor; // UIColor, Shadow color used in the menu header. Defaults to the one in the main screenshot of this page
AMOptionsHeaderPadding; // @(float), Padding used in the menu header. Defaults to 10
AMOptionsHeaderGradientUp; // UIColor, Menu's gradient starting color. Defaults to the one in the main screenshot of this page
AMOptionsHeaderGradientDown; // UIColor, Menu's gradient ending color. Defaults to the one in the main screenshot of this page
AMOptionsHeaderSeparatorUpper; // UIColor, Color used in the menu header separator. Defaults to the one in the main screenshot of this page
AMOptionsHeaderSeparatorLower; // UIColor, Color used in the menu header separator. Defaults to the one in the main screenshot of this page
AMOptionsCellFont; // UIFont, Font used in the menu item. Defaults to Helvetica@14
AMOptionsCellFontColor; // UIColor, Font color used in the menu item. Defaults to the one in the main screenshot of this page
AMOptionsCellBadgeFont; // UIFont, Font used in the menu badge. Defaults to Helvetica@12
AMOptionsCellBackground; // UIColor, Menu item background color. Defaults to the one in the main screenshot of this page
AMOptionsCellSeparatorUpper; // UIColor, Color used in the menu separator. Defaults to the one in the main screenshot of this page
AMOptionsCellSeparatorLower; // UIColor, Color used in the menu separator. Defaults to the one in the main screenshot of this page
AMOptionsCellShadowColor; // UIColor, Shadow color used in the menu item. Defaults to the one in the main screenshot of this page
AMOptionsImagePadding; // @(float), Padding used in the menu icon. Defaults to 50
AMOptionsTextPadding; // @(float), Padding used in the menu item. Defaults to 20
AMOptionsBadgePosition; // @(float), Badge's left offset. Defaults to 220
AMOptionsHeaderHeight; // @(float), Menu header's height. Defaults to 22
AMOptionsImageHeight; // @(float), Menu icon's height. Max value is currently 44 pixels. Defaults to 44
AMOptionsImageOffsetByY; // @(float), Menu icon's offset from the top. Defaults to 0
```objc
AMOptionsEnableGesture // @(BOOL), Enables the pan gesture. Defaults to YES
AMOptionsEnableShadow // @(BOOL), Enables the shadow under the content's view. Defaults to YES
AMOptionsSetButtonDone // @(BOOL), Sets the Menu button's state to 'Done' when the tray is open. Defaults to NO
AMOptionsUseBorderedButton // @(BOOL), Sets the Menu button to have a bordered style. Defaults to NO
AMOptionsButtonIcon // UIImage, Icon displayed in the Menu button. Defaults to the embedded 'iconSlide.png'
AMOptionsTableBackground; // UIImage, Background image displayed and tiled as the TableView's background. Defaults to nil (solid color)
AMOptionsUseDefaultTitles; // @(BOOL), When enabled the content view's title is set as the manu item's text. Defaults to YES
AMOptionsSlideValue; // @(float), The width of the menu. The content's view snaps to this value. Defaults to 270
AMOptionsBackground; // UIColor, Menu's background color. Defaults to the one in the main screenshot of this page
AMOptionsSelectionBackground; // UIColor, Menu background color for the selected item. Defaults to the one in the main screenshot of this page
AMOptionsHeaderFont; // UIFont, Font used in the menu header. Defaults to Helvetica@13
AMOptionsHeaderFontColor; // UIColor, Font color used in the menu header. Defaults to the one in the main screenshot of this page
AMOptionsHeaderShadowColor; // UIColor, Shadow color used in the menu header. Defaults to the one in the main screenshot of this page
AMOptionsHeaderPadding; // @(float), Padding used in the menu header. Defaults to 10
AMOptionsHeaderGradientUp; // UIColor, Menu's gradient starting color. Defaults to the one in the main screenshot of this page
AMOptionsHeaderGradientDown; // UIColor, Menu's gradient ending color. Defaults to the one in the main screenshot of this page
AMOptionsHeaderSeparatorUpper; // UIColor, Color used in the menu header separator. Defaults to the one in the main screenshot of this page
AMOptionsHeaderSeparatorLower; // UIColor, Color used in the menu header separator. Defaults to the one in the main screenshot of this page
AMOptionsCellFont; // UIFont, Font used in the menu item. Defaults to Helvetica@14
AMOptionsCellFontColor; // UIColor, Font color used in the menu item. Defaults to the one in the main screenshot of this page
AMOptionsCellBadgeFont; // UIFont, Font used in the menu badge. Defaults to Helvetica@12
AMOptionsCellBackground; // UIColor, Menu item background color. Defaults to the one in the main screenshot of this page
AMOptionsCellSeparatorUpper; // UIColor, Color used in the menu separator. Defaults to the one in the main screenshot of this page
AMOptionsCellSeparatorLower; // UIColor, Color used in the menu separator. Defaults to the one in the main screenshot of this page
AMOptionsCellShadowColor; // UIColor, Shadow color used in the menu item. Defaults to the one in the main screenshot of this page
AMOptionsImagePadding; // @(float), Padding used in the menu icon. Defaults to 50
AMOptionsTextPadding; // @(float), Padding used in the menu item. Defaults to 20
AMOptionsBadgePosition; // @(float), Badge's left offset. Defaults to 220
AMOptionsHeaderHeight; // @(float), Menu header's height. Defaults to 22
AMOptionsImageHeight; // @(float), Menu icon's height. Max value is currently 44 pixels. Defaults to 44
AMOptionsImageOffsetByY; // @(float), Menu icon's offset from the top. Defaults to 0
```

sample usage:

self.slideoutController = [AMSlideOutNavigationController slideOutNavigation];
```objc
self.slideoutController = [AMSlideOutNavigationController slideOutNavigation];

[self.slideoutController setSlideoutOptions:@{
AMOptionsEnableShadow : @(NO),
AMOptionsHeaderFont : [UIFont systemFontOfSize:14]
}];
[self.slideoutController setSlideoutOptions:@{
AMOptionsEnableShadow : @(NO),
AMOptionsHeaderFont : [UIFont systemFontOfSize:14]
}];
```
Further customization
--------------------
To customize the appearance of your navigation bar you can use the system's UIAppearance class, i.e.:
// Navbar customization
[[UINavigationBar appearance] setTintColor:[UIColor redColor]];
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navigationBar.png"] forBarMetrics:UIBarMetricsDefault];
// Navbar font customization
NSDictionary *attributes = @{UITextAttributeFont: [UIFont fontWithName:@"Copperplate" size:14]};
NSDictionary *titleAttributes = @{UITextAttributeFont: [UIFont fontWithName:@"Copperplate" size:20]};
[[UIBarButtonItem appearance] setTitleTextAttributes: attributes
forState: UIControlStateNormal];
[[UINavigationBar appearance] setTitleTextAttributes: titleAttributes];
// Back button customization
UIImage *barButton = [[UIImage imageNamed:@"button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(-2,5,0,6)];
[[UIBarButtonItem appearance] setBackgroundImage:barButton forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:4 forBarMetrics:UIBarMetricsDefault];
```objc
// Navbar customization
[[UINavigationBar appearance] setTintColor:[UIColor redColor]];
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navigationBar.png"] forBarMetrics:UIBarMetricsDefault];
// Navbar font customization
NSDictionary *attributes = @{UITextAttributeFont: [UIFont fontWithName:@"Copperplate" size:14]};
NSDictionary *titleAttributes = @{UITextAttributeFont: [UIFont fontWithName:@"Copperplate" size:20]};
[[UIBarButtonItem appearance] setTitleTextAttributes: attributes
forState: UIControlStateNormal];
[[UINavigationBar appearance] setTitleTextAttributes: titleAttributes];
// Back button customization
UIImage *barButton = [[UIImage imageNamed:@"button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(-2,5,0,6)];
[[UIBarButtonItem appearance] setBackgroundImage:barButton forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:4 forBarMetrics:UIBarMetricsDefault];
```

Using UIAppearance and the options' dictionary you can easily achieve a view similiar to the second screenshot in this page.


Sample
--------------------
self.slideoutController = [AMSlideOutNavigationController slideOutNavigation];

// Add a first section
[self.slideoutController addSectionWithTitle:@"Section One"];
```objc
self.slideoutController = [AMSlideOutNavigationController slideOutNavigation];

// Add two viewcontrollers to the first section
controller = [[UIViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
[self.slideoutController addViewControllerToLastSection:controller tagged:1 withTitle:@"First View" andIcon:@"icon1.png"];
// Add a first section
[self.slideoutController addSectionWithTitle:@"Section One"];

controller = [[UIViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
[self.slideoutController addViewControllerToLastSection:controller tagged:2 withTitle:@"Second View" andIcon:@"icon2.png"];
// Add two viewcontrollers to the first section
controller = [[UIViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
[self.slideoutController addViewControllerToLastSection:controller tagged:1 withTitle:@"First View" andIcon:@"icon1.png"];

// Add a second section
[self.slideoutController addSectionWithTitle:@"Section Two"];
controller = [[UIViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
[self.slideoutController addViewControllerToLastSection:controller tagged:2 withTitle:@"Second View" andIcon:@"icon2.png"];

// Add two viewcontrollers to the second section
controller = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
[self.slideoutController addViewControllerToLastSection:controller
tagged:3
withTitle:@"First View"
andIcon:@"icon1.png"
beforeChange:^{
NSLog(@"Changing viewController");
} onCompletition:^{
NSLog(@"Done");
}];
// Add a second section
[self.slideoutController addSectionWithTitle:@"Section Two"];

controller = [[UIViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
[self.slideoutController addViewControllerToLastSection:controller tagged:4 withTitle:@"Second View" andIcon:@"icon2.png"];
[self.window setRootViewController:self.slideoutController];
// Add two viewcontrollers to the second section
controller = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
[self.slideoutController addViewControllerToLastSection:controller
tagged:3
withTitle:@"First View"
andIcon:@"icon1.png"
beforeChange:^{
NSLog(@"Changing viewController");
} onCompletition:^{
NSLog(@"Done");
}];

controller = [[UIViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
[self.slideoutController addViewControllerToLastSection:controller tagged:4 withTitle:@"Second View" andIcon:@"icon2.png"];

[self.window setRootViewController:self.slideoutController];
```
Storyboard
--------------------
Expand All @@ -184,21 +195,23 @@ Just set a Storyboard ID for each of your ViewController that will become a root
then instantiate your ViewControllers in your AppDelegate like this:
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
UIViewController* controller;
self.slideoutController = [AMSlideOutNavigationController slideOutNavigation];
[self.slideoutController addSectionWithTitle:@""];
controller = [storyboard instantiateViewControllerWithIdentifier:@"FirstController"];
[self.slideoutController addViewControllerToLastSection:controller tagged:1 withTitle:@"First View" andIcon:@""];
controller = [storyboard instantiateViewControllerWithIdentifier:@"SecondController"];
[self.slideoutController addViewControllerToLastSection:controller tagged:2 withTitle:@"Second View" andIcon:@""];
[self.window setRootViewController:self.slideoutController];
```objc
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];
UIViewController* controller;
self.slideoutController = [AMSlideOutNavigationController slideOutNavigation];
[self.slideoutController addSectionWithTitle:@""];
controller = [storyboard instantiateViewControllerWithIdentifier:@"FirstController"];
[self.slideoutController addViewControllerToLastSection:controller tagged:1 withTitle:@"First View" andIcon:@""];
controller = [storyboard instantiateViewControllerWithIdentifier:@"SecondController"];
[self.slideoutController addViewControllerToLastSection:controller tagged:2 withTitle:@"Second View" andIcon:@""];
[self.window setRootViewController:self.slideoutController];
```

Sections
--------------------
Expand All @@ -208,7 +221,9 @@ Badges
--------------------
Set the badge value (NSString) via the method ```setBadgeValue:forTag:```. This sets the badge value of the row with the numeric tag provided during the views' setup.

[self.slideoutController setBadgeValue:@"10" forTag:3];
```objc
[self.slideoutController setBadgeValue:@"10" forTag:3];
```
Icons
--------------------
Expand Down

0 comments on commit 0e5f94d

Please sign in to comment.