Why is there space between the bottom of the imageView and the first TableViewCell in the UITable? - objective-c

Question

I have a view controller that sets up a UIImageView and a UITableView as follows in viewDidLoad:
// Root UIView
UIView *rootView = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
rootView.backgroundColor = [UIColor redColor];
self.view = rootView;
// Image View
NSString *path = [[NSBundle mainBundle] pathForResource:#"test320x180" ofType:#"JPG"];
UIImage *image = [[UIImage alloc] initWithContentsOfFile:path];
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height)];
self.imageView.image = image;
[self.view addSubview:self.imageView];
// Table View
self.tableView = [[UITableView alloc] initWithFrame:rootView.frame style:UITableViewStylePlain];
self.tableView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.tableView.contentInset = UIEdgeInsetsMake(image.size.height, 0, 0, 0);
self.tableView.contentOffset = CGPointMake(0, -image.size.height);
self.tableView.backgroundColor = [UIColor clearColor]; // so we can see the image view
[self.tableView reloadData];
[self.view addSubview:self.tableView];
There are 20 pts between the bottom of the image view, which has CGRect: (0, 0, 320, 180), and the first cell of the Table View whose origin is (0, 200), shown in red in the screen shot below.
In reveal, I see that the TableView starts 20 pts below the ImageView, screenshot below. My best guess is that the table view automatically accounts for the status bar but the image view does not.
My intention is to have the image and the first tableview cell flush, but I'm not sure how to guarantee this without adding the magic number 20 to my code.

Answer 1

[[UIScreen mainScreen] applicationFrame] returns a value that includes the entire height of the screen, including the height of the status bar, and always in screen coordinates.
For example on a 3.5-inch iPhone, in both portrait and landscape, you'll get the same application frame:
{ 0,0, 320, 480 } // iPhone 3.5-inch, applicationFrame in both landscape and portrait
When you assign a frame with 0 for origin.y to the image view, then add it via:
[self.view addSubview:self.imageView];
... then the self.imageView's top 20 pixels are hidden beneath the status bar.
Please note, sometimes the status bar's height is doubled, such as by a phone call, or recording audio within an app, or Personal Hotspot/tethering. To survive that, you need the value from:
CGSize size = [[UIApplication sharedApplication] statusBarFrame].size;
This is returned in Screen coordinates, so the returned rect may be:
{ 0,0, 320, 20 } // iPhone 3.5-inch, portrait
{ 0,0, 20, 480 } // iPhone 3.5-inch, landscape
{ 0,0, 320, 40 } // iPhone 3.5-inch, portrait when tethering or other phone call
{ 0,0, 40, 480 } // iPhone
So the quick solution is to use something like the above CGRect size code with the following:
CGFloat height = (size.width < size.height? size.width : size.height);
3.5-inch, landscape when tethering or other phone call
Set the size of the frame of rootView using a CGRect that is
adjusted for the status bar height, so the imageView.frame.origin.y == 0 is
not hidden by the status bar
Set imageView's frame origin y to the status bar height (which means the rootView's content is still overlapped by the status bar).

Answer 2

UITableView is a subclass of UIScrollView so check the contentInset property and also set the UIViewController property automaticallyAdjustsScrollViewInsets is set to NO.
I think automaticallyAdjustsScrollViewInsets applies insets to all scroll views to account for status bars, button bars and navigation bars.

Answer 3

I faced this same issue, while i was working in storyboard where my tableview was having same 20 pixel gap. so what you need to do is:
1.) select your view controller and in attribute inspector deselect "Adjust scroll view inset". (this will remove the gap - that tableview is presuming for navigation bar)
2.) select your tableView and in size inspector set the "section header height" == '1' (this will remove the 20 pixel gap - that tableview is presuming for status bar)
Hope will help you!
Thanks