In my view controller, I added the following to be able to customize the NavigationBar, but when I got to setting the width and height of the logo, all I can change is the height.
When I edit the value in width - Nothing happens, even if I set it to 0.
Also, is it possible to use px instead of points?
override func viewDidAppear(animated: Bool) {
// 1
var nav = self.navigationController?.navigationBar
// 2
nav?.barStyle = UIBarStyle.Black
nav?.tintColor = UIColor.whiteColor()
// 3
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
// imageView.contentMode = .ScaleAspectFit
// 4
let image = UIImage(named: "trotterlogo.png")
imageView.image = image
// 5
navigationItem.titleView = imageView
}
Related
So the original setup of the app that I inherited has the navigation bar set like so (this is in my AppDelegate):
private func configureNavigationController(_ navigationController: UINavigationController) {
navigationController.navigationBar.isTranslucent = false
self.window?.rootViewController = navigationController
let imageView = UIImageView(image: UIImage(named: "logo-white"))
imageView.contentMode = UIViewContentMode.scaleAspectFit
let center = (navigationController.topViewController?.view.frame.width)! / 2.0 - 44
let titleView = UIView(frame: CGRect(x: center, y: 0, width: 88, height: 44))
imageView.frame = titleView.bounds
titleView.addSubview(imageView)
UINavigationBar.appearance().barTintColor = UIColor.navBackground
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().addSubview(titleView)
}
This creates the nav bar across every view controller correctly with the image in the center, however I have some new functionality that needs to be on top of everything, and this logo file - logo-white - is still showing up over top.
That's the real problem I want to solve - so if my attempted solution below is wrong, let me know and tell me the correct way.
Anyway, I tried commenting out the code above in my AppDelegate, and putting it in the specific viewcontrollers that I need it for
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView(image: UIImage(named: "logo-white"))
imageView.contentMode = UIViewContentMode.scaleAspectFit
let center = (navigationController!.topViewController?.view.frame.width)!// / 2.0 - 44
let titleView = UIView(frame: CGRect(x: center, y: 0, width: 88, height: 44))
imageView.frame = titleView.bounds
titleView.addSubview(imageView)
navigationItem.titleView = imageView
However this doesn't work - I can either get the logo to show up on the left side of the screen, or slightly off of center, but never center.
I am guessing that this is because the bar has a back button and a little settings icon as well on either side.
So, how do I do this correctly?
Is there a way to make it so that something can cover the logo? Is the solution to move it into my individual view controllers?
Here's a picture of the overlap here. The logo, "Pinyada" should not be covering this up at all - this is a third party library that should be on top of everything.
You may try this :
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView(image: UIImage(named: "logo-white"))
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: 0, y: 0, width: 88, height: 44)
navigationItem.titleView = imageView
}
If you have navigationItem.titleView , another titleview is not necessary.
Sometimes, if you need a much more precise control of the titleView, you can add a customTitleView. Add the following codes in the viewController and you can get what you want.
let imageView = UIImageView(image: UIImage(named: "logo-white"))
private func addTitleView(){
let nbar = (navigationController?.navigationBar)!
let width = nbar.frame.width
imageView.contentMode = UIView.ContentMode.scaleAspectFit
imageView.frame = CGRect.init(x: (width - 88) / 2.0 , y: 0, width: 88, height: 44)
nbar.addSubview(imageView)
}
private func removeTitleView(){
imageView.removeFromSuperview()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
addTitleView()
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
removeTitleView()
}
BTW, UINavigationBar.appearance().addSubview(titleView)
This method will result in all navigationBar with the same titleView, which is not what you want.
I figured it out.
One of the other modifications to my header was taking up too much space. I made it smaller and the image fits perfectly.
I moved all of the code generating the header out of the AppDelegate and into my navigation protocol, where I then popped it into each and every viewcontroller.
I have this code in order to put an UIImageView in the center of a navigation controller bar and properly scale the image:
override func viewDidAppear(_ animated: Bool) {
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 150, height: 28));
imageView.contentMode = .scaleAspectFit;
let image = UIImage(named: "image_title.png");
imageView.image = image;
self.navigationItem.titleView = imageView;
}
The code works fine in iOS 10, however in iOS 11 the ".scaleAspectFit" property is not considered and the images is not scaled in the UIImageView size.
I tried with some solutions i found:
Setting the frame of the UIImageView after setting the "contentMode" property
Setting imageView.setNeedsLayout()
Setting imageView.setNeedsDisplay()
unfortunately, no one of these solutions works. The "contentMode" property is simply ignored,
Any idea on what the problem could be?
Thank you in advance
Works for me such way (using additional UIView)
let titleView = UIView(frame: CGRect(x: 0, y: 0, width: 120, height: 40))
let image = UIImageView(image: UIImage(named: "img-logo"))
image.contentMode = .scaleAspectFit
image.frame = titleView.bounds
titleView.addSubview(image)
viewController.navigationItem.titleView = titleView
let imageView = UIImageView(image: UIImage(named: "img-logo"))
imageView.contentMode = .scaleAspectFit
navigationItem.titleView = imageView
I am trying to use an Image in my Navigation Bar. Keep getting close but no cigar. With the code below, it loads the image fine and positions it nearly correct. It appears to have a pad around the view, but I have no constraints around it. When I remove the Status bar it shrinks the image but positions it fine within the NavBar.
let nav = self.navigationController?.navigationBar
for parent in self.navigationController!.navigationBar.subviews {
for childView in parent.subviews {
if(childView is UIImageView) {
childView.removeFromSuperview()
}
}
}
nav?.barStyle = UIBarStyle.Default
nav?.tintColor = UIColor.blueColor()
let app = UIApplication.sharedApplication()
let SBheight = app.statusBarFrame.size.height
let totalheight = SBheight + nav!.frame.height
let totalwidth = nav!.frame.width
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: totalwidth , height: totalheight))
imageView.clipsToBounds = true
imageView.contentMode = .ScaleAspectFill
var image = UIImage(named: "HRC")
imageView.image = image
navigationItem.titleView = imageView
Here is the shot of the NavBar Area:
I can set the background picture of a navigation bar with no issue with the code below.
Swift 3.0
let backgroundImage = UIImage(named: "name_of_background_image")?.resizableImage(withCapInsets: UIEdgeInsetsMake(0, 0, 0, 0), resizingMode: .stretch)
self.navigationController?.navigationBar.setBackgroundImage(backgroundImage, for: .default)
Swift 2.3
let backgroundImage = UIImage(named: "name_of_background_image")?.resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0), resizingMode: .Stretch)
self.navigationController?.navigationBar.setBackgroundImage(backgroundImage, forBarMetrics: .Default)
You can add the code above to viewDidLoad, and customize the background image for each viewController.
Make sure you render the image as Original from the asset catalog.
And double check if your image has the right size.
#2x -> 750 x 128
#3x -> 1125 x 192
I need in my app a custom navigation bar with an image and a text but I can't add the text.
Here is the code to add the image, how can I add the title?
let logo = #imageLiteral(resourceName: "navigationbaricon")
let imageView = UIImageView(image:logo)
self.navigationItem.titleView = imageView
Thanks
Where is the frame assigned for self.navigationItem.titleView? Set the frame for imageView and it will work.
You can wrap the UIImageView and the UILabel (which will hold the custom title) in an UIView and then assign the UIView to the self.navigationItem.titleView. Something like this:
let view = UIView(...);
let label = UILabel(...);
label.text = "Custom Title";
let image = UIImageView(image: UIImage(named: "..."));
view.addSubview(image);
view.addSubview(label);
self.navigationItem.titleView = view;
This one is worked for me
override func viewDidLoad() {
super.viewDidLoad()
let titleView = UIView()
titleView.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
titleView.backgroundColor = UIColor.redColor()
let imageView = UIImageView(image: UIImage(named: "img")!)
imageView.frame = CGRectMake(0, 0, 40, 40)
imageView.contentMode = .ScaleAspectFill
titleView.addSubview(imageView)
self.navigationItem.titleView = titleView
}
I have searched a lot on stackoverflow and I havent been able to find solution for my problem which is that I need to put in navigationBar in middle section image and text next to each other but apparently I was able only to place just image or just text
Here is my code
let nav = self.navigationController?.navigationBar
nav?.barStyle = UIBarStyle.Default
nav?.tintColor = UIColor.blackColor()
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
imageView.contentMode = .ScaleAspectFit
let image = UIImage(named: "icon_heart")
imageView.image = image
self.navigationItem.title = "App name"
self.navigationItem.titleView = imageView
I am aware that it on this way it accept only image which is titleView but I cant think of some normal solution and dont know is it even possible. Also if that is not possible how can I make then blank image and draw that icon image and text next to each other and append then that new image.
Edit:
Based on awph answer I have added code like this and it works fine for my case where I have always same characters in title
let screenSize: CGRect = UIScreen.mainScreen().bounds
let nav = self.navigationController?.navigationBar
nav?.barStyle = UIBarStyle.Default
nav?.tintColor = UIColor.blackColor()
let imageView = UIImageView(frame: CGRect(x: screenSize.width / 2 - 40, y: 15, width: 20, height: 20))
imageView.contentMode = .ScaleAspectFit
let image = UIImage(named: "icon_heart")
imageView.image = image
nav!.addSubview(imageView)
// label on top of the application that contain word
var label = UILabel(frame: CGRectMake(0, 0, 0, 0))
label.center = CGPointMake(screenSize.width / 2 - 15, 17)
label.textColor = UIColor.blackColor()
label.font = UIFont.systemFontOfSize(14)
label.textAlignment = NSTextAlignment.Center
label.text = "App Name"
label.sizeToFit()
nav!.addSubview(label)
You right, as said in documentation:
// Custom view to use in lieu of a title. May be sized horizontally. Only used when item is topmost on the stack.
What you need to do is to create an UIView, add an UImageView (that contains your image) as subview (view.addSubview(imageView)) and then add a UILabel on it view.addSubview(label).