ios interface builder layout oddity - ios

I'm using XCode+IB to layout a pretty simple view. There is a standard NavigationController navigation bar at the top. Inside the main View is another View which contains a Label, and then a table below that takes up the rest of the screen. I put the label in this container view because I want that area below the navigation bar to have a background color (gray).
The problem is that even though the main View starts just below the navigationBar, the label's container view is exists underneath the navigation bar. Sort of. You see, the label appears below the nav bar, but the gray background is somehow under the navigation bar. If I set the height of the label's view to be 75px, it just starts to appear below the navigation bar. (22+44 for statusbar and navigation bar)
Auto-layout is disabled.
So why is the View container starting below the navigation bar for the background? (but not its internal label?)
Since IOS7, I use this in the ViewController so that the content starts below the navigation bar, instead of underneath it.
if ([self respondsToSelector:#selector(edgesForExtendedLayout)]){
self.edgesForExtendedLayout = UIRectEdgeNone;
}
I realize alternatively I can set the main view's background or make the label especially large perhaps and give it a background, but I'd like to see why this isn't working first.
EDIT:
I added a feature to this View where the main view will shift upwards 125px when the keyboard is opened for some UITextFields. Interestingly, the entire view shifted except for the Label's View container. That view remained in place while it's parent view shifted up and back. The label itself shifted up and down however. So once again, the middle View seems linked to the Window, and not the actual main View...

Check if you have Adjust Scroll view Insets on!
Go to your view controller, and it is under the Attributes Inspector

You might want to consider a header cell if you just want to be able to post a message or instructions just below the nav bar. You can then avoid the extra UIView thing. The header cell will not scroll with the table view if that is your concern and it will position just below nav and above the rest of the table cells. Here is a simplified example that uses a custom header cell setting the background color. You can also drop UILabels, etc. into the cell via IB if you choose.
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
MyCustomHeaderCell *headerCell = [tableView dequeueReusableCellWithIdentifier:#"MyCustomHeaderCell"];
headerCell.backgroundColor = [UIColor grayColor];
return headerCell;
}

Related

Can't get translucent navigation bar on tableviewcontroller. Works fine with view controller and tableview

I've got a gradient background that I want to show through both the navigation bar and the tab bar. I have them set to "translucent black". If I create a ViewController and put a TableView on it, this works perfectly. However, I can't get it to work properly with a TableViewController. The tab bar works fine, but the navigation bar ends up black. If I turn off "Adjust Scroll View Insets", then the navigation bar looks the way I want it, but the top half of the first table view row gets cut off (see examples). The gradient is on the background view. The background colour of the tableview is clear.
Is there any way to get the same effect on a TableViewController? Do I need to somehow make the heading or first row of the tableview be the background that goes under the nav bar?
ViewController with TableView added:
TableViewController with "Adjust Scroll View Insets" ON:
TableViewController with "Adjust Scroll View Insets" OFF:
After doing a test I think you'd need:
Adjusts Scroll View Insets ON
Extend Edges - Under Top Bars ON
No. 1 allow the UITableView to cover the entire screen (including under the navigation bar) and No. 2 adds a space at the top of the UITableView content so that the content is not hidden under the navigation bar.
I ran into a similar issue trying to set a full screen background on a static table view controller with a clear navigation bar. I solved it by using a backgroundView on my tableView instead of setting backgroundColor. For example:
myTableView.backgroundView = UIImageView(image: UIImage(named: "backgroundImg.png"))
I set my navigation bar to clear, but you could style that however you like:
navigationController?.navigationBar.backgroundColor = UIColor.clear
I also had to set Extend Edges - Under Top Bars ON

Add a UIImageView to the back of NavigationBar (NOT background image)

I am trying to add a UIImageView to the back of a navigation bar.
The reason is because I want to create a UITableView whose navigation bar is actually a picture (with back button on the left) but I want the picture to scroll with the tableview and when the picture is fully scrolled out. The navigation bar is shown as per normal.
My solution to this problem:
Add a UIImageView to the top of the UITableView and make the navigation bar transparent. Set a contentOffset for the UITableView which is a subclass of UIScrollView so that when the view is presented, it looks like the picture is filling the navigation status bar.
Problem:
If I scroll up, instead of bouncing back, the transparent status bar is shown (with a color of the background as it is transparent).
Possible way to solve this new problem:
I was thinking of trying to limit the ScrollView size to get around with problem but failed.
So I feel is it possible to add the UIImageView to the "back" of the navigation bar so that it is there without any offset? Since that way, my life will be much easier.
Any suggestions on solving this or another new approach to get the same UI/effect?
Related question.
I would do this by adding either a table header or cell at the top of the table which contains your image.
Create the table view so that it extends all the way to the top of the screen. Extend Under Top Bars option. I have not done this with a UITableViewController but I have done this with a UITableView embedded inside a UIViewController's view with the top constraint set to 0 for the view rather than the top layout guide.
Now when you run this your table will fill the whole screen and the top header or cell will be at the top showing your picture.
When you scroll you can either use the UIScrollViewDelegate to detect the movement or implement tableView:didEndDisplayingCell:forRowAtIndexPath:
I'm not 100% sure when you want the navigation bar to go non clear. If its when the image goes off screen then didEndDisplayingCell should be good. If its when the cell bottom passed under the bottom of the navigation bar then scroll view might be your only option.
This will also bounce as you expect when you pull down and it should snap back to the top.
Hope this helps.

Removing extra space at top of uicollectionview

I have xib in which button and uicollectionview appears as follows:
Now, when I run it , it appears as follows:
I want to remove white space above photos. I want to show photos just below from button. I have not marked header section in xib too. But, when I scroll up, the images move upto just below buttton too.This means frame is starting from just below button, but, I am getting extra white space.
So, can anybody help me to remove extra white space?
Add this code to your Controller class
- (void)viewDidLoad
{
[super viewDidLoad];
self.automaticallyAdjustsScrollViewInsets = NO;
}
Here is doc for automaticallyAdjustsScrollViewInsets
Default value is YES, which allows the view controller to adjust its scroll view insets in response to the screen areas consumed by the status bar, navigation bar, and toolbar or tab bar. Set to NO if you want to manage scroll view inset adjustments yourself, such as when there is more than one scroll view in the view hierarchy.
I had the same problem. What work for me was to set automaticallyAdjustsScrollViewInsets = NO not only on the ViewController containing the CollectionView but on its parent ViewController too, because the child ViewController was in a ContainerView.
It can be done in the Interface builder too:
Auto adjust scroll view insets

UITableViewController Inside UINavigationController and UITabBarController Bottom Inset Off

I have a UITableView inside a UINavigationController that's inside a UITabBarController. There is a view on the bottom (I'll call it bottomView) between the table view and the tab bar that needs to stay at the bottom as the table view scrolls, so I can't put it as a footer in the table view.
The issue is that when i scroll to the bottom of the table view, there is an empty space the same height as the tab bar between the lowest content (and the scroll bar) and the top of bottomView.
I think this is because the table view is trying to automatically compensate for the tab view at the bottom, but I can't position it all the way at the bottom because of bottomView.
here's my IB layout:
and the display (last tableViewCell highlighted):
If I understand your question correct you need to set a contentInset to your tableView like this:
[self.tableView setContentInset:UIEdgeInsetsMake(0,0,44,0)];
Edit:
Ok I think I got it. Set:
self.automaticallyAdjustsScrollViewInsets=NO;
I've seen this same nav controller->tab bar->tableview situation frustratingly cause the tableview to partially overlap with the navigation bar, instead of not reaching the tab bar. To anyone having this issue when using a UITableView: ensure your navigation bar is not translucent. If you want to use this setup with a translucent navigation bar, select the UITabBarController in the Interface Builder and uncheck the "extend edges under top bars" option in the attributes inspector.

UISearchBar on UITableView strange offset issue

I have a UITableView which has a UISearchBar subview. This is all on the view of a UIViewController along with a few other subviews (labels, text fields and such).
The search bar and content offset of the table are acting quite strangely, but it seems dependent on the order in which these views are added to the main view in the xib. I created a sample project with just my table/search and a label in order to test, and the result is the same. When the table is added after the label, everything works fine:
Setup:
Correct and Expected Result:
However, if I simply change the order in which my 2 subviews sit on the main view (aka table added before the label) then weird things start happening.
Apparently bad setup:
Weird offset of Search Bar:
I'm not changing anything else whatsoever, so why does Xcode seem to care which order these subviews are added to the main view?? If I scroll up on the "bad" table setup, the search bar disappears immediately at its top edge, but the table's content will continue to scroll up until it reaches the top of the frame that was set in the xib. Scroll back down and the search bar doesn't reappear until the strange lowered location. This is in Xcode 5.1.1, not the new beta. The result is the same with or without Autolayout turned on.
Any idea why this is happening? Is this a bug, or am I missing something? (I didn't post any code because all I'm doing is setting the number of sections, rows, and setting the text on the cell. Not messing with content insets, offset, anything. I load the view from the app delegate as the root of a nav controller)
This happens because a UIViewController's property called automaticallyAdjustsScrollViewInsets
With iOS 7, UIViewControllers have a property called
automaticallyAdjustsScrollViewInsets, and it defaults to YES. If you
have a scroll view that is either the root view of your view
controller (such as with a UITableViewController) or the subview at
index 0, then that property will adjust both the contentInset and the
scrollIndicatorInsets. This will allow your scroll view to start its
content and scroll indicators below the navigation bar (if your view
controller is in a navigation controller).
From Big Nerd Ranch
If you are using storyboards, you can change it by selecting the view controller and in the attributes inspector deselect Adjust scroll view insets.
Here is its description from apple documentation:
Default value is YES, which allows the view controller to adjust its
scroll view insets in response to the screen areas consumed by the
status bar, navigation bar, and toolbar or tab bar. Set to NO if you
want to manage scroll view inset adjustments yourself, such as when
there is more than one scroll view in the view hierarchy.
I have same problem before about position of tableview and searchbar. i tried the following and it works for me.
If you do not write code for that and if it is only problem of xib or storyboard then try all outlet's autosizing and origin setting to fix its position and see the difference. it may be work for you.
Update : automaticallyAdjustsScrollViewInsets has been deprecated in ios 11 and a new field contentInsetAdjustmentBehavior has been introduced.
if #available(iOS 11.0, *) {
tableview.contentInsetAdjustmentBehavior = .never
} else {
automaticallyAdjustsScrollViewInsets = false
}
UITableView header can contains only one UIView, so if you need UISearchBar plus UILabel, you need to wrap they into UIView and add this view as UITableView header.

Resources