iOS - List Improvements

To make the iOS view more visually appealing, I'll add both a small image and an additional line of text to each row. Fortunately, iOS provides some additional default templates for just such an approach. (You can read about the iOS options here.)

In my situation, I'll use the UITableViewCellStyleSubtitle style, because it contains the three properties I need: An image field, and two text fields.

All coding changes are limited to the LocationListViewController.m file:

  1. #import "LocationListViewController.h"
  2. #import "FishingSpot.h"
  3.  
  4. @implementation LocationListViewController {
  5. NSMutableArray *locations;
  6. id<EventManager> eventManager;
  7. UIImage *imgPrivate, *imgPublic;
  8. }
  9.  
  10. - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
  11. {
  12. self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
  13. if (self) {
  14. locations = [[NSMutableArray alloc] init];
  15. }
  16. return self;
  17. }
  18.  
  19. -(void) setEventManager: (id <EventManager>)_eventManager {
  20. eventManager = _eventManager;
  21. }
  22.  
  23. -(void) setLocations: (NSMutableArray *) _locations {
  24. [locations addObjectsFromArray:_locations];
  25. }
  26.  
  27. -(void) clearAll {
  28. [locations removeAllObjects];
  29. }
  30.  
  31. -(void)viewDidLoad {
  32. [super viewDidLoad];
  33. imgPrivate = [UIImage imageNamed:@"img_private.png"];
  34. imgPublic = [UIImage imageNamed:@"img_public.png"];
  35.  
  36. [self.locationTableView setDataSource:self];
  37. [self.locationTableView setDelegate:self];
  38. }
  39.  
  40. -(void)viewWillAppear:(BOOL)animated {
  41. [super viewWillAppear: animated];
  42. [self.locationTableView reloadData];
  43. }
  44.  
  45. - (void)viewDidUnload {
  46. [super viewDidUnload];
  47. [self clearAll];
  48. }
  49.  
  50. -(IBAction)mapViewButtonClicked:(id)sender {
  51. [eventManager handleEvent:EM_NAV_LOCAL_SPOTS_MAP withData:nil];
  52. }
  53.  
  54. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  55. return locations.count;
  56. }
  57.  
  58. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  59. static NSString *CellIdentifier = @"LocationListViewControllerCell";
  60. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
  61. if (cell == nil) {
  62. // cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
  63. cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
  64. }
  65. FishingSpot* fs = (FishingSpot *)([locations objectAtIndex:[indexPath row]]);
  66.  
  67. [[cell textLabel] setText:fs.name];
  68. [[cell detailTextLabel] setText:fs.comments];
  69.  
  70. if ([fs.owner isEqualToString:@"public"]) {
  71. [[cell imageView] setImage:imgPublic];
  72. } else {
  73. [[cell imageView] setImage:imgPrivate];
  74. }
  75. return cell;
  76. }
  77.  
  78. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
  79.  
  80. }
  81.  
  82. @end

Comments:

  • Line 7: I declare two UIImage objects to store the images I'll be displaying.
  • Lines 33-34: Load two images: One to display public fishing spots, and the other for the user's private fishing spots. (I added two 50x50 images to the project to support this functionality.)
  • Line 63: Instead of using the default cell style, I'll use the cell style named UITableViewCellStyleSubtitle
  • Lines 65 - 68: Locate the fishing spot requested, and update the textLabel and detailTextLabel properties appropriately.
  • Lines 70 - 74: Update the image based on whether the fishing spot is public, or private to the current user.

Once these updates have been made, the updated view is as follows:



The updated design provides the user with a much better representation of the underlying data.

I'll now update the Android view to support the same visual design.