I actually found this same question here but for obj.c so with that I managed to do this:
trashNavButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
trashNavButton.addTarget(self, action: "trashItemClicked", forControlEvents: UIControlEvents.TouchUpInside)
trashNavButton = UIButton(frame: CGRectMake(0, 0, 50, 32))
trashNavButton.setTitle("\(trashCount)", forState: UIControlState.Normal)
trashNavButton.setTitleColor(UIColor(red: 229.0/255.0, green: 57.0/255.0, blue: 53.0/255.0, alpha: 1.0), forState: UIControlState.Normal)
trashNavButton.titleLabel?.textAlignment = NSTextAlignment.Right
trashNavButton.setImage(UIImage(named: "trashButton"), forState: UIControlState.Normal)
rightBarButton.customView = trashNavButton
self.navigationItem.rightBarButtonItem = rightBarButton
What I'm trying to do is to have a button on the right at the navigation bar, and I want that button to also have a label on it's left (you can see a great example on the question I mentioned above), and well this code works very well with the exception that the image is on the left and the label on the right and I want it to be the other way around, I'll appreciate your help :)
Just as an example
let containView = UIView(frame: CGRectMake(0, 0,70, 40))
let label = UILabel(frame: CGRectMake(0, 0, 50, 40))
label.text = "Right"
label.textAlignment = NSTextAlignment.Center
containView.addSubview(label)
let imageview = UIImageView(frame: CGRectMake(50, 10, 20, 20))
imageview.image = UIImage(named: "memoAccess")
imageview.contentMode = UIViewContentMode.ScaleAspectFill
containView.addSubview(imageview)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: containView)
Related
let SearchView = UIView()
SearchView.backgroundColor = UIColor.clear
SearchView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
let Searchbutton = UIButton(type: .system)
Searchbutton.setImage(UIImage (named: "SEARCH"), for: .normal)
Searchbutton.backgroundColor = .clear
Searchbutton.frame = CGRect(x: -17, y: -20, width: 30, height: 30)
Searchbutton.contentMode = .scaleAspectFit
let WidthConstraint = Searchbutton.widthAnchor.constraint(equalToConstant: 30)
let HeightConstraint = Searchbutton.heightAnchor.constraint(equalToConstant: 30)
WidthConstraint.isActive = true
HeightConstraint.isActive = true
let barButtonItem = UIBarButtonItem(customView: SearchView)
self.navigationItem.rightBarButtonItem = barButtonItem
SearchView.addSubview(Searchbutton)
Searchbutton.addTarget(self, action: #selector(viewanewcontroller(button:)), for: .touchUpInside)
//right search button
After making a button, I wanted to move it little bit to the right. So, i made UI View to move the button inside the view. But, then, after this, the button does not work anymore. Can anyone tell me the solution?
Your code is working fine but need to clarify some points.
Reason Your button not working is below 4 lines
let WidthConstraint = Searchbutton.widthAnchor.constraint(equalToConstant: 30)
let HeightConstraint = Searchbutton.heightAnchor.constraint(equalToConstant: 30)
WidthConstraint.isActive = true
HeightConstraint.isActive = true
As you already set UIButton frame then no need to use of above lines of code.
Yellow color view is your SearchView and green color is your UIButton.
If you use Searchbutton frame like Searchbutton.frame = CGRect(x: -17, y: -20, width: 30, height: 30) then it happens something like below image.
You added UIButton as subview of UIView and when you click on green button which is inside yellow View will work but the area which is outside Yellow area doesn't work.
You need to start UIButton frame from 0,0,30,30
Searchbutton.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
or you can directly set UIButton frame same as UIView frame then it looks like below image.
Searchbutton.frame = SearchView.frame
Below is your Working Code.
let SearchView = UIView()
SearchView.backgroundColor = UIColor.clear
SearchView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
let Searchbutton = UIButton(type: .system)
Searchbutton.setImage(UIImage (named: "SEARCH"), for: .normal)
Searchbutton.backgroundColor = .clear
Searchbutton.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
Searchbutton.contentMode = .scaleAspectFit
let barButtonItem = UIBarButtonItem(customView: SearchView)
self.navigationItem.rightBarButtonItem = barButtonItem
SearchView.addSubview(Searchbutton)
Searchbutton.addTarget(self, action: #selector(viewanewcontroller(button:)), for: .touchUpInside)
//right search button
You're doing a lot of unnecessary things here. Firstly, you don't need to put your Button in a container view to put it as the right bar button item.
You also don't need to add constraints to your searchbutton, since you have given it a fixed frame.
let Searchbutton = UIButton(type: .system)
Searchbutton.setImage(UIImage (named: "SEARCH"), for: .normal)
Searchbutton.backgroundColor = .clear
Searchbutton.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
Searchbutton.contentMode = .scaleAspectFit
let barButtonItem = UIBarButtonItem(customView: Searchbutton)
self.navigationItem.rightBarButtonItem = barButtonItem
Searchbutton.addTarget(self, action: #selector(viewanewcontroller(button:)), for: .touchUpInside)
Also as Pratik's comment said, you're meant to use lower camel case. so SearchView should be searchView and SearchButton as searchButton
As for moving it to the right, it seems like that isn't possible anymore without either subclassing the UINavigationBar and changing the implementation, or by making UIViews look exactly like the standard Navigation Bar.
Get rid of the space on the right side of a UINavigationBar
I want to set image and title both on rightBarButton. Title will come first. I searched a lot but all the articles are related to leftBarButton. So can anyone please tell me, how to set both of them?
func methodForSettingButtonClicked() {
let buttonSetting = UIButton(type: .custom)
buttonSetting.frame = CGRect(x: 0, y: 5, width: 25, height: 25)
let imageReg = UIImage(named: "setting")
buttonSetting.setTitle("Settings", for: .normal)
buttonSetting.setImage(imageReg, for: .normal)
let leftBarButton = UIBarButtonItem()
leftBarButton.customView = buttonSetting
self.navigationItem.rightBarButtonItem = leftBarButton;
}
try barbutton item with custom VIew as follows:-
let button = UIButton(type: .Custom)
button.setImage(UIImage(named: "icon_right"), forState: .Normal)
button.addTarget(self, action: "buttonAction", forControlEvents: .TouchUpInside)
button.frame = CGRectMake(0, 0, 53, 31)
button.imageEdgeInsets = UIEdgeInsetsMake(-1, 32, 1, -32)//move image to the right
let label = UILabel(frame: CGRectMake(3, 5, 50, 20))
label.font = UIFont(name: "Arial-BoldMT", size: 16)
label.text = "title"
label.textAlignment = .Center
label.textColor = UIColor.whiteColor()
label.backgroundColor = UIColor.clearColor()
button.addSubview(label)
let barButton = UIBarButtonItem(customView: button)
self.navigationItem.rightBarButtonItem = barButton
imageEdgeInsets plays a important role.
Try it as below and set title as you want
let button = UIButton(type: .system)
button.setImage(UIImage(named: "icon_image_name"), for: .normal)
button.setTitle("Categories", for: .normal)
button.addTarget(self, action: #selector(clickOnButtonActionMethod), for: .touchUpInside)
button.sizeToFit()
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
If you want then change button property as you want.
You can do like this way,
let button = UIButton(type: .custom)
button.setTitle("Settings", for: .normal)
button.setImage(#imageLiteral(resourceName: "settings"), for: .normal)
button.semanticContentAttribute = .forceRightToLeft
button.setTitleColor(UIColor.white, for: .normal)
button.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
It works for me, hope it can help you.
I saw the answer for this question for adding an image to the left nav bar item. And I did it successfully.
But I also want to add a small text next to the image. For example I want to show how many coins the user have. So I need to show a coins image and the number of coins next to it. How can it be done?
I tried to set title (with "123"), but I only see the image and not the title. This my code:
let button = UIButton.init(type: .custom)
button.setImage(UIImage.init(named: "coins.png"), for: UIControlState.normal)
button.addTarget(self, action:#selector(self.callMethod), for: UIControlEvents.touchUpInside)
button.frame = CGRect.init(x: 0, y: 0, width: 30, height: 30)
button.setTitle("123", for: UIControlState.normal)
let barButton = UIBarButtonItem.init(customView: button)
self.navigationItem.leftBarButtonItem = barButton
Thanks.
Since the bar button item is initialized with a custom view, you can add a UIImage and a UILabel to one view, along with a UIButton to capture the touch event, and pass that into the initializer.
// the UIButton is simply there to capture touch up event on the entire bar button view.
let button = UIButton.init(type: .custom)
button.addTarget(self, action: #selector(buttonPressed), for: .touchUpInside)
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
imageView.image = UIImage(named: "coins")
let label = UILabel(frame: CGRect(x: 35, y: 0, width: 50, height: 30))
label.text = "1234"
let buttonView = UIView(frame: CGRect(x: 0, y: 0, width: 90, height: 30))
button.frame = buttonView.frame
buttonView.addSubview(button)
buttonView.addSubview(imageView)
buttonView.addSubview(label)
let barButton = UIBarButtonItem.init(customView: buttonView)
self.navigationItem.leftBarButtonItem = barButton
You might have to adjust the frames accordingly for your own uses, of course.
I think your problem is the width it's 30 try to make it bigger like 50
let buttonContainer:UIView = UIView()
buttonContainer.frame = CGRect(x: 0, y: 0, width: 50, height: 32)
let image = UIImage(named: "coins")
let button = UIButton.init(type: .system)
button.setImage(image, for: .normal)
button.frame = buttonContainer.frame
button.setTitle("sss", for: .normal)
button.addTarget(self, action: #selector(action(_:)), for: .touchUpInside)
buttonContainer.addSubview(button)
self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: buttonContainer)
You can use backgroundImage for image and setTitle for test to the button.
follow this link definitely you will get idea:
image for nav bar button item swift
Use self.navigationItem.leftBarButtonItems that is an array of UIBarButtonItem
let button = UIBarButtonItem()
let text = UIBarButtonItem()
self.navigationItem.leftBarButtonItems = [button, text]
I want to create a basic UIButton programmatically. For example, in my view controller five UIButtons will be created dynamically in the same row and its layout or properties are set for some color, font, and size.
And I also need to add action method for a specific button.
If you wanted to do it programmatically, you might think along the following lines:
Create your buttons in a for... loop in viewDidLoad() (or elsewhere, depending on your requirements):
let buttonWidth : CGFloat = self.view.frame.width / 10
let buttonHeight : CGFloat = 50
for count in 0..<10 {
let newButton = UIButton(frame: CGRect(origin: CGPoint(x: CGFloat(count) * buttonWidth, y: 50), size: CGSize(width: buttonWidth, height: buttonHeight)))
newButton.backgroundColor = UIColor.red
newButton.setTitle("Button #\(count)", for: UIControlState.normal)
newButton.setTitleColor(UIColor.white, for: UIControlState.normal)
newButton.addTarget(self, action: #selector(self.buttonTapped(sender:)), for: UIControlEvents.touchUpInside)
newButton.titleLabel?.font = UIFont(name: "Arial", size: 10)
newButton.tag = count
self.view.addSubview(newButton)
}
Then you can implement the selector buttonTapped(sender: UIButton) as follows, retrieving the button's tag so you can tailor the action (via a switch statement, for example):
func buttonTapped(sender: UIButton) -> Void {
print("\(sender.tag) was tapped!")
// Do something more interesting based on the tag here...
}
This allows you to set up a lot of button actions without a lot of different selectors. Hope that helps.
Create uibuttons and add them inside main view see example below.
class yourClassName: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// here method CGRectMake defines x, y, width, height
var btnOne = UIButton(frame: CGRectMake(0, 0, 50, 50))
var btnOne = UIButton(frame: CGRectMake(0, 0, 50, 50))
self.view.addSubview(btnOne) // add button inside view
self.view.addSubview(btnOne) // add button inside view
// using selector you must specify a method for each button
btnOne.addTarget(self, action: #selector(self.actionOne), forControlEvents: .TouchUpInside)
btnTwo.addTarget(self, action: #selector(self.actionTwo), forControlEvents: .TouchUpInside)
}
Actions methods:
func actionOne(sender : UIButton) {
print("button one tapped")
}
func actionTwo(sender : UIButton) {
print("button second tapped")
}
let bacViewOne=UIButton(frame: CGRectMake(20, 60 , 130, 130))
bacViewOne.backgroundColor=UIColor.whiteColor()
bacViewOne.layer.cornerRadius=5.0
btn1 = UIButton(type: UIButtonType.Custom) as UIButton
btn1.setImage(UIImage(named: "new.png"), forState: UIControlState.Normal)
btn1.frame = CGRectMake((bacViewOne.frame.size.width-90)/2, 5 , 90, 90)
//btn1.backgroundColor = UIColor.whiteColor()
btn1.tag = 1
btn1.addTarget(self, action: #selector(ViewController.dashboard(_:)), forControlEvents: UIControlEvents.TouchUpInside)
bacViewOne.addSubview(btn1)
self.view.addSubview(bacViewOne)
let l1 = UILabel(frame: CGRectMake((bacViewOne.frame.size.width-90)/2, 100, 90, 21))
l1.textAlignment = NSTextAlignment.Center
l1.textColor = UIColor(red: 41/255.0, green: 43/255.0, blue: 64/255.0, alpha: 1)
l1.text = "Dashboard"
//l1.font = UIFont (name: "BakerSignetBT-Roman", size: 15)
bacViewOne.addSubview(l1)
l1.font = UIFont.systemFontOfSize(11)
var bacViewT=UIButton(type: UIButtonType.Custom) as UIButton
bacViewT .frame = CGRectMake(20, 240, 130, 130)
bacViewT.backgroundColor=UIColor.whiteColor()
bacViewT.layer.cornerRadius=5.0
btn3 = UIButton(type: UIButtonType.Custom) as UIButton
btn3.setImage(UIImage(named: "Usernew.png"), forState: UIControlState.Normal)
btn3.frame = CGRectMake((bacViewT.frame.size.width-90)/2, 5, 90, 90)
// btn3.backgroundColor = UIColor(red: 41/255.0, green: 43/255.0, blue: 64/255.0, alpha: 1)
btn3.tag = 2
btn3.addTarget(self, action: #selector(ViewController.userExpenses(_:)), forControlEvents: UIControlEvents.TouchUpInside)
bacViewT.addSubview(btn3)
self.view.addSubview(bacViewT)
let l2 = UILabel(frame: CGRectMake((bacViewT.frame.size.width-100)/2, 100, 100, 21))
l2.textAlignment = NSTextAlignment.Center
l2.textColor = UIColor(red: 41/255.0, green: 43/255.0, blue: 64/255.0, alpha: 1)
l2.text = "User Expense"
//l2.font = UIFont (name: "BakerSignetBT-Roman", size: 15)
bacViewT.addSubview(l2)
l2.font = UIFont.systemFontOfSize(11)
//7
let bacViewTh=UIButton(frame: CGRectMake(170, 60, 130, 130))
bacViewTh.backgroundColor=UIColor.whiteColor()
bacViewTh.layer.cornerRadius=5.0
btn7 = UIButton(type: UIButtonType.Custom) as UIButton
btn7.setImage(UIImage(named: "events.png"), forState: UIControlState.Normal)
btn7.frame = CGRectMake((bacViewTh.frame.size.width-90)/2, 5, 90, 90)
btn7.tag = 3
btn7.addTarget(self, action: #selector(ViewController.upcomingEvents(_:)), forControlEvents: UIControlEvents.TouchUpInside)
bacViewTh.addSubview(btn7)
let l3 = UILabel(frame: CGRectMake((bacViewTh.frame.size.width-100)/2, 100, 100, 21))
l3.textAlignment = NSTextAlignment.Center
l3.textColor = UIColor(red: 41/255.0, green: 43/255.0, blue: 64/255.0, alpha: 1)
l3.text = "Upcoming Events"
//l3.font = UIFont (name: "BakerSignetBT-Roman", size: 15)
bacViewTh.addSubview(l3)
l3.font = UIFont.systemFontOfSize(11)
self.view.addSubview(bacViewTh)
//8
let bacViewF=UIButton(frame: CGRectMake(170, 240, 130, 130))
bacViewF.backgroundColor=UIColor.whiteColor()
bacViewF.layer.cornerRadius=5.0
btn9 = UIButton(type: UIButtonType.Custom) as UIButton
btn9.setImage(UIImage(named: "Location.png"), forState: UIControlState.Normal)
btn9.frame = CGRectMake((bacViewF.frame.size.width-90)/2, 5, 90, 90)
btn9.tag = 4
btn9.addTarget(self, action: #selector(ViewController.userLocations(_:)), forControlEvents: UIControlEvents.TouchUpInside)
bacViewF.addSubview(btn9)
self.view.addSubview(bacViewF)
let l4 = UILabel(frame: CGRectMake((bacViewF.frame.size.width-100)/2, 100, 100, 21))
l4.textAlignment = NSTextAlignment.Center
l4.textColor = UIColor(red: 41/255.0, green: 43/255.0, blue: 64/255.0, alpha: 1)
l4.text = "User Locations"
bacViewF.addSubview(l4)
l4.font = UIFont.systemFontOfSize(11)
I was curious about how people make their own search interface, I really do not like the standard and decided to write my own. I do not know how to write my own, so I ask to prompt, where you can see all that I know - that's what is needed to create your own UIView.
An example of what I want to do
I once made something similar, if you use swift ,study this code, it will help you, if this is not helpful explain further please.
func addNavigationBar()
{
self.navigationController!.navigationBar.barTintColor = UIColor.blackColor()
let centerView = UIView(frame: CGRectMake(0, 0, 100, 30))
let logo = UIImage(named: "logo.png")
var btnMiddle = UIButton(frame: CGRectMake(0,5,80,20))
btnMiddle.setBackgroundImage(logo, forState: UIControlState.Normal)
btnMiddle.addTarget(self, action: "goBackHome", forControlEvents: UIControlEvents.TouchUpInside)
centerView.addSubview(btnMiddle)
self.navigationItem.titleView = centerView
var buttonDimension = CGFloat(25)
let rightView = UIView(frame: CGRectMake(0, 0, 100, 30))
let leftView = UIView(frame: CGRectMake(0, 0, 100, 30))
let btnr1 = UIButton(frame: CGRectMake(30,0,buttonDimension,buttonDimension))
btnr1.setBackgroundImage(UIImage(named: "_barSearch.png"), forState: UIControlState.Normal)
btnr1.addTarget(self, action: "search", forControlEvents: UIControlEvents.TouchUpInside)
rightView.addSubview(btnr1)
let btnr2 = UIButton(frame: CGRectMake(80,0,buttonDimension,buttonDimension))
btnr2.setBackgroundImage(UIImage(named: "_barSettinges.png"), forState: UIControlState.Normal)
btnr2.addTarget(self, action: "settinges", forControlEvents: UIControlEvents.TouchUpInside)
rightView.addSubview(btnr2)
let btnl3 = UIButton(frame: CGRectMake(0,0,buttonDimension,buttonDimension))
btnl3.setBackgroundImage(UIImage(named: "_barMenu.png"), forState: UIControlState.Normal)
btnl3.addTarget(self, action: "menu", forControlEvents: UIControlEvents.TouchUpInside)
leftView.addSubview(btnl3)
let rightBtn = UIBarButtonItem(customView: rightView)
self.navigationItem.rightBarButtonItem = rightBtn
let leftBtn = UIBarButtonItem(customView: leftView)
self.navigationItem.leftBarButtonItem = leftBtn
}