Accordion Menu Using UITableViewController

2011-07-14T12:50:00.000-07:00

I think the idea for this menu feature came to me in a dream. In all seriousness it was late at night my coffee had just worn off and I was like "HEY I can add an accordion menu!" Problem solved. My implementation is insanely simple and animated which is awesome. So here we go.

The idea of an accordion menu is a menu with sections that are clickable and when clicked these sections expand up or down to reveal a menu item. The purpose is so you can neatly compact all your menu items into a nice small section and let them expand as needed.

This idea of menu items and them being clickable and expanding and moving and reacting to one another fits perfectly with in a UITableViewController. So that is where we will start first make a UITableViewController like so:


#import
#import "AccordionSelectorCell.h"
#import "AccordionDataCell.h"

@interface AccordionTableViewController : UITableViewController {
int numRowSelected;
}

@end

Here we are making a table view that has one section and twelve cells, the number of cells should be even to allow for half menu selectors and half being menu data. Each odd numbered cell is being made a DataCell so those cells will be filled with the content of your menu item. The even cells are being made SelectorCell so these will be the menu items that are clicked that correspond to a DataCell.


#pragma mark -
#pragma mark Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
// Return the number of sections.
return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
return 12;
}

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {

if(indexPath.row != 0 && (indexPath.row - 1) % 2 == 0)
{
cell = [[[InfoDataCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
else
{
cell = [[[InfoSelectorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.textLabel.text = @"Upgrade Name";
}
}

// Configure the cell...

return cell;
}

In the table view' s delegate is where the magic happens. in using the selected row we change the numRowSelected to the menu item that is one row beyond it if you want menu items to be titled from the bottom just change the "+" to a "-". Also the use of [beginUpdates] and [endUpdates] will cause the table to animate the change in height of the cells.


#pragma mark -
#pragma mark Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
// Navigation logic may go here. Create and push another view controller.
/*
To conform to the Human Interface Guidelines, selections should not be persistent --
deselect the row after it has been selected.
*/
[tableView deselectRowAtIndexPath:indexPath animated:YES];

// Main logic for selecting of the cell and it's corresponding dataCell
[tableView beginUpdates];
numRowSelected = indexPath.row + 1;
[tableView endUpdates];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if(indexPath.row == numRowSelected)
return 100.0; //returns floating point which will be used for a cell row height at specified row index
else if((indexPath.row - 1) % 2 == 0 || numRowSelected < 0)
{
return 0.0f; //returns floating point which will be used for a cell row height at specified row index
}

return 15.0f; //returns floating point which will be used for a cell row height at specified row index
}

in the viewDidLoad I am initializing which row should start selected and adding a special case if no menu items should appear.


#pragma mark -
#pragma mark View lifecycle

- (void)viewDidLoad {
[super viewDidLoad];

// The first menuItem to be opened on load or make this -1 to have zero menuItems appear open
numRowSelected = 1;
}

Now in the TableViewCells just set up each view how you want it to look. Also making the selectionStyle of the DataCell equal UITableViewCellSelectionStyleNone is rather important.

UIKit With Interface Builder for User Interfaces and Orientation

2011-07-13T12:59:00.000-07:00

After watching the WWDC 2010 Session video called Game Design and Development for the iPhone OS I was really inspired to integrate UIKit into my openGL projects. The plan is to make .xib files with Interface Builder and load them into my openGL project with the right orientation and a little functionality.

The top level view will be my EAGLView, which will contain all my subviews, which for this tutorial will be a heads-up-display(HUD) that appears when a tile is selected. My first task was getting my UIViewController setup with an associated .xib file. The file wizard will create a file in your project named whatever you-name -it and it will create a (samename).xib file that will be connected to that UIViewController.

Once the UIViewController file is made we can setup any IBOutlet objects you will need, for my example I will need three buttons: FireButton(btnFire), PlantButton(btnPlant), and WindButton(btnWind).


@interface UItower : UIViewController
{
IBOutlet UIButton * btnFire;
IBOutlet UIButton * btnPlant;
IBOutlet UIButton * btnWind;

}

@property (nonatomic, retain) IBOutlet UIButton * btnFire;
@property (nonatomic, retain) IBOutlet UIButton * btnPlant;
@property (nonatomic, retain) IBOutlet UIButton * btnWind;

@end

Double clicking on the .xib file will open it in Interface Builder. You will notice that the file wizard has hooked up a few things for us in Interface Builder.

The next step will be connecting the UIButtons to UIButtons that we make in Interface Builder. Drag a few UIButtons onto the View window and position them how you want. For this project I need the orintation to be Landscape mode so you can change the view window to landscape mode by clicking the rotated arrow button in the top right corner of the view window.

With your UIButtons positioned in your view and with any little customizations you need added to them; all you will need to do is connect the IBOutlet Buttons in the file owner to the UIButtons currently positioned in the view. Do this by clicking and dragging from the little circle beside the button in the connection window and hooking it to the button it corresponds too. Now save your .xib file and your done with half of the work.

Now that we have a .xib file all setup with good data we need to load it into the game and use it. For my case I am going to load my instance of the UIViewController I named "UItower" into my class called "TowerButtonSelected" and I will be initialing this "UItower" in my "initWithView" method. The interface will look like so:


#import

@class EAGLView;
@class UItower;

@interface TowerButtonSelected : ButtonTypeSelected {
UItower * contextMenu;
}
-initWithView:(EAGLView*)glView;
@end

The "initWithView" will be defined as:


-initWithView:(EAGLView*)glView
{
if([self init])
{
contextMenu = [[UItower alloc] initWithNibName:@"UItower"
bundle:[NSBundle mainBundle]];
[glView addSubview:contextMenu.view];
}
return self;
}

I am using "initWithNibName" passing the .xib file name as my first param and the main Bundle as my second. The second param should be whichever Bundle you have your .xib file in. Then I just add the contextMenu's view into the subview of EAGLView which I passed in from my MainGame class.

Unfortunately the .xib file doesn't tell the UIViewController that my Device is in Landscape mode so my interface is rotated in a bad way. To solve this you can overwrite "shouldAutorotateToInterfaceOrientation " but that is an uncomfortable solution because the Interface is still loaded wrong and only after a message has been sent to the UIViewController will it orientate itself. The best solution I have found is to overwrite a UIViewController and just rotate the view in that class's "viewDidLoad" then just derive off that UIViewController for the views that you want loaded in Landscape mode. For example:


#import
@interface LandscapeUIViewController : UIViewController {

}
@end

@implementation LandscapeUIViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.center = CGPointMake(160, 240);
self.view.transform = CGAffineTransformMakeRotation(degreesToRadian(90));
}
@end

Note that you will need to center the view and also rotate but that is mostly because we are dealing with a flipped X and Y direction because of the Portrait mode nonsense. So now we just derive UItower off of LandscapeUIViewController and your view will load properly in LandscapeRight mode.


@interface UItower : LandscapeUIViewController

Now for your application to orinate properly based on the Device's orientation you just have to move the EAGLView based on the UIDeviceOrientaion. For that I simple added a few lines in the delegate. Make sure to call


[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];

Then add an observer for the "UIDeviceOrientationDidChangeNotification" like so:


[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(didRotate:)
name:UIDeviceOrientationDidChangeNotification
object:nil];

For my specific project I wanted only Landscape mode available so my "didRotate" function looks like this:


- (void)didRotate:(NSNotification *)notification
{
UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation];

if(orientation == UIDeviceOrientationLandscapeLeft)
{
glView.transform = CGAffineTransformMakeRotation(degreesToRadian(0));
}
else if(orientation == UIDeviceOrientationLandscapeRight)
{
glView.transform = CGAffineTransformMakeRotation(degreesToRadian(180));
}
}

You can add animations instead of just changing the transforms to make a nice transition from one orientation to the next if you like.

Now our app will orientate for LandscapeLeft and LandscapeRight and the UIViewController we loaded in will be loaded with the LandscapeRight orientation that we wanted.

The Shady Wizard

Accordion Menu Using UITableViewController

UIKit With Interface Builder for User Interfaces and Orientation