button does not work after adding uiview in swift 4

Question

 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?

Answer 1

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

Answer 2

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