CODEWITHSUNDEEP
iosstatusbaruitoolbaruistatusbar
lostintranslation
lostintranslation

Reputation: 24583

White transparent toolbar, how do I make status bar match

Using xcode6, and storyboarding

I have a toolbar that is at the top of my view. under the toolbar is a mapview. The map view extends under the status bar which is what I want. Basically I want the toolbar and status bar to be a little transparent ~20%, such that you can see the mapview beneath.

I have setup my toolbar's background color to be white 80% opaque. However I have no idea how to get the status bar to be exactly the same thing.

From everything I know, the status bar is 100% transparent, meaning it will show any view that is beneath it. I have tried to add a 20 point tall view above my toolbar, and I have set that to white, 80% transparent. That almost achieves the same effect that I am going for, but there is a black line between the toolbar and the status bar,

enter image description here

Am I even on the right track? How do I make the toolbar color and transparency match the status bar color and transparency and avoid the line?

EDIT:

clipsToBounds worked great at removing the line.

enter image description here

I added a button programmatically:

-(void)splitViewController:(UISplitViewController *)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem *)button forPopoverController:(UIPopoverController *) pc {
    button.image = [UIImage imageNamed:@"bars"];

    NSMutableArray *items = [self.toolbar.items mutableCopy];
    if (!items) {
        items = [NSMutableArray arrayWithObject:button];
    } else {
        [items insertObject:button atIndex:0];
    }

    [self.toolbar setItems:items];
}

And after I add that button my toolbar background turns back to white:

enter image description here

EDIT 2 So I just discovered the UIBarPositionTopAttached enum and that I can set my view as the toolbars delegate. I did this:

And verified that it was called. I was hoping this would tell iOS that my toolbar is attached to the status bar and that my toolbar color and all would flow into the status bar. Is that not the case either?

Seems like attaching a toolbar to the status bar such that the status bar takes the backgroud of the toolbar should not be this hard, i.e. do I really have to create an extra 20 point high view to achieve this? And even if so seems like I am doing it wrong, as when I add button my toolbar transparency goes back to opaque.

Upvotes: 1

Views: 767

Answers (2)

lostintranslation
lostintranslation

Reputation: 24583

While clips to bounds works great, I think the right answer to this question use barPosition on toolbar.

There are a couple ways to do this:

Set your view as the delegate to the toolbar and implement this delegate method:

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
    return UIBarPositionTopAttached;
}

Or in a storyboard set a User Defined Runtime Attribute on the UIToolbar:

barPosition Number 3

enter image description here

Upvotes: 0

Tim Edwards
Tim Edwards

Reputation: 261

The UIToolbar has a hairline shadow at the top. If you set the bounds clipping property it will hide the line.

toolbar.clipsToBounds = YES;

Upvotes: 4

Related Questions