iOS 7 UIToolBar Overriding With Status Bar

Question

I have upgraded my project from iOS 6 to iOS 7 but there seems a little problem. The status bar and a tool bar is overriding and very close to each other. The tool bar was earlier added by manually dragging it in the storyboard. This is how its showing up:

toolbar

I have seen a few questions that are suggesting to use "positionForBar:" and "- (UIBarPosition)positionForBar:(id)bar" but i don't know exactly how to use them, a little explanation and easy way to do it might help. Thanks!

UPDATE: Following is some code that also needs a fix. It was working fine earlier but since the detailviewcontroller (WebViewController) is now embeded inside a navigation controller, the below code is causing an exception. Looks like i need to modify the first line in this method.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

        WebViewController *wvc = [self.navigationController.parentViewController childViewControllers][1];
        RSSItem *entry = [[channel items] objectAtIndex:[indexPath row]];
        wvc.title = entry.title;
        wvc.urlString = entry.link;   
}

score 6 · Answer 1 · answered Sep 21 '13 at 20:32

6

_toolBar.delegate = self;

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
    CGRect frame = _toolBar.frame;
    frame.origin = CGPointMake(0, [UIApplication sharedApplication].statusBarFrame.size.height);
    _toolBar.frame = frame;

    return UIBarPositionTopAttached;
}

portrait bar

landscape bar

answered Sep 21 '13 at 20:32

Luniz

59
3

What if the view is in the container inside a super view. What to do then? – AJ112 Sep 21 '13 at 21:03
Your toolBar is inside the container? – Luniz Sep 21 '13 at 21:17
Toolbar is in the view but that view is inside the container? I used the code in your answer but it didn't work. Any idea what else i should change in order for it to work? – AJ112 Sep 21 '13 at 21:19
Maybe your container view's origin.y is negative? Try to move your container view. And check your toolBar's autoresizing mask. It should be UIViewAutoresizingFlexibleTopMargin. – Luniz Sep 21 '13 at 21:31
And use UIViewAutoresizingFlexibleWidth if you need portrait and landscape orientations in your app. – Luniz Sep 21 '13 at 21:37

score 4 · Answer 2 · answered Sep 25 '13 at 14:38

4

Your view's top constraint should no longer be top space to superview, but rather top space top top layout guide.

You can do this by moving the top space down beneath the status bar and then using the constraint menu to add the constraint to the nearest neighbor, which should now be the top layout guide, or you can do it as describe in this link on apple's developer library.

answered Sep 25 '13 at 14:38

BreadicalMD

336
1
16

1

This link was really helpful to me. One thing I had to wrestle with was that XCode kept wanting to create the new vertical spacing constraint by associating the bottom of the UIToolbar with the Top Layout Guide, requiring negative values to make things look right. To fool XCode into associating the top of the UIToolbar with the Top Layout Guide, I first had to move the top of it down below the guide, and then create the constraint. After that, I set the constraint value to zero, which bolted the two together. – Jacob Wan Mar 10 '14 at 22:10

score 3 · Answer 3 · answered Sep 23 '13 at 21:08

Remember that you shouldn't just move things down in IB for two reasons:

Not compatible with iOS 6
Won't extend the top bar background effect under the status bar

What not to do...

So, if you want to iOS6 & iOS7 compatibility, you could add a conditional for objects that require customization in ViewDidLoad. Caveat being this is a last case scenario - always try to remedy it with autolayout / IB first:

#import <Availability.h>

#ifdef __IPHONE_7_0

        CGRect barFrame = topBar.frame;
        barFrame.origin = CGPointMake(0, [UIApplication sharedApplication].statusBarFrame.size.height);
        [topBar setFrame:barFrame];

        // move other stuff around too

    #endif

And set your bar delegate much like Luniz above,override positionForBar to .

topBar.delegate = self;

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {

    return UIBarPositionTopAttached;
}

Of course, the whole first part could be solved by simply setting the 'Use Full Screen (Depreciated)' (aka wantsfullscreen) flag in IB. — capikaw, Sep 23 '13 at 22:27

score 2 · Accepted Answer · answered Sep 22 '13 at 00:16

2

If your setup is a split view like setup with two container views, you should be able to do this. When you set up the container views, drag the top up until you see the dotted blue line that indicates the top is at the bottom of the status bar. Do this with both container views. Add the tool bar to the embedded controller (not the container view), pinned to the top of that controller's view. With the left view being embedded in a navigation controller, my screen looked like this:

enter image description here

answered Sep 22 '13 at 00:16

rdelmar

103,982
12
207
218

Can i use the navigation bar in the detail view container instead of a toolbar. As you know the color we give to navigation bar is applied to the status bar as well in iOS 7 and thats what i am trying to achieve. – AJ112 Sep 22 '13 at 15:14
@AJ112, Sure. You can embed that controller in a navigation controller, or just drag in a navigation bar. – rdelmar Sep 22 '13 at 17:34
Yes i can either use a nav bar or embed the detailview in a navigation controller. With the toolbar it was working fine, i replaced the toolbar with a navigation bar dragged in the detailview. It works but it collides with the status bar just like the toolbar. If i move the navigation bar in detailview 20 points below manually, still i cannot change the color of status bar by changing the color of the nav bar. Turns out that manually dragged nav bar does not change the status bar color with it. – AJ112 Sep 23 '13 at 02:29
The second option is to embed the detailview in the navigation controller. I tried doing that and its the right thing to do if i want the status bar and navbar color the same for iOS 7. but it throws exception. Here is the link to a sample project with navigation bar added to it http://jmp.sh/v/cutCPH6EkzQgotOerSLo – AJ112 Sep 23 '13 at 02:33
1

@AJ112, I'm not sure under what circumstances you get an exception, but it's probably because you need to change how you define self.splitViewController in the detail controller. Instead of self.splitLikeController = (RDSplitLikeController *)self.parentViewController you need to have self.splitLikeController = (RDSplitLikeController *)self.navigationController.parentViewController. When I embedded the detail controller in a navigation controller, changed what I said above, and added the bar button, everything worked fine. – rdelmar Sep 23 '13 at 05:28
It worked. I was missing this little modification you mentioned. Thanks a lot for the help. I have marked your answer as the correct one. However there is one small problem that i have added in the question as an update, kindly take a look. Thanks – AJ112 Sep 23 '13 at 16:41
@AJ112, Where you have, WebViewController *wvc = ... change that to UINavigationController *nav ==..., then add another line WebViewController *wvc = nav.topViewController; – rdelmar Sep 23 '13 at 17:16
hey mind taking a look into this question http://stackoverflow.com/questions/19507639/uiwebview-doesnt-load-completely-height-varies – AJ112 Oct 25 '13 at 05:02

James · Answer 5 · 2013-09-30T05:47:56.427

1

I was trying to do pretty much the same thing, but I didn't like the white status bar of the accepted answer. I managed to make the toolbar placed underneath the status bar so that it has a consistent color to the Navigation Bar that is next to it in the Master view.

My solution was to make the Toolbar 64 points tall and set the Topspace to the superview to 0.

When doing this you have to make sure you are not creating the constraint to the Top Space Layout Guide. I was able to get that done in Interface Builder by setting the Frame to 0,0 with a Height of 64. Then I used the Pin dialog off of the floating tool menu. I used zero with the top I beam to create the constraint.

The bottom edges match in the Master and Detail and the coloring is consistent. The controls in my toolbar ended up uncrowded.

edited Sep 30 '13 at 05:47

answered Sep 29 '13 at 07:46

James

851
6
10

Thanks ... adding 20 to the height of the toolbar was the only solution I found that didn't require Autolayout, which requires iOS 6. I have a lot of iPad 1 users, so I want to maintain support for iOS 5 in my app. – arlomedia Mar 05 '14 at 19:56
Actually when I increased the height of the toolbar, I found that the toolbar title (UIBarItem) remained bottom-aligned but toolbar buttons (UIBarButtonItem) were vertically centered -- their position was too high. The only way I could find to adjust the position was to set up the toolbar button as a UIButton set as the customView of the UIBarButtonItem, then adjust the frame of the UIButton. If you need to apply the toolbar tintColor to the button icon, then you have to use a UIImageView instead of a UIButton. – arlomedia Mar 12 '14 at 22:00

score -1 · Answer 6 · edited Aug 21 '17 at 19:53

-1

Swift 3

Connect your bar delegate and conform to UIToolbarDelegate. Then add this delegate method:

func position(for bar: UIBarPositioning) -> UIBarPosition {
    return UIBarPosition.topAttached
}

because now

enum UIBarPosition : Int {
    case any
    case bottom
    case top
    case topAttached
}

edited Aug 21 '17 at 19:53

McCygnus

4,187
6
34
30

answered Aug 07 '14 at 11:27

Mario Sevilla Montoya

1

iOS 7 UIToolBar Overriding With Status Bar

6 Answers6

Linked