I'm learning how to use Swift, and I realized that I can't add a toolbar directly into a storyboard with a UITableViewController, so I'm struggling trying to add it programmatically.
This is what I'm trying to make it look like:
Now, I added this code:
let homeButton = UIBarButtonItem(title: "H", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let addButton = UIBarButtonItem(title: "+", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let loveButton = UIBarButtonItem(title: "Love", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let arr: [Any] = [homeButton, addButton, loveButton]
setToolbarItems(arr as? [UIBarButtonItem] ?? [UIBarButtonItem](), animated: true)
super.viewDidAppear(animated)
And it looks like this:
But I can`t find a way to make it look with the same spacing as the original, and also If I set the image I didn't find a way to adapt the size as I need it.
I tried using this code that I found here and seemed to work, but when I load my app, it simply shows the bar without any element.
navigationController?.setToolbarHidden(false, animated: true)
let homeButn = UIImage(named: "HomeButton")
let zeroPoint = CGPoint.zero
let settingsButton = UIButton(type: UIButtonType.custom) as UIButton
settingsButton.frame = CGRect(origin: zeroPoint, size: CGSize(width: 27, height: 27))
settingsButton.setImage(homeButn, for: [])
settingsButton.addTarget(self, action: #selector(ProfileButtonTapped), for: UIControlEvents.touchUpInside)
let rightBarButtonItem = UIBarButtonItem(customView: settingsButton)
navigationItem.setRightBarButton(rightBarButtonItem, animated: true)
I don't really know how to do this, any ideas? Thanks a lot!
Try this if it helps:
let flexibleSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)
let homeButton = UIBarButtonItem(title: "H", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let flexibleSpace1 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)
let addButton = UIBarButtonItem(title: "+", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let flexibleSpace2 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)
let loveButton = UIBarButtonItem(title: "Love", style: .plain, target: self, action: #selector(ProfileButtonTapped))
let arr: [Any] = [flexibleSpace, homeButton, flexibleSpace1, addButton, flexibleSpace2, loveButton]
setToolbarItems(arr as? [UIBarButtonItem] ?? [UIBarButtonItem](), animated: true)
super.viewDidAppear(animated)
You can add flexible space on left side of 'H' too to get left space.
Related
How can I force the toolbar to fill all bottom space? Because, as you can see, right now toolbar only took a small line, and the space under the toolbar is empty.
import UIKit
import CoreData
import Foundation
class AllChecklistsT1: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
let b1 = UIBarButtonItem(title: "Button 1", style: .plain, target: self, action: nil)
let b2 = UIBarButtonItem(title: "Button 2", style: .plain, target: self, action: nil)
self.toolbarItems = [b1, spaceButton, b2]
self.navigationController?.isToolbarHidden = false
self.tabBarController?.tabBar.isHidden = true
self.navigationController?.toolbar.backgroundColor = .systemPink
self.view.backgroundColor = .darkGray
}
}
I want to design a navigation View like.
1. Left Menu , and title in center
2. Left Menu , and Image just next to it, and left side button
i am trying to add buttons like this , but button is not properly showing
func addMenuButton(){
let btn_menu = UIButton(frame: CGRect(x: 0, y: 0, width: 40, height: 44))
btn_menu.addTarget(self, action: #selector(self.refreshBtnClicked), for: .touchUpInside)
btn_menu.setImage(#imageLiteral(resourceName: "ic_menu"), for: .normal)
btn_menu.setImage(#imageLiteral(resourceName: "ic_menu"), for: .selected)
self.navigationController?.navigationItem.leftBarButtonItems = [UIBarButtonItem(customView: btn_menu)]
}
//Option 1
self.title = "Title Here"
self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: UIImage(named: "menu"), style: .plain, target: self, action: #selector(menuBtnAction(_:)))
//Option 2
let plusBtn = UIBarButtonItem(image: UIImage(named: "plus"), style: .plain, target: self, action: #selector(plusBtnAction(_:)))
let logoView = UIImageView(image: UIImage(named:"ins"))
logoView.translatesAutoresizingMaskIntoConstraints = false
logoView.widthAnchor.constraint(equalToConstant: 180).isActive = true
self.navigationItem.leftBarButtonItems = [plusBtn,UIBarButtonItem(customView: logoView)]
let titleLabel = UILabel()
titleLabel.text = "Main Controller"
titleLabel.frame = self.navigationController!.view.frame
titleLabel.textAlignment = .left
self.navigationItem.titleView = titleLabel
self.navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(tapped))
self.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .save, target: self, action: #selector(tapped))
Try like this
func addMenuButton(){
let leftBarButtonItem : UIBarButtonItem? = UIBarButtonItem(image: #imageLiteral(resourceName: "ic_menu"), style: UIBarButtonItem.Style.plain, target: self, action: #selector(refreshBtnClicked))
self.navigationController?.navigationItem.leftBarButtonItem = leftBarButtonItem;
}
dI have a uitoolbar that has two buttons, First one is a System Button item Camera, second is a System item flixable space, and third is a Plain Button with text. However, when the toolbar comes up, the first button is centered but the Plain button is not.
Any idea on how to change the right button to center vertically?
This is the code on setting up the toolbar:
let sendButton = UIBarButtonItem(title: "test", style: .Plain, target: self, action: #selector(MyClass.test(_:)))
let toolBarItems = [UIBarButtonItem(barButtonSystemItem: .Camera, target: self, action: nil),
UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: self, action: nil),
sendButton]
Here is the code i tried .
import UIKit
class ViewController2 : UIViewController {
#IBOutlet weak var mytoolbar: UIToolbar!
override func viewDidLoad() {
super.viewDidLoad();
let sendButton = UIBarButtonItem(title: "test", style: .Plain, target: self, action: nil)
let toolBarItems = [UIBarButtonItem(barButtonSystemItem: .Camera, target: self, action: nil),
UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: self, action: nil),
sendButton]
mytoolbar.items = toolBarItems
}
}
Edit : I'm using the below code to create the uitoolbar programmatically.
let mytoolbar = UIToolbar.init(frame: CGRect(x: 0 , y: 0, width:self.view.frame.size.width, height: 44))
mytoolbar.backgroundColor = UIColor.blueColor()
let sendButton = UIBarButtonItem(title: "test", style: .Plain, target: self, action: nil)
let toolBarItems = [UIBarButtonItem(barButtonSystemItem: .Camera, target: self, action: nil),
UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: self, action: nil),
sendButton]
mytoolbar.items = toolBarItems
self.view.addSubview(mytoolbar)
Hope this helps now
Here are the results:
It is centered i guess . Can you show me your code to add UIToolbar ?
I want to set custom images to the UIBarButtonItem but it only shows a rectangular box around and It doesn't show the actual image.
func setupBrowserToolbar() {
let browser = UIToolbar(frame: CGRect(x: 0, y: 20, width: self.view.frame.width, height: 30))
//配置返回组件
let path = NSBundle.mainBundle().pathForResource("back", ofType: "png")
let urlstr = NSURL(fileURLWithPath: path!)
let data = NSData(contentsOfURL: urlstr)
let btnback = UIBarButtonItem(image: UIImage(data: data!), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("backClicked:"))
//分割按钮1
let btngrap1 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
//前进按钮
let btnforward = UIBarButtonItem(image: UIImage(named: "forward.png"), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("forwardClicked:"))
//分割按钮2
let btngrap2 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
//重新加载
let btnreload = UIBarButtonItem(image: UIImage(named: "reload.png"), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("reloadClicked:"))
//分割按钮3
let btngrap3 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.FlexibleSpace, target: nil, action: nil)
//停止加载
let btnstop = UIBarButtonItem(image: UIImage(named:"stop.png"), style: UIBarButtonItemStyle.Plain, target: self, action: Selector("stopClicked:"))
progress = UIProgressView((frame: CGRect(x: 0, y: 48, width: self.view.frame.width-50, height: 2)))
progress.progress = 0
browser.setItems([btnback, btngrap1, btnforward, btngrap2, btnreload, btngrap3, btnstop], animated: true)
ptimer = NSTimer(timeInterval: 0.2, target: self, selector: Selector("loadProgress"), userInfo: nil, repeats: true)
self.view.addSubview(browser)
}
my app screen shot
The above method is toolbar configuration but I don't know what is wrong.
Thats because UIBarButtonItem image's default rendering mode always draw the image as a template image, ignoring its color information (UIImageRenderingModeAlwaysTemplate). Just create your image using UIImage's method imageWithRenderingMode always original.
UIImage(named: "yourImageName")!.withRenderingMode(.alwaysOriginal)
Swift 3 , 4 update
From swift 3, the method is changed to the following format
UIImage(named:"yourImageName")!.withRenderingMode(.alwaysOriginal)
I want to add an image to UIBarButtonItem.
MY CODE:
let button1 = UIBarButtonItem(image: UIImage(named: "icon1"), style: .Plain, target: self, action: "Onb1ClickListener")
let button2 = UIBarButtonItem(image: UIImage(named: "icon2"), style: .Plain, target: self, action: "Onb2ClickListener")
let button3 = UIBarButtonItem(image: UIImage(named: "icon3"), style: .Plain, target: self, action: "Onb3ClickListener")
self.navigationItem.setRightBarButtonItems([button1, button2, button3], animated: false)
self.navigationItem.setHidesBackButton(true, animated: false)
this works but i get tinted blue images. how can i get the original images not tinted?
How can i add an image to the left of the UINavigationBar (not a bar button just a image)?
Thanks
The default image rendering case in a UIBarButtonItem is UIImageRenderingMode.AlwaysTemplate. So you have to create an image with the rendering options of UIImageRenderingMode.AlwaysOriginal, and set that image to the UIBarButtonItem. So:
let customImage = UIImage(named: "icon1")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
let button1 = UIBarButtonItem(image: customImage, style: .Plain, target: self, action: "Onb1ClickListener")