Successfully reported this slideshow.

MGATableView

0

Share

Upcoming SlideShare
Table views
Table views
Loading in …3
×
1 of 27
1 of 27

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

MGATableView

  1. 1. MGATableView Making easy UITableViews easy Pumptheory.com
  2. 2. Static UITableView Easy right? 2
  3. 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. 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. 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. 6. And We’re Not Even Handling Taps Yet! 5 Pumptheory.com
  7. 7. And We’re Not Even Handling Taps Yet! Source: http://www.flickr.com/photos/gillianlau/4773744812/ 5 Pumptheory.com
  8. 8. MGATableView 6 Pumptheory.com
  9. 9. MGATableView Much Better Source: The CheezBurger Network 6 Pumptheory.com
  10. 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. 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. 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. 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. 14. Headers/Footers/Separators • MGATableHeader • MGATableFooter • MGATableSectionBreak 11 Pumptheory.com
  15. 15. In Depth 12 Pumptheory.com
  16. 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. 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. 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. 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. 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. 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. 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. 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. 24. Demo 21 Pumptheory.com
  25. 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. 26. Link • http://github.com/aufflick/aufflick-cocoa-additions 23 Pumptheory.com
  27. 27. ~fin Pumptheory.com

×