SkillAgentSearch skills...

RNGridMenu

A grid menu with elastic layout, depth of field, and realistic animation.

Install / Use

/learn @rnystrom/RNGridMenu
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

RNGridMenu

A grid based menu view with field depth and bounce animation: inspired by Mailbox, and extended for multiple needs. I created this project out of a stint of boredom. This control is customizable to a degree, but kept simple so you can take it and spin your own subclass or fork out of it.

<p align="center"><img src="https://raw.github.com/rnystrom/RNGridMenu/master/images/menu.gif"/></p> <p align="center"><img src="https://raw.github.com/rnystrom/RNGridMenu/master/images/options.jpg"/></p>

Installation

Installation with CocoaPods made available by thaberkern. Just add this line to your Podfile.

pod 'RNGridMenu', '~> 0.1.2'

Drag and drop the <code>RNGridMenu</code> .h and .m files into your project. To get this working, you'll need to include the following frameworks:

  • QuartCore
  • Accelerate

Usage

Getting started with <code>RNGridMenu</code> is dead simple. Just initialize it with a list of options, images, or both, and call the <code>-show</code> method. Like this:

NSArray *images = //...
NSArray *options = //...
RNGridMenu *av = [[RNGridMenu alloc] initWithOptions:options images:images delegate:self];
[av show];

There are 3 initialization methods in all for now. Note that the delgate is entirely optional. Just set that parameter to nil (though the control is kind of useless without it, right?).

// Note this changes the view to style RNGridMenuStyleList since there are no images
- (id)initWithOptions:(NSArray *)options delegate:(id <RNGridMenuDelegate>)delegate;

- (id)initWithImages:(NSArray *)images delegate:(id <RNGridMenuDelegate>)delegate;

// The count of both options and images must be equal (caught with assert)
- (id)initWithOptions:(NSArray *)options images:(NSArray *)images delegate:(id <RNGridMenuDelegate>)delegate;

Customization

@property (nonatomic, copy) UIColor *highlightColor;

The color that items will be highlighted with on selection. Defaults to table view selection blue.

@property (nonatomic, strong, readonly) UIColor *backgroundColor;

The background color of the main view (note this is a UIViewController subclass). Default is black with 0.7 alpha.

@property (nonatomic, assign) CGSize itemSize;

The size of a list or grid item. Default is 100x100.

@property (nonatomic, assign) CGFloat blurLevel;

The level of blur for the background image. Range is 0.0 to 1.0. Default is 0.3.

@property (nonatomic, assign) BOOL addsToWindow;

Set to YES if you want to add the control to the window of your app. Default is NO.

@property (nonatomic, assign) CGFloat animationDuration;

The time in seconds for the show and dismiss animation. Default is 0.25.

@property (nonatomic, copy) UIColor *itemTextColor;

The text color for list items. Default is white.

@property (nonatomic, copy) UIFont *itemFont;

The font used for list items. Default is bold size 14.

@property (nonatomic, assign) NSTextAlignment itemTextAlignment;

The text alignment of the item titles. Default center alignment.

@property (nonatomic, assign) RNGridMenuStyle menuStyle;

The list layout. Default <code>RNGridMenuStyleGrid</code>. Options are

RNGridMenuStyleDefault
RNGridMenuStyleList
@property (nonatomic, strong) UIView *headerView;

An optional header view. Make sure to set the frame height when setting. Same usage as UITableView header.

Credits

I finally got a solid implementation on responding to orientation changes by looking at the source of <code>MBAlertView</code>. Great project if you haven't seen it.

Sample icons provided by IcoMoon.

I followed Peter Steinberger's post on setting up UIAppearance.

The blurring algorithm was initially used from this post but then perfected by Club15CC in a pull request for <code>RNBlurModalView</code>.

Apps

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

  • ~~Images only~~
  • ~~Vertical list with text only~~
  • Advanced styles - Item borders, gradients (Mailbox)
  • UIAppearance with styles
  • ~~Title view~~
  • ~~Readme~~
  • Cocoapods
  • ~~More screenshots~~
  • Optional block callbacks

Contact

  • @nystrorm on Twitter
  • @rnystrom on Github
  • <a href="mailTo:rnystrom@whoisryannystrom.com">rnystrom [at] whoisryannystrom [dot] com</a>

License

See LICENSE.

Related Skills

View on GitHub
GitHub Stars1.3k
CategoryDevelopment
Updated1mo ago
Forks188

Languages

Objective-C

Security Score

95/100

Audited on Feb 13, 2026

No findings