I have tried the other stack overflow answers and they don't seem to work, I am not sure if something has changed in swift 5. But here is the code I used to create the right bar button. I followed a tutorial on youtube, and then looked to stackoverflow for solutions, and none seem to work. As I have set the frame for the button to be 34x34 yet the image seems to just stretch across the whole navigation bar.
//Adding Unmatch Button
let unmatchBtn = UIButton(type: .system)
unmatchBtn.setImage(UIImage(named: "heartbreak")?.withRenderingMode(.alwaysOriginal), for: .normal )
unmatchBtn.frame = CGRect(x: 0, y: 0, width: 34, height: 34)
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: unmatchBtn)
edit:
With the help of the answer it now fits properly on the nav bar, the layout is now messed up though. The stuff to its left is a customview that I made which is being pushed to the left.
let item = UIBarButtonItem(image: #imageLiteral(resourceName: ImageNameHere), style: .plain, target: self, action: #selector(action))
#objc func action() {
}
Related
I would like to show the button and image in the navigation bar.
Using this
let action = UIAction { _ in }
let image = UIImage(named: "logout")
let doneButton = UIBarButtonItem(title: "Done", image: image, primaryAction: action, menu: menu)
navigationItem.leftBarButtonItem = doneButton
Just shows the image without the title.
The documentation
https://developer.apple.com/documentation/uikit/uibarbuttonitem/3600776-init
Only indicates that if title is nil it would not be displayed.
I tried
https://stackoverflow.com/a/54403576/1898829 same result
https://stackoverflow.com/a/3903348/1898829 one loses a lot of default behaviour and cant use the uiaction with the new apis.
While I can definitely find a work around but any work around is less than ideal.
UIBarButtonItem doesn't support both text and image in the same UIBarButtonItem. There are 3 approach to solve this problem:
Make your self a custom navigation controller
Make an image which combine both your text and your image
Make your text and image into a custom view. UIBarButtonItem support a custom View. Check example below for how to use. You can customize the View both in coding or using autolayout view for your choice
let view = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 50, height: 50)))
let gesture = UITapGestureRecognizer(target: self, action: #selector(tapInView))
view.addGestureRecognizer(gesture)
view.backgroundColor = .red
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: view)
#objc func tapInView() {
print("tap")
}
I'm new to iOS programming and I would appreciate your help!
I have a table view cell whose right item should display a number the user picks.
My current solution is a picker view as the right item but the problem is that it is too small for appropriate user experience.
Thus im thinking about a label on the right side of the cell. When the user taps the cell, a picker view should appear similar to a keyboard. The row within the picker view that the user selects should then update the label. (I'm not sure if thats a smart solution..) But I don't know how to implement this.
I'm sorry if that question is too basic, but I would be very thankful for an easy explanation or solution suggestions to my user experience problem.
[Unfortunately I can't post a image]
First create a pickview and set it as input view to your text field li so
textField.inputView = pickerView
then setup the toolbar
func setupToolbar () {
let toolBar: UIToolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 44.0))
toolBar.tintColor = Color.custom(hexString: JIFFYConstants.ApplicationConstants.kAppOrangeColor, alpha: 1.0).value
let doneBtn: UIButton = UIButton(type: .custom)
doneBtn.frame = CGRect(x: 10, y: 0, width: 30, height: 30)
doneBtn.setTitle(JIFFYConstants.JiffyButtonTitles.kDoneActionTitle, for: .normal)
doneBtn.setTitleColor(Color.custom(hexString: JIFFYConstants.ApplicationConstants.kAppOrangeColor, alpha: 1.0).value, for: .normal)
doneBtn.addTarget(self, action: #selector(doneButtonAction), for: .touchUpInside)
let doneBarButton: UIBarButtonItem = UIBarButtonItem(customView: doneBtn)
let space : UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
var items = [UIBarButtonItem]()
items.append(space)
items.append(doneBarButton)
toolBar.items = items
textField.inputAccessoryView = toolBar
}
Later on add datasource to your picker view and reload it. It will show your pickerView as inputView.
You could make right item as a UITextFiled. Then set inputView for it.
https://developer.apple.com/documentation/uikit/uitextfield/1619620-inputview
UITEXTFIELD InputView Uipicker not working in swift
I am trying set size programmatically of left button bar item but i can't it.
This is my code:
let backButton = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
backButton.setBackgroundImage(UIImage(named: "hipster_pelo2.png"), for: .normal)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backButton)
But this is the result in iphone X with Xcode 9 and swift 3. In the image, you can see title app move it to the right because button size:
Anybody know that the problem will be the image size??
You can restrict the size of barButton items using
let barButton = UIBarButtonItem(customView: backButton)
NSLayoutConstraint.activate([(barButton.customView!.widthAnchor.constraint(equalToConstant: 30)),(barButton.customView!.heightAnchor.constraint(equalToConstant: 30))])
self.navigationItem.leftBarButtonItem = barButton
Reference : https://skyebook.net/blog/2017/09/uibarbuttonitem-sizing-in-ios-11/
The huge frame of the button is because of the huge image you are setting to the button's background. Though frame you set to button should override the implicit size of the button, for some strange Reasons when passed as custom view to bar button implicit size takes over. Hence applying width and height constraints to restrict the size of custom view kind of becomes necessary.
EDIT:
As OP is facing issue with loading the image from url and setting it as button's image I am updating my answer to demonstrate the same,
do {
try button.setImage(UIImage(data: Data(contentsOf: your_url)), for: .normal)
}
catch {
print(error)
}
Issue with OP's code was trying to set the button image, even before the image was downloaded. So this should help you solve your problem :)
EDIT 2:
OP facing trouble with making the bar button's customView circular, so here is the code that should make BarButton item's customView circular :)
barButton.customView?.layer.cornerRadius = 15
barButton.customView?.layer.masksToBounds = true
Hope it helps
I am trying set size programmatically of left button bar item but i can't it.
This is my code:
let backButton = UIButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
backButton.setBackgroundImage(UIImage(named: "hipster_pelo2.png"), for: .normal)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backButton)
But this is the result in iphone X with Xcode 9 and swift 3. In the image, you can see title app move it to the right because button size:
Anybody know that the problem will be the image size??
You can restrict the size of barButton items using
let barButton = UIBarButtonItem(customView: backButton)
NSLayoutConstraint.activate([(barButton.customView!.widthAnchor.constraint(equalToConstant: 30)),(barButton.customView!.heightAnchor.constraint(equalToConstant: 30))])
self.navigationItem.leftBarButtonItem = barButton
Reference : https://skyebook.net/blog/2017/09/uibarbuttonitem-sizing-in-ios-11/
The huge frame of the button is because of the huge image you are setting to the button's background. Though frame you set to button should override the implicit size of the button, for some strange Reasons when passed as custom view to bar button implicit size takes over. Hence applying width and height constraints to restrict the size of custom view kind of becomes necessary.
EDIT:
As OP is facing issue with loading the image from url and setting it as button's image I am updating my answer to demonstrate the same,
do {
try button.setImage(UIImage(data: Data(contentsOf: your_url)), for: .normal)
}
catch {
print(error)
}
Issue with OP's code was trying to set the button image, even before the image was downloaded. So this should help you solve your problem :)
EDIT 2:
OP facing trouble with making the bar button's customView circular, so here is the code that should make BarButton item's customView circular :)
barButton.customView?.layer.cornerRadius = 15
barButton.customView?.layer.masksToBounds = true
Hope it helps
I'm using self.navigationItem.rightBarButtonItems to setup my navigation bar items. However, for the bar buttons, i'm using a custom view(button). I observe there is spacing between buttons. How can I remove this?
i know its too late, but i solved it using following method of UIBarButtonItem
use
[barbuttonitem setImageInsets:UIEdgeInsetsMake(0, -30, 0, -70)];
I solved this by using storybord interface.I know you are using custom Bar,but this answer will useful for those who use stroybord.
1.Select the Bar item.
2.Select the Size Inspector.
Here you can find image Inset,using top,bottom AND left , right you can change the position of Bar Item.
You can't remove it. You can work around it by creating a bar button item with a custom view, where that custom view has you custom buttons all added as subviews. In this way you can directly control the exact positioning.
Here is an example that how you can resolve this issue:
Create an extension of UIBarButton
extension UIBarButtonItem
{
/** Create custom right bar button for reduce space between right bar buttons */
func initRightButton(let imageNamed:String, let target:UIViewController, let selector:Selector) -> UIBarButtonItem {
let frame = CGRectMake(0, 0, 30, 30)
//Create imageView
let imageView = UIImageView(frame:frame)
imageView.image = UIImage(named: imageNamed)
//Create Button
let button = UIButton(frame: frame)
button.addTarget(target, action: selector, forControlEvents: .TouchUpInside)
//Create View and add imageView and Button
let view = UIView(frame: frame)
view.addSubview(imageView)
view.addSubview(button)
return UIBarButtonItem(customView: view)
}
}
In your class controller use the method customizeNavigationBar
func customizeNavigationBar() {
//Create custom right bar button chat for reduce space between right bar buttons
let barButton1 = UIBarButtonItem().initRightButton("customImageNamed1", target: self, selector: customSelector)
let barButton2 = UIBarButtonItem().initRightButton("customImageNamed2", target: self, selector: customSelector)
self.navigationItem.rightBarButtonItems = [barButton1,barButton2]
}