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
Related
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
In my Navigation bar I've put a bar button and I've set an image for the background. But the size of the image is much bigger than the size of the button. So I tried to tackle that as follow:
override func viewDidAppear(_ animated: Bool) {
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 5, height: 5 ))
imageView.contentMode = .center
let image = UIImage(named: "Info")
imageView.image = image
info_btn.image = image
}
however the picture is still stretched out. Any idea how can I fix that?
Try info_btn.imageView.contentMode = .scaleAspectFit
I would like to load an image to the titleview and then change the size.
I'm using this code :
let logo = UIImage(named: "namelogo")
let imageView = UIImageView(frame: CGRect(x:0, y:0, width:70, height:30))
imageView.image = logo
self.navigationItem.titleView = imageView
But this is not working properly. I can play with the height, but the width is not changing !!!
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).
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
}