Feeling pretty good about by mad iOS coding skillz, I decided to try to do something more challenging. Follow me as I redesign the main view of fleetng.
Here's the original design for the main view of the app.
Since fleetng is a photo-sharing app, I want to dedicate as much screen real estate to showing photos as possible. I also want the app to be simple to use from a navigation point of view. The above design fails both of these criteria.
The first thing that needs to go is the Navigation Bar. It's not obvious from the mockup above but all the Navigation Bar does is house a button to allow the user to access their profile. This is a lot of wasted space for very little return. Making the Navigation Bar transparent helps, but I'm still not happy with the look and feel.
The best thing to do is to remove the Navigation Bar completely. This means that the Profile button has to be relocated to the Tab Bar, which means that the Tab Bar needs to be reworked.
In the new design the Profile button is moved to the left side of the Tab Bar, the camera icon becomes the central focus of the Tab Bar, and on the right side is the "peel" button that will eventually allow users to filter what is displayed (sort of like how the Map app works).
The location display and Map button (the globe in the original design) are combined in the new design. Clicking on the location name opens up a map that allows you to change location. The date display and Calendar button are combined so that when the user clicks on the date a calendar opens up to eventually allow the user to filter photos by date. This to me is a much cleaner look compared to the previous design.
Hiding the Navigation Bar should be pretty easy, right? Adding the following to viewDidLoad should do the trick:
[self.navigationController setNavigationBarHidden:YES animated:NO];
And it does work. The Navigation Bar is hidden. Unfortunately when you move to any new views the Navigation Bar in those views are also hidden. Well, adding the following to those views should fix the problem:
[self.navigationController setNavigationBarHidden:NO animated:NO];
Things should be working now. In the main view the Navigation Bar is hidden, when you change to another view, say Profile, the Navigation Bar is not hidden and appears as normal. However when you go back to the main view from Profile view, the Navigation Bar is not hidden. D'oh!
After spending a couple of hours on Google I stumble on a forum thread from 2009 that offers a solution - you actually need to hide the Navigation Bar in three places when the main view is loaded!
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
// Custom initialization
[self.navigationController setNavigationBarHidden:YES animated:NO];
}
return self;
}
- (void)viewDidLoad {
[self.navigationController setNavigationBarHidden:YES animated:NO];
[super viewDidLoad];
}
-(void) viewDidAppear: (BOOL)animated {
[[self navigationController] setNavigationBarHidden:YES animated:NO];
// make sure to call the same method on the super class!!!
[super viewDidAppear:animated];
}
This does the job with one minor niggle - when you return to the main view the Navigation Bar appears briefly before disappearing. The fix for this is pretty simple - all you have to do is change viewDidAppear to viewWillAppear.
So there you have it, an easy way to hide the Navigation Bar. I'm sure that there are better and simpler ways of doing this so let me know in the comments. I'm always up for learning something new.
