Original menu using a penrose triangle
It is a UIViewController container that show a Penrose triangle to change controller. With multiple options you can drag the from the top or the bottom, add a button on each side of the triangle, turn the triangle to change controller, etc.
This is just for fun.
- Drag&Drop /RSPenrose folder in your project (With RSPenroseView - RSPenroseViewController - UIViewController+RSPenrose)
- Create a subclass of
RSPenroseViewController
. I call itRootPenroseViewController
. - In the Storyboard, create a blanck
UIViewController
and change it to aRootPenroseViewController
. - In the Storyboard, add Storyboard Identifier to each other Controller you want, I have "FirstVC", "SecondVC" and "ThirdVC".
- Add the following lines to
RootPenroseViewController.m
:
- (void)viewDidLoad
{
[super viewDidLoad];
// Add buttons
[self addButtonsToTop:@"First" left:@"Second" right:@"Settings"];
// Initializa main controller
[self setMainControllerWithStoryboardID:@"FirstVC"];
[self.penroseView selectSide:0];
}
- Finally, to change controller when side is selected, add the following method (delegate method) :
#pragma mark - RSPenroseViewController Delegate
-(void)didSelectPenroseButtonAtIndex:(int)index
{
switch (index) {
case 0:
[self setMainControllerWithStoryboardID:@"FirstVC"];
[self.penroseView selectSide:0];
break;
case 1:
[self setMainControllerWithStoryboardID:@"SecondVC"];
[self.penroseView selectSide:1];
break;
case 2:
[self setMainControllerWithStoryboardID:@"ThirdVC"];
[self.penroseView selectSide:2];
break;
default:
break;
}
}
That's it !
You can use the following options to customize or change behaviour.
Penrose can appear from Top (default) or Top
Add this in RootPenroseViewController
awakeFromNib
-(void)awakeFromNib
{
// Change side appear
[self setSide:RSPenroseSideAppearTop];
// OR
// [self setSide:RSPenroseSideAppearBottom];
}
You can change the color of each side of the triangle and the selected side.
Add this in RootPenroseViewController
viewDidLoad
// Sides Colors
[self.penroseView setLeftColor:[UIColor colorWithRed:0.907806F green:0.922750F blue:0.919288F alpha:0.97F]];
[self.penroseView setRightColor:[UIColor colorWithRed:0.907806F green:0.922750F blue:0.919288F alpha:0.97F]];
[self.penroseView setTopColor:[UIColor colorWithRed:0.907806F green:0.922750F blue:0.919288F alpha:0.97F]];
[self.penroseView setSelectColor:[UIColor colorWithRed:0.874510F green:0.945098F blue:0.929412F alpha:0.97F]];
And you can enable/disable if the selected side is with a different color :
[self.penroseView setColorSelectedSide:YES];
You can disable the ability to rotate triangle
[self.penroseView setCanRotate:NO];
Toggle/Change the state of the triangle with this methods
[self.rootPenroseController togglePenroseView];
[self.rootPenroseController hidePenroseView];
[self.rootPenroseController showPenroseView];
And you can use the delegate methods in RootPenroseViewController
:
-(void)didShowPenrose
{
NSLog(@"Penrose Did Show");
}
-(void)didHidePenrose
{
NSLog(@"Penrose Did Hide");
}
Access to the RootPenroseViewController on each child controller. Just
#import "UIViewController+RSPenrose.h"
And now you can do what you want !
[self.rootPenroseController setSide:RSPenroseSideAppearTop];
[self.rootPenroseController togglePenroseView];
/* ... */
You have three ways to add buttons to the triangle :
- Basic, on each sides passing titles as parameters
[self addButtonsToTop:@"First" left:@"Second" right:@"Settings"];
- Only on the top side passing titles as parameters
[self addButtonsToPenroseViewWithTitles:@[@"First",@"Second",@"Settings"]];
- Or on your own way, passing UIButtons as parameters
[self addButtonsToPenroseView:@[/* -- Array of UIButton -- */]];