Custom view with textField and button not responding - ios

Question

I have custom view with some labels, a text field and a button. When I add it to a view in a VC, the custom view appears nicely, but I can't tap on the text field or on the button, they are not responding. Can someone tell my what is the problem with the code? Here is the simplified version:
import UIKit
class CustomView: UIView {
let title: UILabel = {
let title = UILabel()
title.font = UIFont.systemFont(ofSize: 24)
title.text = "Title"
title.numberOfLines = 0
title.textAlignment = .center
title.translatesAutoresizingMaskIntoConstraints = false
return title
}()
let textView: UITextField = {
let textView = UITextField()
textView.translatesAutoresizingMaskIntoConstraints = false
textView.placeholder = "Placeholder text"
textView.backgroundColor = UIColor.lightGray
textView.layer.cornerRadius = 10
return textView
}()
let searchButton: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.blue
button.setTitle("Tap me", for: UIControl.State.normal)
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
return button
}()
private func setupView() {
addSubview(title)
addSubview(textView)
addSubview(searchButton)
NSLayoutConstraint.activate([
title.topAnchor.constraint(equalTo: self.topAnchor, constant: 100),
title.rightAnchor.constraint(equalTo: self.rightAnchor),
title.leftAnchor.constraint(equalTo: self.leftAnchor),
])
NSLayoutConstraint.activate([
textView.topAnchor.constraint(equalTo: title.bottomAnchor, constant: 20),
textView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
textView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
textView.heightAnchor.constraint(equalToConstant: 60)
])
NSLayoutConstraint.activate([
searchButton.topAnchor.constraint(equalTo: textView.bottomAnchor, constant: 20),
searchButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
searchButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
searchButton.heightAnchor.constraint(equalToConstant: 60)
])
}
#objc func buttonAction(_ sender:UIButton!)
{
print("Button tapped")
}
override init(frame: CGRect) {
super.init(frame: frame)
self.setupView()
}
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
import UIKit
class ViewController: UIViewController {
private let customView = CustomView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(customView)
customView.translatesAutoresizingMaskIntoConstraints = false
customView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
customView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
customView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
}
}
Basically I want to have a seperate file with the view that has all the design and I just want to drop that into the VC without doing anything special with it. Is this even a good approach? Where should I set up the button action? I mean once its tappable...
Thanks!

Answer 1

Try this first - at the end of viewDidLoad(), add this line:
customView.backgroundColor = .red
When you run the app, you'll notice there is no red box.
Now, add this line after that one:
customView.clipsToBounds = true
Run it again, and... we see nothing!
The problem is, you haven't given your customView any height.
To fix it, constrain the bottom of searchButton in your custom view class:
NSLayoutConstraint.activate([
searchButton.topAnchor.constraint(equalTo: textView.bottomAnchor, constant: 20),
searchButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
searchButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
searchButton.heightAnchor.constraint(equalToConstant: 60),
// add this line!
searchButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20),
])

Answer 2

You need to set userInteractionEnabled to true on your CustomView instance so that it passes through taps.
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(customView)
customView.translatesAutoresizingMaskIntoConstraints = false
customView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
customView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
customView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
customView.userInteractionEnabled = true
}
You can use a delegation pattern or a closure property to pass the button tap event back to the containing view controller.
For example,
class CustomView: UIView {
var searchTappedHandler: ((CustomView)->Void)?
#objc func buttonAction(_ sender:UIButton!)
{
print("Button tapped")
self.searchTappedHandler?(self)
}
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(customView)
customView.translatesAutoresizingMaskIntoConstraints = false
customView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
customView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
customView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
customView.userInteractionEnabled = true
customView.searchTappedHandler = { _ in
print("Search button was tapped")
}
}
Or, if you want to use a function rather than an inline closure
func handleTap(_ customView: CustomView) {
print("tap")
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(customView)
customView.translatesAutoresizingMaskIntoConstraints = false
customView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
customView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
customView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
customView.userInteractionEnabled = true
customView.searchTappedHandler = handleTap
}