I have a custom UIBarButtonItem, consisting of a UIImage and a UILabel. Set up as such:
addUsersButton = UIButton()
barButtonView = UIView()
addUsersImage = UIImageView(image: UIImage(named: "add-users")?.withRenderingMode(.alwaysOriginal))
barButtonView.addSubview(addUsersImage)
addUsersLabel = UILabel()
addUsersLabel.text = "Your Table"
addUsersLabel.font = ._8RobotoMedium
addUsersLabel.textColor = .wayDarkGray
addUsersLabel.textAlignment = .center
barButtonView.addSubview(addUsersLabel)
var space = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
var rightButtonItem = UIBarButtonItem(customView: barButtonView)
rightButtonItem.width = 30
navigationItem.rightBarButtonItem = rightButtonItem
With constraints like this:
addUsersImage.snp.makeConstraints { make in
make.top.centerX.equalToSuperview()
make.height.equalTo(addUsersImageHeight)
make.width.equalTo(addUsersImageWidth)
}
addUsersLabel.snp.makeConstraints { make in
make.centerX.equalToSuperview()
make.top.equalTo(addUsersImage.snp.bottom).offset(addUsersLabelHeightOffset)
}
however the actual bar button is sunk about half way into the bottom of the navigation item, and bleeds into the view controller's main view.
Related
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:
The below article shows how to add an image to the right of the navigation title.
https://blog.uptech.team/how-to-build-resizing-image-in-navigation-bar-with-large-title-8ba2e8bcb840
I'd like to add the image to the left of the navigation bar title. To achieve it, I set the leftAnchor instead of the right anchor for the imageView like below.
imageView.leftAnchor.constraint(equalTo: navigationBar.leftAnchor, constant: Const.ImageRightMargin)
The image shows above the navigation bar title, which is not what I'm after. I'd like the image to be on the same line as the title (left of the title).
Note:
I've seen other questions on SO about adding images to the title
view but this question specifically requests information about
adding image to the left of the title. Therefore, this question
is not a duplicate.
I know that I can set a custom title view like below but I do not
want to lose the prefersLargeTitles setting of the navigation bar.
self.navigationItem.titleView = customTitleView
Any help is much appreciated.
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let img = UIImage.init(named: "imgName")
let imgView = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
imgView.image = img!
imgView.contentMode = .scaleAspectFit
let item = UIBarButtonItem.init(customView: imgView)
let negativeSpacer = UIBarButtonItem.init(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
navigationItem.leftBarButtonItems = [negativeSpacer, item]
}
}
The result
If you want to execute a request when you click the image, replace this line
let negativeSpacer = UIBarButtonItem.init(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
with that line
let negativeSpacer = UIBarButtonItem.init(barButtonSystemItem: .fixedSpace, target: self, action: #selector(go))
And place this
#objc func go() {
print("go")
}
I have a UILabel which is implemented in a UIToolbar to display a number of text count.
The problem is if user starts typing and text count reaches more than 10, label shows dot dot dot.
Is there a way to fix this? Below is my label code
let textCountLabel: UILabel = {
let lb = UILabel()
lb.text = "0/2000"
lb.textColor = .lightGray
lb.sizeToFit()
return lb
}()
func createToolBar(){
let toolBar = UIToolbar()
toolBar.sizeToFit()
var items = [UIBarButtonItem]()
items.append(
UIBarButtonItem(customView: anonymousButton)
)
items.append(
UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
)
items.append(
UIBarButtonItem(customView: textCountLabel)
)
toolBar.setItems(items, animated: true)
textFieldPost.inputAccessoryView = toolBar
}
When you update your textCountLabel, also update the size or font to fit the text in your predefined space. see the sample code.
textCountLabel.text = yourUpdatedString
textCountLabel.sizeToFit()
I want to have the logo of my app followed by the app name on the navigation bar. Along with this, there should be a back button.
Below is a screenshot :
I've tried the code below.
self.navigationItem.setHidesBackButton(false, animated:true);
let imgLogo : UIImage = UIImage(named:"Logo")!
let imgViewLogo : UIImageView = UIImageView(image: imgLogo)
imgViewLogo.frame = CGRectMake(0, 0, 40, 40)
let leftItem:UIBarButtonItem = UIBarButtonItem(customView: imgViewLogo)
self.navigationItem.leftBarButtonItem = leftItem
// App Name set on storyboard at design-time
This places the logo on top of the back button shown below.
How can this be achieved?
You can use custom view for navigationItem.titleView. Create UIView with your logo and a label for UIViewController title and set
navigationItem.titleView = YOUR_CUSTOM_VIEW;
Instead of using .leftBarButtonItem use:
let imgLogo : UIImage = UIImage(named:"Logo")!
let imgViewLogo : UIImageView = UIImageView(image: imgLogo)
imgViewLogo.frame = CGRectMake(0, 0, 40, 40)
let leftItem:UIBarButtonItem = UIBarButtonItem(customView: imgViewLogo)
self.navigationItem.leftBarButtonItems?.append(leftItem)
It will be added along with the system back button
You can find tons of example about it.
In this example I've added also a space to centered well your logo if you needed:
let leftButton: UIBarButtonItem = UIBarButtonItem(image: UIImage(named: "Logo")!, style: UIBarButtonItemStyle.Plain, target: self, action:#selector(MyViewController.leftButtonPress(_:)))
let negativeSpacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FixedSpace, target: nil, action: nil)
negativeSpacer.width = -5.0 // Left inset to better center your logo
navigationItem.leftBarButtonItems = [negativeSpacer,leftButton]
func leftButtonPress(sender: AnyObject?) {
// do whatever you want when you press back button
}
Following is my code for adding an inputAccessoryView (with a Done button on it) to my textView:
let keyboardButtonView = UIToolbar()
keyboardButtonView.sizeToFit()
let doneButton = UIBarButtonItem(image: nil, style: .Done, target: self, action: "closeMessageViewKeyboard")
doneButton.possibleTitles = ["Done"]
var toolbarButtons = NSMutableArray()
toolbarButtons.addObject(doneButton)
keyboardButtonView.items = toolbarButtons as [AnyObject]
messageView.inputAccessoryView = keyboardButtonView
The Done button never appears. All I get is a white accessory bar. Am I missing anything here?
For me I create the accessory view using UINavigationBar like this:
let navBar = UINavigationBar(frame: CGRectMake(0, 0, viewWidth, 44))
navBar.barStyle = UIBarStyle.BlackTranslucent;
navBar.backgroundColor = UIColor.blackColor();
navBar.alpha = 0.9;
//replace viewWidth with view controller width
let navItem = UINavigationItem()
let doneButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Done, target: self, action: "closeMessageViewKeyboard")
navItem.rightBarButtonItem = doneButton
navBar.pushNavigationItem(navItem, animated: false)
messageView.inputAccessoryView = navBar
1) Add self?
self.messageView.inputAccessoryView = keyboardButtonView
2) You should be able to remove this line:
doneButton.possibleTitles = ["Done"]
and add (title: "done",...) to the line above it.
3) I have similar code and it probably doesn't matter, but, you might add:
keyboardButtonView.barStyle = UIBarStyle.Default