Skip to content

Commit

Permalink
license, better gifs, better example
Browse files Browse the repository at this point in the history
  • Loading branch information
rnystrom committed Aug 29, 2013
1 parent 4035769 commit 1e6e678
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 7 deletions.
18 changes: 18 additions & 0 deletions .gitignore
@@ -0,0 +1,18 @@
# Xcode
.DS_Store
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
*.xcworkspace
!default.xcworkspace
xcuserdata
profile
*.moved-aside
DerivedData
.idea/
19 changes: 19 additions & 0 deletions LICENSE
@@ -0,0 +1,19 @@
Copyright (c) 2013 Ryan Nystrom (http://whoisryannystrom.com)

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.
90 changes: 83 additions & 7 deletions README.md
Expand Up @@ -5,15 +5,15 @@ Add your own Control Center-esque UI to your app to work as navigation or even t

This project is [another](https://github.com/rnystrom/RNRippleTableView) UI control built after finding some [inspiration](http://dribbble.com/shots/1194205-Sidebar-calendar-animation) on Dribbble. The original design was created by [Jakub Antalik](http://dribbble.com/antalik/click?type=twitter).

<p align="center"><img title="Open and close animation" src="https://dl.dropboxusercontent.com/u/6715236/open.gif"/></p>
<p align="center"><img title="Open and close animation" src="https://raw.github.com/rnystrom/RNFrostedMenu/master/images/open.gif"/></p>

You'll notice that this control's use of blur does not match Jakub's original design exactly. In the original design the background of the buttons is blurred, while the overlay of the control is simply shaded. There have [been](https://github.com/alexdrone/ios-realtimeblur) [attempts](https://github.com/JagCesar/iOS-blur) at recreating

Apple is being a little deceptive with their use of blurring in iOS 7. Bottom line, **don't animate blurs** in your designs.

If you examine the source of this project you'll see that I'm actually cheating to get the blur layer to animate overtop the original view.

<p align="center"><img title="Money shot" src="https://dl.dropboxusercontent.com/u/6715236/click.gif"/></p>
<p align="center"><img title="Money shot" src="https://raw.github.com/rnystrom/RNFrostedMenu/master/images/click.gif"/></p>

## Installation ##

Expand All @@ -23,23 +23,101 @@ The preferred method of installation is with [CocoaPods](http://cocoapods.org/).
pod 'RNFrostedSidebar', '~> 0.1.0'
```

Or if you want to install manually, drag and drop the <code>RNFrostedSidebar</code> .h and .m files into your project. To get this working, you'll need to include the following frameworks in *Link Binary with Libraries*:
Or if you want to install manually, drag and drop the <code>RNFrostedSidebar</code> .h and .m files into your project. To get this working, you'll need to include the following frameworks in **Link Binary with Libraries**:

- QuartzCore
- Accelerate

**Note:** If you want to compile with Xcode 4.*

## Usage ##

The simplest usage is to create a list of images, initialize a <code>RNFrostedSidebar</code> object, then call the <code>-show</code> method.

```objc
NSArray *images = @[
[UIImage imageNamed:@"gear"],
[UIImage imageNamed:@"globe"],
[UIImage imageNamed:@"profile"],
[UIImage imageNamed:@"star"]
];

RNFrostedSidebar *callout = [[RNFrostedSidebar alloc] initWithImages:images];
callout.delegate = self;
[callout show];
```
## Customization
I've exposed a healthy amount of options for you to customize the appearance and animation of the control.
```objc
- (instancetype)initWithImages:(NSArray *)images selectedIndices:(NSIndexSet *)selectedIndices;
```

Use the parameter <code>selectedIndices</code> to add pre-selected options. Without using the init method below there wont be any visualization of selection. But, you will get the proper enabled/disabled BOOL in the delegate <code>-sidebar:didEnable:itemAtIndex:</code> method.

```objc
- (instancetype)initWithImages:(NSArray *)images selectedIndices:(NSIndexSet *)selectedIndices borderColors:(NSArray *)colors;
```

Use the parameter <code>borderColors</code> to add border effect animations when selecting and deselecting a view.

```objc
@property (nonatomic, assign) CGFloat width;
```

The width of the blurred region. Default 150.

```objc
@property (nonatomic, assign) BOOL showFromRight;
```

Toggle showing the control from the right side of the device. Default NO.

```objc
@property (nonatomic, assign) CGFloat animationDuration;
```

The duration of the show and dismiss animations. Default 0.25.

```objc
@property (nonatomic, assign) CGSize itemSize;
```

The size of the item views. Default is width: 75, height: 75.

```objc
@property (nonatomic, strong) UIColor *tintColor;
```

The tint color of the blur. This can be a tricky property to set. I recommend using the provided alpha. Avoid using solid colors with an alpha of 1. Default white: 0.2, alpha: 0.73.

```objc
@property (nonatomic, strong) UIColor *itemBackgroundColor;
```

The background color for item views. **Note:** This property must be set with either <code>colorWithWhite:alpha</code> or <code>colorWithRed:green:blue:alpha</code> or it will crash. This is for highlight effects on tapping so the control can derive a darker background when highlighted. Default white: 1, alpha 0.25.

```objc
@property (nonatomic, assign) NSUInteger borderWidth;
```

The border width for item views. Default 2.

```objc
@property (nonatomic, weak) id <RNFrostedSidebarDelegate> delegate;
```

An optional delegate to respond to selection of item views. The two optional delegate methods are:

```objc
- (void)sidebar:(RNFrostedSidebar *)sidebar didTapItemAtIndex:(NSUInteger)index;
- (void)sidebar:(RNFrostedSidebar *)sidebar didEnable:(BOOL)itemEnabled itemAtIndex:(NSUInteger)index;
```

## Credits

UI Control structure and View Controller containment practices adopted from [Matthias Tretter](https://github.com/myell0w).

Sample icons provided by [Pixeden](http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol2).

The blur algorithm comes from WWDC 2013's session 208, "What's New in iOS User Interface Design".
Expand All @@ -48,8 +126,6 @@ The blur algorithm comes from WWDC 2013's session 208, "What's New in iOS User I

If you've used this project in a live app, please <a href="mailTo:rnystrom@whoisryannystrom.com">let me know</a>! Nothing makes me happier than seeing someone else take my work and go wild with it.

## Todo

## Contact

* [@nystrorm](https://twitter.com/_ryannystrom) on Twitter
Expand Down
Binary file not shown.
1 change: 1 addition & 0 deletions example/ViewController.m
Expand Up @@ -51,6 +51,7 @@ - (IBAction)onBurger:(id)sender {
];

RNFrostedSidebar *callout = [[RNFrostedSidebar alloc] initWithImages:images selectedIndices:self.optionIndices borderColors:colors];
// RNFrostedSidebar *callout = [[RNFrostedSidebar alloc] initWithImages:images];
callout.delegate = self;
// callout.showFromRight = YES;
[callout show];
Expand Down
Binary file modified images/click.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/open.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1e6e678

Please sign in to comment.