I want to put logo of my app as button on left of the navbar.
I tried to implement the same by calling configureNavbar() function in init of the veiw controller.
Definition of the function is as follows:
private func configureNavbar(){
var image = UIImage (named: "NetflixLogo")
image = image?.withRenderingMode(.alwaysOriginal)
navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .plain, target: self, action: nil)
}
By this I am getting logo in middle of the navbar like this:
But by using:
navigationItem.rightBarButtonItems = [
UIBarButtonItem(image: UIImage(systemName: "person"), style: .done, target: self, action: nil),
UIBarButtonItem(image: UIImage(systemName: "play.rectangle"), style: .done, target: self, action: nil),
]
I can see items at right of navbar.
Pls help how can I align app logo to the left?
This is what I am getting in debug hierarchy
In viewDidLoad set your custom view and add to navbar like a custom view:
let leftNavBarImageView = UIImageView()
leftNavBarImageView.image = UIImage(named: "yourImage")
leftNavBarImageView.contentMode = .scaleAspectFill
leftNavBarImageView.backgroundColor = .white
leftNavBarImageView.layer.cornerRadius = 4 // if you don't want corner radius comment this
leftNavBarImageView.clipsToBounds = true
leftNavBarImageView.widthAnchor.constraint(equalToConstant: 40).isActive = true // set inage view width constraint
leftNavBarImageView.heightAnchor.constraint(equalToConstant: 40).isActive = true // set inage view height constraint
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: leftNavBarImageView) // add left bar nutton custom view
This is the result:
Related
I have set up a navigationBar and i'm trying to a PNG to the left as a leftBarButtonItem but it's showing up on the middle of the navigationBar.
private func configureNavBar() {
var image = UIImage(named: "netflixLogo") // PNG
image = image?.withRenderingMode(.alwaysOriginal)
//self.navigationController?.navigationBar.topItem?.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil) This didn't work either.
navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
//These buttons are working, they are on the right side.
navigationItem.rightBarButtonItems = [
UIBarButtonItem(image: UIImage(systemName: "person"), style: .done, target: self, action: nil),
UIBarButtonItem(image: UIImage(systemName: "play.rectangle"), style: .done, target: self, action: nil),
]
navigationController?.navigationBar.tintColor = .white
}
This is what i see on the simulator:
enter image description here
It's on the left, but the image is just too wide and tall for the nav bar so is displayed aspect fitted in the center of its bounds
In my view controller that extends UIDocumentBrowserViewController, I did this
additionalTrailingNavigationBarButtonItems = [
UIBarButtonItem(
image: UIImage(systemName: "book"),
style: .plain,
target: self,
action: nil
),
UIBarButtonItem(
barButtonSystemItem: .bookmarks,
target: self,
action: #selector(onReaderButtonClicked)
),
]
and results in
But if I do similar things in another view controller that is shown by UINavigationController
navigationItem.rightBarButtonItems = [
UIBarButtonItem(
image: UIImage(systemName: "book"),
style: .plain,
target: nil,
action: nil
),
UIBarButtonItem(
barButtonSystemItem: .bookmarks,
target: nil,
action: nil
),
]
The two icon have the same size as I expected
Why is the result in pic 1 happened and how can i deal with it?
Try to add a custom button in your navigation bar, add bar button items array in right or left position like this:
let customButtonWithImage = UIButton(type: .system) // declare your button
now in view did load set image, title and assign array of buttons to your navigation bar:
let image = UIImage(systemName: "book")?.withRenderingMode(.alwaysTemplate)
customButtonWithImage.setImage(image, for: .normal)
customButtonWithImage.setTitle(" Select", for: .normal)
customButtonWithImage.titleLabel?.font = .systemFont(ofSize: 16, weight: .regular)
customButtonWithImage.setTitleColor(.white, for: .normal) // set text color
let customNavBarButton = UIBarButtonItem(customView: customButtonWithImage)
let navBarButton = UIBarButtonItem(image: UIImage(systemName: "book"), style: .plain, target: self, action: nil)
navigationItem.rightBarButtonItems = [customNavBarButton, navBarButton]
navigationController?.navigationBar.tintColor = .white // set tint color
This is the result:
I couldn't reproduce your issue, but be aware you're allowed to specify an UIImage.SymbolConfiguration object to be used, when creating an UIImage with the systemName: method.
The scale used on navigation items is .large. So if you create the image like this:
let config = UIImage.SymbolConfiguration(scale: .large)
let image = UIImage(systemName: "book", withConfiguration: config)
let button = UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(ItemsTableViewController.settingsTapped))
self.navigationItem.leftBarButtonItem = button
It will create an image that matches the size of a UIBarButtonItem created using barButtonSystemItem:.
I am trying to add two bar buttons to toolbar in iOS [Cancel] & [Save] on right and left side accordingly.
I used a third bar button [Spacer] and set it to be [.flexiblewidth] Otherwise, when adding it only the left button appears [Cancel] and the [Spacer] & and [Save] which have to be next disappearing ?
the screen shot is in the link:
https://ibb.co/cZsaVV
let pickerView = UIPickerView()
override func viewDidLoad() {
pickerView.addSubview(self.setToolBar())
}
func setToolBar() -> UIToolbar {
let toolBar = UIToolbar()
toolBar.isTranslucent = true
toolBar.backgroundColor = UIColor.clear
let barButtonAttr = [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 15),
NSAttributedString.Key.foregroundColor : UIColor.black]
// [Save] BarButtonItem
let saveBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.save, target: self, action: nil)
saveBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)
// [Cancel] BarButtonItem
let cancelBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.cancel, target: self, action: nil)
cancelBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)
let spacerBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace ,
target: self, action: nil)
spacerBarButtonItem.setTitleTextAttributes(barButtonAttr, for: .normal)
// add BarButtonItems to toolBar
toolBar.items = [cancelBarButtonItem,spacerBarButtonItem,saveBarButtonItem]
toolBar.sizeToFit()
return toolBar
}
func createAccessoryViewWithTarget(_ target: AnyObject, width: CGFloat) -> UIView {
// Previous button
let previousButton = UIBarButtonItem(title: "Previous", style: .plain, target: target, action: #selector(self.moveToPreviousTextField))
previousButton.tintColor = UIColor.white
//Next button
let nextButton = UIBarButtonItem(title: "Next", style: .plain, target: target, action: #selector(self.moveToNextTextField))
nextButton.tintColor = UIColor.white
// Dismiss/close/done button
let doneButton = UIBarButtonItem(title: "Done", style: .done, target: target, action: #selector(self.keyboardDoneButtonTapped))
doneButton.tintColor = UIColor.white
let keyboardToolbar: UIToolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: width, height: 44))
keyboardToolbar.barStyle = .black
let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let fixedSpace = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
var itemsArray = [UIBarButtonItem]()
itemsArray.append(previousButton)
itemsArray.append(fixedSpace)
itemsArray.append(nextButton)
itemsArray.append(flexSpace)
itemsArray.append(doneButton)
keyboardToolbar.items = itemsArray
keyboardToolbar.sizeToFit()
return keyboardToolbar
}
This one is old code may be swift3 I guess. Here Im adding 3 buttons previous next and done button. flexible space and fixed space are used for spaces between buttons. Important to note here is the order that you adding your barbutton items. In your case use flexible space to place your 2 buttons on right and left end in the order of left end button, flexible space, right end button.
I've got the solution finally.
I am adding the ToolBar to the PickerView and then calling UIToolBar.SizeToFit() which is must in all cases.
the issue was I had to change the picker view size later in this case the size of subview ToolBar is not adapting with the new size coordination of pickerView. So the solution simply to call again ToolBar.SizeToFit() after any modification of parent view. here's snap of the code:
// popupView is custom UIPickerView
popupView.frame = CGRect(x:0, y:0, width:100, height:100)
// toolBar is an object of UIToolBar of the custom UIPickerView AddCurrencyPicker
(popupView as! AddCurrencyPicker).toolBar.sizeToFit()
In Swift 3, I've programmatically created a (bottom) toolbar with custom buttons separated by a flexible spacer to separate the custom buttons, pushing one ("Previous") to the left edge and the other ("Next") to the right edge of the view. But I have not been able to get the button titles ("Previous" and "Next") to display. Please advise me. Thanks. Here is my code:
First, the class declaration and a few variables:
class TextsController: UIViewController,UIGestureRecognizerDelegate {
let textWebView = WKWebView(frame: .zero)
var toolbar:UIToolbar?
Next, in the viewDidLoad:
view = textWebView
// Create (bottom) toolbar:
let frame = CGRect(x: 0, y: UIScreen.main.bounds.size.height-44, width: UIScreen.main.bounds.size.width, height: 44)
toolbar = UIToolbar(frame: frame)
toolbar?.sizeToFit()
toolbar?.isHidden = true
self.view.addSubview(toolbar!)
self.toolbar?.isTranslucent = false // Required for setting tintColor & barTintColor below
toolbar?.tintColor = UIColor(red: 0.5, green: 0.0, blue: 1.0, alpha: 1.0) //purple for toolbar items
toolbar?.barTintColor = UIColor.white //white for toolbar color
let triangleLeftButton = UIBarButtonItem(image: UIImage(named: "triangleLeft_15x20"), style: .plain, target: self, action:#selector(showPrevious))
let flexibleSpacer = UIBarButtonItem(barButtonSystemItem:.flexibleSpace , target: self, action: nil)
let triangleRightButton = UIBarButtonItem(image: UIImage(named: "triangleRight_15x20"), style: .plain, target: self, action:#selector(showNext))
triangleLeftButton.title = "Previous"
triangleRightButton.title = "Next"
var items = [UIBarButtonItem]()
items.append(triangleLeftButton)
items.append(flexibleSpacer)
items.append(triangleRightButton)
toolbar?.items = items
A custom view or image bar button item has no title. A bar button item is either a title or a custom view or an image. If you want some words to appear in a custom view or image bar button item, make those words part of the custom view or image.
Here is how I solved this.
I eliminated the two statements attempting to assign a title to each button (I do wonder why Xcode did not flag that, allowing me to assign a title to each initially, though neither title would display).
I rewrote (compare the code below with the code in the question) the UIBarButtonItems as follows to now include two text items:
// Create toolbar items (buttons and texts)
let triangleLeftButton = UIBarButtonItem(image: UIImage(named: "triangleLeft_15x20"), style: .plain, target: self, action:#selector(showPrevious))
let triangleLeftText = UIBarButtonItem(title: "Previous", style: .plain, target: nil, action: nil)
let flexibleSpacer = UIBarButtonItem(barButtonSystemItem:.flexibleSpace , target: self, action: nil)
let triangleRightText = UIBarButtonItem(title: "Next", style: .plain, target: nil, action: nil)
let triangleRightButton = UIBarButtonItem(image: UIImage(named: "triangleRight_15x20"), style: .plain, target: self, action:#selector(showNext))
Then I appended everything, including the two new text items, to the array:
var items = [UIBarButtonItem]()
items.append(triangleLeftButton)
items.append(triangleLeftText)
items.append(flexibleSpacer)
items.append(triangleRightText)
items.append(triangleRightButton)
toolbar?.items = items
This effectively places "Previous" adjacent to the left-pointing button and "Next" adjacent to the right-pointing button, with the flexible spacer affording a nice wide gap between.
i can't get my left bar button item to align vertically. Here is my current code:
override func viewDidLoad() {
super.viewDidLoad()
var image = UIImage(named: "pinImage")
image = image?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
navigationItem.rightBarButtonItem = UIBarButtonItem(image: image, style: UIBarButtonItemStyle.plain, target: self, action: #selector(handleMapView))
navigationItem.leftBarButtonItem = UIBarButtonItem(title: "+", style: .plain, target: self, action: #selector(createTrip))
navigationItem.leftBarButtonItem?.setTitleTextAttributes([ NSFontAttributeName: UIFont(name: "Nunito", size: 48)!, NSForegroundColorAttributeName : UIColor(r: 123, g: 230, b: 200)], for: UIControlState.normal)
}
I have tried using :
navigationItem.leftBarButtonItem?.setBackgroundVerticalPositionAdjustment(4, for: .default)
but I can't get my vertical position to change. Any suggestions?
You cannot align them, because they go with your navigationBar. However, you can get that, by adding subview, and aligning your items in subview. Or another way is to use UIEdgeInsets