I have set an backgroundImage for my navigationbar. This works fine. But I would like to have the navigationbar height to be adjusted to the background image. At the moment the width of the background images is also not set according to the screen size.
I tried setting the height of the navigationbar like described here. This shows a bigger navigationbar for like a second but then it shrinks to its default size again.
Does anyone know how to achieve what I want? Here is an example of what I want to achieve: image
Apple Documentation:
It is permissible to customize the appearance of the navigation bar
using the methods and properties of the UINavigationBar class but you
must never change its frame, bounds, or alpha values or modify its
view hierarchy directly.
To achieve the effect seen in the image you tagged, they are most likely using a collection view to layout their data and that image is part of the collection view's header. They made the navigation bar background color clear, but the image is definitely not part of the navigation bar itself.
Apple recommends to never change the frame of a navigation bar manually because it messes with the layout code of its subviews and animation methods.
You could either subclass the navigation bar and attempt to create something similar, or go the easier route and make the navigation bar clear (UIColor(white: 0, alpha: 1) not .clear otherwise it might show up incorrectly) and have an underlying view display the image (e.x. a collection view whos header extends to the top of the view controller).
This will allow you to adjust the image height and width freely without subclassing the navigation bar, and creating potential bugs.
You can make custom NavigationBar class.
It can be help you
https://developer.apple.com/library/archive/samplecode/NavBar/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007418-Intro-DontLinkElementID_2
Related
My case navigation bar color different for two controllers. When I pop from a second view controller to first one there is white line glitch in UI appears. I don't understand why issues happen, is set navigation bar shadow image to nil and use a background image for setting navigation bar background.
one reason that can cause this, is extra content from other screens overlapping each other..
try to set each view controller to have
clipsToBounds = true
See Description from Apple...
Setting this value to true causes subviews to be clipped to the bounds
of the receiver. If set to false, subviews whose frames extend beyond
the visible bounds of the receiver are not clipped. The default value
is false.
another cause is, some view controller has a background with clear color...
make sure each view controller has a non clear background.
EDIT
the question was not clear enough, it looks like I didn't understand well, try to change the tint color of navigation bar to clear.
Finally, I found my issues, issues are when I am setting a navigation bar from orange to white I set the translucent property of the navigation bar is true. which cause the problem for me to display a white line.
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.
I am creating a UINavigationBar that will expand and contract in various states. The top image is when it is in a contracted state with a transparent background. The lower image represents when it has expanded with a background and search bar. As the user scrolls down the nav bar background would animate in and expose the search field.
Can someone suggest the best way to build this?
So far I've explored subclassing the UINavigationBar, but I've been having a really tough time with the placement of the items within the nav bar or hooking that view up to a xib. I've also see examples where the extended content is just a UIview anchored to the top of the view controller top margin, but then I'm splitting the appearance of my nav into two views which will make the animation problematic.
According to the answer to UISegmentedControl below UINavigationbar in iOS 7 it can be accomplished using a UIToolBar and some delegate methods.
You might have to tweak it a little bit however, to fit the search bar that you want to include.
How can I set the colour of the status bar to be clear. No matter what I do, it is white with some alpha.
I do not want it to disappear and I want the text to be black.
In the picture it might look like nag bar and status bar are grey but actually both are white with some blur affect or nag bar has blur affect and status bar is clear.
Here is what I get despite the clear status bar background colour
The status bar has no background since iOS 7. In other words, it's clear by default.
If you see it white, it means the underlying view is white, and you need to change that.
I was having the same problem. It ended up that my view was constrained to the top layout guide when instead it should have been constrained to the superview. Even though the view is constrained to different points it will look the same in interface builder (in my case, I think this is because I was instantiating the viewcontroller to my navigation controller in code and not displaying the navbar). See the image below.
Click on the constraints for the imageview in the view above and the difference in constraints can be seen in the size inspector.
Constraining to the superview will look like this:
This results in the simulator displaying the view like this:
Notice how the status bar is clear and overlaid on top of the imageview.
Constraining to the top layout guide will look like this:
This results in the simulator displaying the view like this:
Notice how the status bar appears white and how the imageview seems constrained to the status bar (the status bar is white text on a white background fyi).
So, in order to fix this problem, you need to change the constraint of the image view to be constrained to the superview.
You change this by selecting the constraint in this list:
Once you have the constraint selected you can change what the constraint is attached to over here:
My app has a view controller that due to the fact it plays its own custom transition animations, provides its own standalone UINavigationBar view at the top (As opposed to using a UINavigationController).
When using an iPhone, and when rotating the device, I would like the UINavigationBar to automatically apply the landscape UIBarMetrics properties (eg, change height, change the background image, resize the buttons etc), but by default, it does not. This is a problem on iOS 7, since even if I manually change the height of the UINavigationBar, the UIBarButtonItem elements don't change their vertical positions.
Is there a way to manually 'tell' the UINavigationBar to apply specific bar metric properties to itself? Or is that actually an implementation inside UINavigationController, and not UINavigationBar?
After various testing and trial and error after asking this question, I eventually worked out a solution that fixed all of my issues, so I'll post it here under the solution I'd previously accepted.
When my app is displayed in landscape on an iPhone, I wanted the UINavigationBar at the top to shrink to the standardly accepted 32 points high, as is the case with any apps that use the UINavigationController class. However, as I am not using a UINavigationController for this particular view (for varying reasons of feasibility), I needed to implement this manually.
To account for the new transparent status bar in iOS 7, I adjusted the origin and size of the UINavigationBar so it encompassed both the bounds of the status bar, and the normal UINavigationBar region (ie, so the UINavigationBar frame origin was {0,0}, and the height was 52 points.)
Unfortunately, this happened:
While the bar itself is rendering at the proper position and height, all of the content in the bar, including the title and buttons are not positioned properly, being much too high, almost touching the status bar content.
It was pretty obvious what was happening. The navigation bar content is being vertically aligned to its own middle, completely disregarding the presence of the status bar content.
When I tested the same orientations with a normal UINavigationController, this was not the case, and the title and buttons in the UINavigationBar from the UINavigationController worked absolutely fine. Apple had done SOMETHING in there that wasn't part of the normal UINavigationBar implementation.
Going on this, I picked apart the view layout hierarchy of a UINavigationControllerto see what was happening to the UINavigationBar in there (Mainly calling a lot of NSLog() statements that would dump the subviews of the navigation bar.)
This is what I discovered:
From the looks of it, Apple have employed a relatively sneaky hack to achieve this effect. It turns out the actual UINavigationBar is actually placed right below the status bar (ie at point {0,20}) and only has a height of 32 points. Then, what happens is a private subview inside the UINavigationBar in charge of rendering the background is extended upwards, outside of the bounds of the navigation bar to encompass the region behind the status bar (ie, its origin is {0, -20}, and its height is 52 points, local to the navigation bar's subview coordinate space).
So by doing that, not only does the content vertically align properly, but the translucent effect still extends behind the status bar.
Anyway, after I discovered this, it was pretty straightforward to write a solution. All I needed to do was reposition and resize the UINavigationBar back to how I had it iOS 6 (ie, 20 points down, and only 32 points high), and then implement a UINavigationBar subclass that override the layoutSubviews method, grabbed the internal background view (Doing a quick subview check for a view with a class name that matched "Background"), and then manually extended it.
The bar metrics properties you can set on a UINavigation bar are things like background image and the title vertical position. Heigh and width need to be set from within your view controller.
If you need to manually tell the navigation bar to change it's size when the orientation changes you can implement the method - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration1 in your view controller and change the size there.
Another option you can use is to use autolayout to specify that the width of your navigation bar is pinned to the left and right sides of its superview and let it figure out how wide it should be. For example
UINavigationBar *bar = [[UINavigationBar alloc] init];
bar.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bar];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[bar]|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(bar)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[bar(44)]|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(bar)]];