I always faced that issue and never been able to get the answer. When I create the UIButton programmatically and add to the UI and then when you touch the button that state on the UI not being changed to highlighted/down as the result of interacting with that button.
Another thing, 'sometimes' UIButtons when they are added through the interface builder, they work fine and when you touch them you can see the state in the UI changed to highlighted/down.
Any idea why is this happening?
If your button type is custom you had to set image / color for highlighted state, to differ the state change (From normal to highlighted).
If your button Type is system, you will see the state change effect without changing image / color.
I think you are noticing the difference between UIButton with type Custom vs. System.
I put together this playground to show the difference.
import UIKit
import XCPlayground
let view = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
view.backgroundColor = .whiteColor()
let button1 = UIButton(type: .System)
button1.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
button1.setTitle("One", forState: .Normal)
button1.backgroundColor = .blackColor()
view.addSubview(button1)
let button2 = UIButton()
button2.frame = CGRect(x: 0, y: 60, width: 200, height: 50)
button2.setTitle("Two", forState: .Normal)
button2.backgroundColor = .grayColor()
view.addSubview(button2)
XCPlaygroundPage.currentPage.liveView = view
Please post your programatic button code, so we can investigate more
Related
I have a custom back button created as UIBarButtonItem and inserted to navigationItem.leftBarButtonItem. I need to move it a little bit to the left. I was able to move with an image of UIBarButtonItem, but hit area of the button remained on original place.
Try to create a custom UIButton with the frame you want and after that create the UIBarButtonItem(customView: UIButton) like this for example
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 45, height: 40))
let yourBarButton = UIBarButtonItem(customView: button)
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 am having some difficulties creating a bar button that are leaving me pretty stumped. Im using the following code to create a right bar button:
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 22, height: 22))
button.setBackgroundImage(UIImage(named: "tune"), for: .normal)
button.addTarget(self, action:#selector(viewController.settingsBtnPressed), for:.touchUpInside)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
No matter what I set the width or height as the button size does not change. The VC is in a navigation controller. Does anyone have any insight or next steps I can take? Any help would be appreciated
Click on your ViewController in StoryBoard. Go to "Editor" -> "Embed In" -> Click on "Navigation Controller".After that paste the code in your ViewDidLoad method where you want to see the BarButton.
override func viewDidLoad() {
super.viewDidLoad()
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 22, height: 22))
button.setBackgroundImage(UIImage(named: "tune"), for: .normal)
button.addTarget(self, action:#selector(ViewController.settingsBtnPressed), for:.touchUpInside)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
}
// The height and minimum value of this button will be affected by the rightBarButtonItem
Button height is 100000
Button height is 0
[ You can this ]
// Provide a vew to button
let tView = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 40));
tView.backgroundColor = UIColor.darkGray
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 20, height: 22))
//button.setBackgroundImage(UIImage(named: "tune"), for: .normal)
button.backgroundColor = UIColor.green;
button.addTarget(self, action:#selector(ViewController.settingsBtnPressed), for:.touchUpInside)
// add btton to tView
tView.addSubview(button)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: tView)
Turns out that the problem arises due to how bar buttons are handled in iOS 11. UIBarButtonItemnow uses autolayout instead of frames. As a result, the following code allows you to adjust the size of the button:
button.widthAnchor.constraint(equalToConstant: 22.0).isActive = true
button.heightAnchor.constraint(equalToConstant: 22.0).isActive = true
I want to resize a button as a square and here's my code:
let button = UIButton()
button.backgroundColor = UIColor.red
button.translatesAutoresizingMaskIntoConstraints = false
//method one
//button.widthAnchor.constraint(equalToConstant:44.0).isActive = true
//button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
//method two
button.frame.size = CGSize(width: 20.0, height: 20.0)
button.addTarget(self, action: #selector(ratingButtonTapped(button: )), for: .touchUpInside)
addArrangedSubview(button)
I have tried both method however none of them seem to work out fine with an error showing some mistakes in method one and nothing shown in method two. when i run the code, button is fulfilled in the container. what is wrong here?
Use addSubview() instead of addArrangedSubview().
I write here the playground with the same solution I posted in comments, in case someone encounters the same problem:
Swift 3.0:
//: Playground - noun: a place where people can play
import UIKit
import PlaygroundSupport
let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 400))
view.backgroundColor = UIColor.blue
let button = UIButton()
button.backgroundColor = UIColor.red
button.frame.size = CGSize(width: 40.0, height: 20.0)
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button) // This does the trick
PlaygroundPage.current.liveView = view
Why not create the button and initialise it with the given size?
let btn = UIButton(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
And then change the x and y accordingly
I'm trying to add a UiButton on top of googleMapView.
I want to have a another button to open my Google Maps app for navigation from my app.
I tried adding a button programmatically and using xib.. its not working in both ways. (not showing).
Do you guys have any idea about it. I'm using swift
try adding the button as a subview.
create the button like this:
let button = UIButton()
button.backgroundColor = .blue
button.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 50)
button.setTitle("My Button", for: .normal)
and add it as a subview to your googleMapView like this:
googleMapView.addSubview(button)