RNGridMenu
A grid menu with elastic layout, depth of field, and realistic animation.
Install / Use
/learn @rnystrom/RNGridMenuREADME
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
node-connect
347.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
107.8kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
347.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
347.0kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
