In my app, I have some webviews. A transparent status bar doesn't look good for full screen webview. I want to make the status bar TRANSLUCENT, just like the game center.
I notice that the status bar would be drawn translucent if there is a navigation bar under it. But I want a translucent status bar BY ITSELF.
Is there any way to do this?
If you look at the Human Interface Guidelines section about the Status Bar it recommends (emphasis mine on the section most related to your question):
Prevent scrolling content from showing through the status bar. As
users scroll, you don’t want them to see a confusing mix of app
content and status bar items in the status bar area. To give users the
impression of spaciousness while still ensuring maximum readability,
make sure the status bar has a background that obscures the content
behind it. Here are a few ways to keep scrolling content from showing
through the status bar:
Use a navigation controller to display content. A navigation controller automatically displays a status bar background and it ensures that its content views don’t appear behind the status bar. (To learn more about navigation controllers, see “Navigation
Controllers”.)
Create a nondistracting custom image—such as a gradient—and display it behind the status bar. To ensure that the image stays behind the status bar, you could use a view controller to keep the image above a scrolling view or you could use a scrolling view to keep it pinned to the top.
Position content to avoid the status bar area (that is, the area defined by the app’s statusBarFrame property). If you do this, you should use the window’s background color to provide a solid color behind the status bar.
As the status bar is totally transparent and any content can go on top of it, I just create an empty UIToolbar that is 20px height which just looks like a perfect translucent background for the status bar.
This is not an ultimate solution, but it really helps and it is very easy to implement when you don't need a real tool bar.
Thanks to Apple that they do not provide an option to set the status bar from transparent to translucent.
In Xcode 6, create top, bottom, left, right constrains and set the
- constants to 0
- priorities to 749.
- Don't forget to UNCHECK the "Constrain to margins" check box.
How to create constrains?
At the bottom right of your storyboard window, there's four buttons. The second from your left has the constrains. Please google about constrains in Xcode 6 since it's a kinda new feature.
Hope this help,
Related
When on a call the status bar in iOS changes height. The larger status bar causes the TabBarIOS in my RN iOS app to be partly pushed off the bottom of the screen. Additionally, when switching tabs, the new tab displayed is first displayed with the middle missing, as if the top half of the screen is offset down for the larger status bar, but the bottom half isn't, and the discrepancy is handled by an overlap in the center. Is anyone else seeing this, and if so, have a solution?
Can You provide some code snippet to see what exactly is going in there ?
Additionally you can call the StatusBar to display the notification bar contents and Add a view of height 64pt that is Standard with ios10 design standards.
I suppose this is an old one. I have a sliding panel (JASidePanel) with a menu and I want to hide or slide the status bar while showing the menu. So, I have two options:
Hide the status bar and keep the height of my navigation bar.
Or slide the status bar with the panel.
I see these two options are possible. The first one via swizzling of the sizeToFit of the UINavigationBar (link). The second one via a snapshot of the screen before animating the panel.
But I see Reeder, that takes the second option and brings it to another level: the panel is not really a screenshot, is the actual view of the panel so the status bar is slide but continues being updated, also the panel does!
So, I have a couple of questions: how is the Reeder solution possible? And the second one, is it secure to perform method swizzling? Could it be rejected by Apple?
Thank you.
Finally I implemented the first solution as shown in this link.
I have in the UINavigationBar status information about the health of the app. It change the title text color, and one of the buttons there.
The changes work fine, but I wish to provide a smooth animation (because the status update on data changes) but don't know how. I'm not asking about moving to another views, but about how animate only the UINavigationBar titles & buttons.
I don't think you can animate those things without some extra work.
A navigation bar is a complex beast, and by default the UI objects that appear on the screen are private and maintained by the navigation bar or the current navigation item.
There should be a way to make it work however.
The current navigation item has a property titleView. normally it's nil and the navigation bar displays a title string itself. But if you plug a UILabel into the titleView property then you should be able to do animations on the animatable properties of the titleLabel.
Likewise with the bar button items.
I am in the process of transitioning an app to iOS7. All of the views throughout the app have a 44px empty space at the bottom that appears to be for a bottom toolbar or something, but I am not trying to display a bottom toolbar. This space also exists on views that do have a bottom toolbar and the toolbar just shows directly above it.
The red space shown is actually a view behind the black view. No matter what size I set the frame of the black view to, the red space is always shown. I am also hiding the status bar in plist, so don't know if this is an artifact from that or if it has something to do with navigation bar as they are both normally 44px in height.
I have looked at the transitioning guide and haven't found anything that's worked. Any ideas to what could be causing this and how to fix?
UPDATE:
I have tried setting edgesForExtendedLayout = UIRectEdgeAll and extendedLayoutIncludesOpaqueBars = YES (also tried NO) with no effect. When I look at the subviews of the navigation controller it shows a UIToolBar as hidden, but shows it contains a frame in the exact area the view refuses to resize to even with autolayout constraints.
UPDATE 2:
This is actually a problem with ViewDeckController (https://github.com/Inferis/ViewDeck) and the way it sets it's center view bounds.
I believe it has to do with the UINavigationBar. Try toggling the following options in Storyboard and see if it solves the problem. Namely, the 'Extend Edges' options:
These options can also be set in code with the edgesForExtendedLayout and extendedLayoutIncludesOpaqueBars properties on UIViewController.
If you are transitioning to iOS 7, you should be using an Auto Layout constraint to anchor to the Bottom Layout guide. Control drag from your view to the Bottom Layout guide and choose Vertical Space from the popup menu.
Using frames in iOS 7 is harder and is the way of the past.
Auto Layout is hard to grasp at first, but it is very powerful once you get the feel.
This is actually a problem with third party library ViewDeckController (https://github.com/Inferis/ViewDeck) and the way it sets centerViewBounds for IIViewDeckControllerIntegrated. I was able to figure it out after changing to IIViewDeckControllerContained and seeing the view sized correctly.
In IIViewDeckController.m, just return self.referenceBounds for iOS7 like it does for IIViewDeckControllerContained.
Can someone advise me on how I can implement a "touch to return to call" type of UI as seen in the screenshot below?
My intention is to display the bar on top when my application receives a notification.
Any guide or resources on this will be greatly appreciated
There is several ways how you can place something below your status bar.
1. You can add UIView to UIWindow and position it to be under status bar. Set status bar style to black translucent, so the underneath view will be visible. Resize rootViewController appropriately, so it won't overlap your view.
2. Also, you can set wantsFullScreenLayout property of your rootViewController to true, so it'll cover the entire screen and manage view hierarchy inside it. You also need to set status bar style to black translucent.
Alternatively, you can add views above status bar, but I don't think that this is a good user experience. Here is how you can do that: Add UIView Above All Other Views, Including StatusBar