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
}
Related
I am trying to implement a custom Navigation Title on an iOS app.
The StoryBoard looks like this:
The place that I want to have the custom Navigation Title is the last view ( the message view ), and because I use an image and text this means that I need to have custom width and height. By needing this if I do in viewDidLoad:
let rect = CGRect(x: 0, y:0, width: 150, height: 88)
titleView = UIView(frame: rect)
......
titleView?.addSubview(imageView)
......
titleView?.addSubview(label)
navigationItem.titleView = titleView
The height of the title is blocked to 44pt.
But how I managed to do it is adding the subViews to the navigation bar:
var navigationBar: MessagesNavigationBar? {
guard let navigationBar = navigationController?.navigationBar as? MessagesNavigationBar else {
return nil
}
return navigationBar
}
And in viewDidLoad
let rect = CGRect(x: 0, y:0, width: 150, height: 88)
titleView = UIView(frame: rect)
......
titleView?.addSubview(imageView)
......
titleView?.addSubview(label)
navigationBar?.addSubview(titleView!)
But the problem is that I have to remove the subviews when I leave the view, otherwise whatever I add there will be present in the table view as well.
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
if navigationBar != nil {
titleView?.removeFromSuperview()
}
}
Which kinda makes me feel that I'm not doing the right thing and I find difficult to add a fade out animation to those subViews when I leave the conversation. (i.e. native messages app on iOS).
So what is the right way of creating a custom Title Navigation Bar in iOS 12?
Scenes
Creating your custom titleView and assigning it to navigationItem.titleView is what you want. On older systems (pre iOS 11) you just might need to call sizeToFit() on the titleView.
This way you can create this titleView
Swift
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView()
NSLayoutConstraint.activate([
imageView.heightAnchor.constraint(equalToConstant: 20),
imageView.widthAnchor.constraint(equalToConstant: 20)
])
imageView.backgroundColor = .red
let titleLabel = UILabel()
titleLabel.text = "Custom title"
let hStack = UIStackView(arrangedSubviews: [imageView, titleLabel])
hStack.spacing = 5
hStack.alignment = .center
navigationItem.titleView = hStack
}
Obj-C
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc] init];
[NSLayoutConstraint activateConstraints:#[
[imageView.heightAnchor constraintEqualToConstant:20],
[imageView.widthAnchor constraintEqualToConstant:20]
]];
imageView.backgroundColor = [UIColor redColor];
UILabel *titleLabel = [[UILabel alloc] init];
titleLabel.text = #"Custom title";
UIStackView *hStack = [[UIStackView alloc] initWithArrangedSubviews:#[imageView, titleLabel]];
hStack.spacing = 5;
hStack.alignment = UIStackViewAlignmentCenter;
self.navigationItem.titleView = hStack;
}
You might also need to have the right set of autolayout constraints or use UIStackView.
These lines have no effect on the size of a title view:
let rect = CGRect(x: 0, y:0, width: 150, height: 88)
titleView = UIView(frame: rect)
Instead (or in addition) give your title view a width constraint and a height constraint. That is how the runtime knows what size you want.
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 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).
I have a UIScrollView and I am trying to add a UIImageView inside the scrollview. But after that, I want a UILabel inside the imageview. Basically, the image should fill the scroll view and the label should appear in the center of the image. Here is what I have:
#IBOutlet weak var image_scroll_view: UIScrollView!
var imageView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
image_scroll_view.backgroundColor = UIColor.yellowColor()
imageView.frame = CGRectMake(0, 0, image_scroll_view.frame.size.width, image_scroll_view.frame.height)
imageView.userInteractionEnabled = true
imageView.contentMode = UIViewContentMode.ScaleAspectFit
imageView.backgroundColor = UIColor.greenColor()
image_scroll_view.scrollRectToVisible(imageView.frame, animated: true)
self.imageView.image = // ...
let curr_user_name = UILabel(frame: CGRectMake(0, 0, imageView.frame.width, imageView.frame.height))
curr_user_name.text = "John Smith"
curr_user_name.textColor = UIColor.whiteColor()
curr_user_name.font = UIFont.boldSystemFontOfSize(16.0)
curr_user_name.backgroundColor = UIColor.redColor()
curr_user_name.center = CGPointMake(imageView.center.x, imageView.center.y)
curr_user_name.textAlignment = NSTextAlignment.Center
imageView.addSubview(curr_user_name)
image_scroll_view.addSubview(imageView)
self.navigationController?.navigationBarHidden = true
}
Here is what it looks like:
The scrollview is yellow. Ideally, the image view should fill all of that (it doesn't even show up at the moment) and the label should fill all of the image view, which would automatically center the text.
What am I doing wrong here?
make cur_user_name a property and
Write this code:
imageView.frame = CGRectMake(0, 0, image_scroll_view.frame.size.width, image_scroll_view.frame.height)
curr_user_name.center = CGPointMake(imageView.center.x, imageView.center.y)
in viewDidLayoutSubviews
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
}