I want to add image to right side of navigation bar. But I can't drag image view to navigation bar. I can only drag a button.
How can I do this ? I want same thing with whatsapp profile image. You know they have circle profile picture on right side of navigation bar.
Drag a UIView and drop it on the navigation bar first. Then drag a UIImageView into the view.
That should give you what you are looking for.
Set the image view height and width using constraints. You have to set the width and height of the containing view in the size inspector.
**This will Display the image on right side on navigation bar**
func viewDidLoad(){
let containView = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
let imageview = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
imageview.image = UIImage(named: "photo.jpg")
imageview.contentMode = UIViewContentMode.scaleAspectFit
imageview.layer.cornerRadius = 20
imageview.layer.masksToBounds = true
containView.addSubview(imageview)
let rightBarButton = UIBarButtonItem(customView: containView)
self.navigationItem.rightBarButtonItem = rightBarButton
}
Don't know about storyboards. But from code you can create UIBarButtonItem with custom view.
let customView = UIImageView()
let customViewItem = UIBarButtonItem(customView: customView)
self.navigationItem.rightBarButtonItem = customViewItem
From storyboard:
Just drag UIBarButtonItem into your controller navigation bar. In element menu(Attribute inspector) select identifier: Custom and Image: the image you want.
Related
I'm having a problem with the titleView in navigation bar in iOS. I've created a custom view for the titleView, but every time I push another controller, the titleView immediately appear and disappear when I go back to the first view controller. Here's my code.
override func viewDidLoad() {
super.viewDidLoad()
let logo = UIImage(named: "img_appbar_logo")?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
logoContainer = UIView(frame: CGRect(x: 0, y: 0, width: 180, height: 40))
logoContainer.backgroundColor = UIColor.clear
animatedLogo = UIImageView(frame: CGRect(x: 0, y: 0, width: logoContainer.frame.width, height: logoContainer.frame.height))
animatedLogo.contentMode = .scaleAspectFit
animatedLogo.clipsToBounds = true
animatedLogo.image = logo
logoContainer.addSubview(animatedLogo)
navigationItem.titleView = logoContainer
}
I've already fixed the issue related to titleView in Navigation bar. I found out that after I push another controller and pop back, the titleView will be replaced by the view of empty UILabel in the NavigationItem. That's why the titleView appear then disappear.
How I fixed the issue?
I added the custom view directly to the navigation bar. Here's the code
let logo = UIImage(named: "img_appbar_logo")?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
logoContainer = UIView(frame: CGRect(x: 0, y: 0, width: 180, height: 40))
logoContainer.backgroundColor = UIColor.red
animatedLogo = UIImageView(frame: CGRect(x: 0, y: logoContainer.frame.origin.y, width: logoContainer.frame.width, height: logoContainer.frame.height))
animatedLogo.contentMode = .scaleAspectFit
animatedLogo.clipsToBounds = true
animatedLogo.image = logo
logoContainer.addSubview(animatedLogo)
navigationController?.navigationBar.addSubview(logoContainer) <--- new
//navigationItem.titleView = logoContainer <---- old
Then remove the view on viewWillDisappear
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
logoContainer.removeFromSuperview()
}
Set the titleView in viewWillAppear since the titleView gets replaced by the title in the previous controller
On App Start, I highlight one of my BarButtonItems. Since iOS11 I am not able to do this anymore because I need to initialise it on another way.
First my old ios 10 code. I saved my barButtonItemView after initialising it.
let item1 = UIBarButtonItem(image: UIImage(named: "iconProfile"), style: .plain, target: self, action: #selector(pushSettings))
self.navigationItem.setRightBarButtonItems([item1], animated: true)
if let view = self.navigationItem.rightBarButtonItem?.value(forKey: "view") as? UIView {
barButtonItemView = view
}
Now I was able to access the position of barButtonItem just by using the frame
barButtonItemView.frame.topMiddle.x
With ios 11 the picture on my UIBarButtonItem gets smaller. I was reading that I have to resize them by using constraints. So now I initialise my UIBarButtons by using this function:
let imageView = UIImageView(image: UIImage(named: imageName))
imageView.frame = CGRect(x: 5, y: 7, width: 20, height: 20)
let button = UIButton()
button.frame = CGRect(x: 0, y: 0, width: 30, height: 34)
button.addTarget(self, action: action, for: .touchUpInside)
button.widthAnchor.constraint(equalToConstant: 30).isActive = true
button.heightAnchor.constraint(equalToConstant: 34).isActive = true
button.addSubview(imageView)
let barItem = UIBarButtonItem(customView: button)
return barItem
I set my rightBarButtonItem on the same way and try to get the view on the same way.
self.navigationItem.setRightBarButtonItems([item1], animated: true)
if let view = self.navigationItem.rightBarButtonItem?.value(forKey: "view") as? UIView {
barButtonItemView = view
}
But this time my barButtonItemView has the x and y values set to 0,0. Has anyone an idea how I can get the position of my BarButtonItem depending on my screen?
What I tried
The first solution I tried is to call layoutIfNeeded() before I try to get the frame again. This is not working as well as the x and y values are still 0,0.
First, if your UIBarButtonItem only needs to display an UIImage, you should use [UIBarButtonItem initWithImage:style:target:action:] instead of customView for more standard layout. And if you want to custom the size of UIBarButtonItem, you can resize the image.
Second, before iOS 10, UIBarButtonItem's view was added in the UINavigationBar directly, but after iOS 11, UIBarButtonItem was added in a UIStackView, and the stackView was added in the UINavigationBar, so if you get a (0, 0) from the customView's frame.origin, it means that the customView is layout at the (0, 0) origin in the stackView.
Third, the view of the UIBarButtonItem would not be initialized until the UINavigationBar was shown and your UIBarButtonItem was put in the bar, so you can not get the view when the UIBarButtonItem just be initialized. Maybe you can try to get the view and its frame in your viewController's viewWillAppear: or viewDidAppear:.
I have added a custom navigation bar via storyboard. I was expecting the content on the screen to automatically shift downward. but instead it completely covers content on the top of the screen.. is there a clean line of code that automatically creates that spacing between the navigation bar and the view itself?
You might have heard about Cocpods which i feel is a better way to go for cutsom Navigation bar.
You just need to implement the protocol and give the specifications you need for the Navigation bar
Go through the following cooped
https://cocoapods.org/pods/resizable-navigation-bar
Just call this method from viewDidLoad :
func createNavBar() {
let leftNavigationButton = UIButton()
leftNavigationButton.setImage(UIImage(named: "ic_back.png"), forState: .Normal)
leftNavigationButton.frame = CGRectMake(10, 10, 20, 15)
leftNavigationButton.addTarget(self, action: "onBackButtonPressed:", forControlEvents: UIControlEvents.TouchUpInside)
let customBarItem = UIBarButtonItem(customView: leftNavigationButton)
self.navigationItem.leftBarButtonItem = customBarItem;
//set TitleAppIcon
let GR = UITapGestureRecognizer(target: self, action: Selector("headerLogoTapAction:"))
let imageView = UIImageView(frame: CGRect(x: 90, y: 0, width: ((UIScreen.mainScreen().bounds.width)/3), height: 40))
imageView.contentMode = .ScaleAspectFit
let image = UIImage(named: "yourimag.png") //or set title
imageView.image = image
imageView.addGestureRecognizer(GR)
imageView.userInteractionEnabled = true
navigationItem.titleView = imageView
}
Hope this gonna help you
I have created a custom navigation bar.Now i am adding this into viewwillappear method.Due to this when i return to my view controller it takes time to load.
func addViewToNav()
{
myView = UIView(frame: CGRect(x: 0, y: 20, width: (self.navigationController?.navigationBar.frame.size.width)!-40, height: (self.navigationController?.navigationBar.frame.size.height)!))
imageView.frame = CGRect(x: 5, y: (myView?.frame.size.height)!/2-14, width: 28, height: 28)
let image = UIImage(named: "download")
imageView.contentMode=UIViewContentMode.scaleAspectFill
imageView.image=image
imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.cornerRadius = imageView.frame.size.width/2
imageView.clipsToBounds = true
imageView.backgroundColor=UIColor.yellow
label = UILabel(frame: CGRect(x: imageView.frame.size.width+15, y: 0, width: 150, height: (myView?.frame.size.height)!))
label?.text="Label"
label?.textColor=UIColor.white
myView?.addSubview(imageView)
myView?.addSubview(label!)
self.navigationController?.view.addSubview(myView!)
//add tap gesturte on imageview & label
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.tapBlurButton(_:)))
myView?.isUserInteractionEnabled=true
tapGesture.numberOfTapsRequired=1
myView?.addGestureRecognizer(tapGesture)
}
Please guide how can i make it fast because this is very slow.
It is taking time because every time the controller appears on the screen viewWillAppear will be called and each time the code for creating the custom view, adding it as the subview and then adding gesture recognizer will be executed.
There are 2 ways that might reduce the processing time:
If you want to do it programatically, the add the code to create and add custom navigation bar in viewDidLoad instead of viewWillAppear
Add the custom navigation bar in the storyboard itself and create an outlet connection for it in the controller.
I am trying to center my titleView in my navigationItem.
After localizing my app, I saw this behavior:
This is my code as an extension to navigationItem:
extension UINavigationItem{
func makeImg(){
let container = UIView(frame: CGRect(x: 0,y: 0,width: 200,height: 40))
let logo = UIImage(named: "Rookie")
let imageView = UIImageView(frame: CGRect(x: 66.75, y: 7.25, width: 66.5, height: 25.5))
imageView.image = logo
imageView.layer.masksToBounds = true
imageView.clipsToBounds = true
container.addSubview(imageView)
self.titleView = container
}
}
I think it has something to do with my superView in navigationItem.
So I should reference the Screens bounds. Any ideas?
This happens if the view set as titleView is very wide. Views that are added as a titleView are only resized if their width is wider than the available space, in which case they're resized to fill the space between the left bar button item and the right.
In this case, you've set your container object as being 200 points wide, which is wider than the available space with both of those items.
If you set the container width to match the image view (i.e., 66.5 points), then it should become centered. :)
(Or conversely, if you don't plan to add any other views, you can set the image view directly as the titleView)