1.
MGATableView
Making easy UITableViews easy
Pumptheory.com

2.
Static UITableView
Easy right?
2

3.
Basics of Table View Creation
The creation of a table view requires the interaction of several entities in an application:
the client, the table view itself, and the table viewʼs data source and delegate. The client,
delegate, and data source are often the same object, but can be separate objects. The
client starts the calling sequence, diagrammed in Figure 4-1 (page 34).
1." The client creates a UITableView instance in a certain frame and style. It can do
this either programmatically or in Interface Builder. The frame is usually set to the screen
frame, minus the height of the status bar or, in a navigation-based application, to the
screen frame minus the heights of the status bar and the navigation bar. The client may
also set global properties of the table view at this point, such as its autoresizing behavior
or a global row height.
See “Creating a Table View Application the Easy Way” (page 35) and “Creating a Table
View Programmatically” (page 39) for information on creating table views using Interface
Builder and programmatically, respectively.
3 Pumptheory.com

4.
Basics of Table View Creation
The creation of a table view requires the interaction of several entities in an application: the client, the table view itself, and the table viewʼs data source and delegate. The client,
delegate, and data source are often the same object, but can be separate objects. The client starts the calling sequence, diagrammed in Figure 4-1 (page 34).
1." The client creates a UITableView instance in a certain frame and style. It can do this either programmatically or in Interface Builder. The frame is usually set to the screen
frame, minus the height of the status bar or, in a navigation-based application, to the screen frame minus the heights of the status bar and the navigation bar. The client may also
set global properties of the table view at this point, such as its autoresizing behavior or a global row height.
See “Creating a Table View Application the Easy Way” (page 35) and “Creating a Table View Programmatically” (page 39) for information on creating table views using Interface
Builder and programmatically, respectively.
2." The client sets the data source and delegate of the table view and sends reloadData to it. The data source must adopt the UITableViewDataSource protocol and the
delegate must adopt the UITableViewDelegate protocol.
3." The data source receives a numberOfSectionsInTableView: message from the UITableView object and returns the number of sections in the table view. Although
this is an optional protocol method, the data source must implement it if the table view has more than one section.
4." For each section, the data source receives a tableView:numberOfRowsInSection: message and responds by returning the number of rows for the section.
5." The data source receives a tableView:cellForRowAtIndexPath: message for each visible row in the table view. It responds by configuring and returning a
UITableViewCell object for each row. The UITableView object uses this cell to draw the row.
The diagram in Figure 4-1 shows the required protocol methods as well as the numberOfSectionsInTableView: method. (Note that zero is a valid value to return for number
of sections.) Populating the table view with data occurs in steps 3 through 5; “Populating the Table View With Data” (page 40) describes how you implement the methods
mentioned in these steps.
The data source and the delegate may implement other optional methods of their protocols to further configure the table view. For example, the data source might want to provide
titles for each of the sections in the table view by implementing tableView:titleForHeaderInSection:. “Optional Table-View Configurations” (page 45) describes some of
these optional table-view customizations.
You create a table view in either the plain style (UITableViewStylePlain) or the grouped style (UITableViewStyleGrouped). (You specify the style when you initialize the
table view by calling, directly or indirectly, the initWithFrame:style: method. Although, the procedure for creating a table view in either styles is identical, you may want to
perform different kinds of configurations. For example, because a grouped table view generally presents item detail, you may also want to add custom accessory views (for
example, switches and sliders) or custom content (for example, text fields) to cells in the delegateʼs tableView:cellForRowAtIndexPath: method; “A Closer Look at Table-
View Cells” (page 47) gives an example of this.
4 Pumptheory.com

5.
Basics of Table View Creation
The creation of a table view requires the interaction of several entities in an application: the client, the table view itself, and the table viewʼs data source and delegate. The client, {
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
delegate, and data source are often the same object, but can be separate objects. The client starts the calling sequence, diagrammed in Figure 4-1 (page 34).
return [regions count];
1." The client creates a UITableView instance in a certain frame and style. It can do this either programmatically or in Interface Builder. The frame is usually set to the screen
frame, minus the height of the status bar or, in a navigation-based application, to the screen frame minus the heights of the status bar and the navigation bar. The client may also
}
set global properties of the table view at this point, such as its autoresizing behavior or a global row height.
- (NSString *)tableView:(UITableView *)tableView
See “Creating a Table View Application the Easy Way” (page 35) and “Creating a Table View Programmatically” (page 39) for information on creating table views using Interface
titleForHeaderInSection:(NSInteger)section {
Builder and programmatically, respectively.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
// The header for the section is the region name -- get this from
2." The client sets the data source and delegate of the table view and sends reloadData to it. The data source must adopt the UITableViewDataSource protocol and the
delegate must adopt the UITableViewDelegate protocol. the region at the section index.
static NSString *MyIdentifier = @"MyIdentifier";
3." The data source receives a numberOfSectionsInTableView: message from the UITableView object and returns the number of sections in the table view. Although
Region *region = [regions objectAtIndex:section];
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
this is an optional protocol method, the data source must implement it if the table view has more than one section.
4." For each section, the data source receives a tableView:numberOfRowsInSection: message and responds by returning the number of rows for the section.
- (NSInteger)tableView:(UITableView *)tableView [region name];
if (cell == nil) { return
numberOfRowsInSection:(NSInteger)section { message for each visible row in the table view. It responds by configuring and returning a
5." The data source receives a tableView:cellForRowAtIndexPath:
}
UITableViewCell object for each row. The UITableView initWithStyle:UITableViewCellStyleDefault reuseIdentifier:MyIdentifier] autorelease];
cell = [[[UITableViewCell alloc] object uses this cell to draw the row.
// Number of rows is the number of time zones in the region for
the specified section. required protocol methods as well as the numberOfSectionsInTableView: method. (Note that zero is a valid value to return for number
The diagram in Figure 4-1 shows the
}
of sections.) Populating the table view with data occurs in steps 3 through 5; “Populating the Table View With Data” (page 40) describes how you implement the methods
mentioned in these steps.
Region *region = [regions objectAtIndex:section];
Region *region = [regions objectAtIndex:indexPath.section];
The data source and the delegate may implement other optional methods of their protocols to further configure the table view. For example, the data source might want to provide
view by implementing tableView:titleForHeaderInSection:.
titles for each of [region.timeZoneWrappers count];
return the sections in the table*timeZoneWrapper = [region.timeZoneWrappers “Optional Table-View Configurations” (page 45) describes some of
TimeZoneWrapper objectAtIndex:indexPath.row];
these optional table-view customizations.
} You create a cell.textLabel.text = style (UITableViewStylePlain) or the grouped style (UITableViewStyleGrouped). (You specify the style when you initialize the
table view in either the plain timeZoneWrapper.localeName;
table view by calling, directly or indirectly, the initWithFrame:style: method. Although, the procedure for creating a table view in either styles is identical, you may want to
perform different kinds of configurations. For example, because a grouped table view generally presents item detail, you may also want to add custom accessory views (for
return cell;
example, switches and sliders) or custom content (for example, text fields) to cells in the delegateʼs tableView:cellForRowAtIndexPath: method; “A Closer Look at Table-
View Cells” (page 47) gives an example of this.
}
4 Pumptheory.com

6.
And We’re Not Even Handling
Taps Yet!
5 Pumptheory.com

7.
And We’re Not Even Handling
Taps Yet!
Source: http://www.flickr.com/photos/gillianlau/4773744812/
5 Pumptheory.com

8.
MGATableView
6 Pumptheory.com

9.
MGATableView
Much Better
Source: The CheezBurger Network
6 Pumptheory.com

10.
MGATableView
• Good for small, static (or nearly static) table views
• eg. menu hierarchies
• How many times have you made one of those by hand…
• All declared in code
7 Pumptheory.com

11.
MGATableView—HowTo
• Make a normal UIViewController
• You need an MGATableView
• Just instantiate one
• OR
• Connect a UITableView in Interface Builder and change class
to MGATableView
• Pass in an NSArray of:
• Cells or Containers
• Headers, Footers and Separators
8 Pumptheory.com

12.
MGATableView—HowTo
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"Demo Menu";
MGATableView *tableView = (MGATableView *)self.view;
tableView.mgaDataSource.dataArray = [NSArray arrayWithObjects:
[MGATableHeader headerWithString:@"Demo Screens"],
[MGATableViewCellSubMenu subMenuWithTitle:@"MGATableView"
viewControllerClass:[DemoOfMGATableView class]],
[MGATableViewCellLabel containerWithTitle:@"FTW" didSelectActionBlock:^{
NSLog(@"FTW!");
}];
nil];
}
9 Pumptheory.com

13.
Cell/Container Options
• cells - instances of UITableViewCell or a subclass
• cell
containers - instances of MGATableViewCellContainer,
one of the provided subclasses or your own
• MGATableViewCellLabel
• MGATableViewCellSubMenu
10 Pumptheory.com

14.
Headers/Footers/Separators
• MGATableHeader
• MGATableFooter
• MGATableSectionBreak
11 Pumptheory.com

15.
In Depth
12 Pumptheory.com

16.
Core Classes
• MGATableViewDataSource
• Implements both the data source AND delegate protocols
for a table view
• Driven by the data you provide in an NSArray
• MGATableView
• Conveniencewrapper that puts a UITableView together
with an MGATableViewDataSource
13 Pumptheory.com

17.
Content Classes
• UITableViewCell
• You can provide a normal table view cell.
• Sinceyou are (probably) not providing your own delegate
you have no way to intercept taps etc. so it's limited to
providing a non-interactive cell.
14 Pumptheory.com

18.
Content Classes
• MGATableViewCellContainer
• This
wraps a UITableViewCell along with some user data
and actions (as blocks) to perform when it is tapped or its
accessory view is tapped.
• Thereare convenience methods to ease creating these
containers, but you still have to create your own
UITableViewCell instance.
15 Pumptheory.com

19.
Content Classes
• MGATableViewCellLabel
• This
is a subclass of MGATableViewCellContainer which will
create the UITableViewCell for you
• using an NSString to set the title of the cell
• You
can attach actions, since it's an
MGATableViewCellContainer
• You can alter the cell yourself eg. add an image
16 Pumptheory.com

20.
Content Classes
• MGATableViewCellSubMenu
• Warning - contains magic!
• Toweave its magic, MGATableViewCellSubMenu assumes
that the delegate object attached to
[UIApplication sharedApplication]
has a property navigationController.
17 Pumptheory.com

21.
Content Classes
• MGATableViewCellSubMenu
• You instantiate an MGATableViewCellSubMenu with:
• an NSString title
•a Class Object
• which must be a subclass of UIViewController which is
suitable for pushing onto a MGATableViewCellSubMenu
• Whenthe cell is tapped, an instance of that class is instantiated
and pushed onto the navigation
• Finally the tapped cell is deselected.
18 Pumptheory.com

22.
Separator Classes
• MGATableHeader
• An object with an NSString property for it's title
• Wherever this appears in the array, a new section will start
with this header
• MGATableFooter
• LikeMGATableHeader, except this creates a footer before
starting a new section
19 Pumptheory.com

23.
Separator Classes
• MGATableSectionBreak
• Ifyou provide either (or both) a header and footer, a new
section will automatically be created. An instance of this
class is only necessary if you want a section break without
either a header or a footer.
20 Pumptheory.com

24.
Demo
21 Pumptheory.com

25.
Post Script
• You
can add a delegate object to the
MGATableViewDataSource object to intercept delegate
messages
• Or
you can make your own delegate and just use it as a
data source
22 Pumptheory.com

26.
Link
• http://github.com/aufflick/aufflick-cocoa-additions
23 Pumptheory.com

27.
~fin Pumptheory.com