UIKit-Swift custom UIButton does not trigger action on tap - ios

Question

I have defined a "RadioButton like" UIButton. To achieve this I have added a subview inside a UIButton that I change its color on .touchUpInside event.
The problem is that actions is not being triggered.
Here is the code of my RadioButton:
final class RadioButton: UIButton {
let stateView = UIView()
var isActive: Bool = false {
didSet {
if isActive == true {
stateView.backgroundColor = #colorLiteral(red: 0, green: 0.5839999914, blue: 0.5289999843, alpha: 1)
} else {
stateView.backgroundColor = .clear
}
}
}
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
convenience init() {
self.init(frame: .zero)
configure()
}
private func configureColorSubview() {
stateView.backgroundColor = .white
stateView.isUserInteractionEnabled = false
stateView.layer.cornerRadius = 10
stateView.translatesAutoresizingMaskIntoConstraints = false
stateView.widthAnchor.constraint(equalToConstant: 20).isActive = true
stateView.heightAnchor.constraint(equalToConstant: 20).isActive = true
stateView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
stateView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
}
private func configure() {
isUserInteractionEnabled = true
addSubview(stateView)
configureColorSubview()
stateView.layer.zPosition = -1
sendSubviewToBack(stateView)
layer.cornerRadius = 20
layer.borderWidth = 2
layer.borderColor = UIColor.darkGray.cgColor
translatesAutoresizingMaskIntoConstraints = false
widthAnchor.constraint(equalToConstant: 40).isActive = true
heightAnchor.constraint(equalToConstant: 40).isActive = true
}
}
This is the code of the view where a RadioButton is wrapped with a label:
final class RadioButtonLabelView: UILabel {
let radioBtn: RadioButton = {
let r = RadioButton()
return r
}()
let label: UILabel = {
let label = UILabel()
let text = "Text"
let attributedText = NSMutableAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 22, weight: .semibold), NSAttributedString.Key.foregroundColor: UIColor.black])
label.attributedText = attributedText
return label
}()
let stack: UIStackView = {
let stack = UIStackView()
stack.axis = .horizontal
stack.distribution = .fill
stack.spacing = 20
return stack
}()
override init(frame: CGRect) {
super.init(frame: frame)
}
convenience init(text: String) {
self.init(frame: .zero)
setupView(text: text)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupView(text: String) {
addSubview(stack)
stack.addArrangedSubview(radioBtn)
stack.addArrangedSubview(label)
label.text = text
stack.anchor(topAnchor: topAnchor, trailingAnchor: trailingAnchor, bottomAnchor: bottomAnchor, leadingAnchor: leadingAnchor)
}
}
And here is the final modal view code:
final class SelectHourModalView: UIViewController {
lazy var buttonToOptionsConstraint: NSLayoutConstraint = button.topAnchor.constraint(greaterThanOrEqualTo: radioButtons.bottomAnchor, constant: 50)
lazy var buttonToPicker: NSLayoutConstraint = button.topAnchor.constraint(greaterThanOrEqualTo: datePicker.bottomAnchor, constant: 50)
var isShowPicker: Bool = false {
didSet {
if isShowPicker {
showPicker()
} else {
hidePicker()
}
}
}
let radioButtons: RadioButtonOptionsView = {
let rb = RadioButtonOptionsView()
return rb
}()
let datePicker: UIDatePicker = {
let date = UIDatePicker()
date.datePickerMode = .dateAndTime
date.setValue(UIColor.black, forKeyPath: "textColor")
return date
}()
let button: IoTaxiBtn = {
let button = IoTaxiBtn(text: "Seleccionar", color: #colorLiteral(red: 0, green: 0.5839999914, blue: 0.5289999843, alpha: 1), insets: UIEdgeInsets(top: 10, left: 0, bottom: 8, right: 0), font: UIFont.systemFont(ofSize: 25, weight: .bold), corner: 3)
button.shadow(color: UIColor.gray.cgColor, opacity: 1, offset: CGSize(width: .zero, height: 2), radius: 5)
button.isUserInteractionEnabled = false
return button
}()
private lazy var rbCollection: [RadioButtonLabelView] = {
let rbc = [radioButtons.btnLabelNow, radioButtons.btnLabel1, radioButtons.btnLabel20, radioButtons.btnLabel30, radioButtons.btnLabelCustom]
return rbc
}()
override func viewDidLoad() {
super.viewDidLoad()
setupFront()
setActions()
initialViewConfiguration()
}
private func setupFront() {
view.backgroundColor = .white
[radioButtons, datePicker, button].forEach {
view.addSubview($0)
}
radioButtons.anchor(topAnchor: view.topAnchor, trailingAnchor: view.trailingAnchor, bottomAnchor: nil, leadingAnchor: view.leadingAnchor, padding: .init(top: 15, left: 20, bottom: .zero, right: 20))
datePicker.anchor(topAnchor: radioButtons.bottomAnchor, trailingAnchor: view.trailingAnchor, bottomAnchor: nil, leadingAnchor: view.leadingAnchor, padding: .init(top: 20, left: 20, bottom: .zero, right: 20), size: .init(width: .zero, height: 190))
button.anchor(topAnchor: nil, trailingAnchor: view.trailingAnchor, bottomAnchor: nil, leadingAnchor: view.leadingAnchor, padding: .init(top: .zero, left: 20, bottom: .zero, right: 20))
buttonToPicker.isActive = true
buttonToOptionsConstraint.isActive = false
}
private func setActions() {
rbCollection.forEach {
$0.radioBtn.addTarget(self, action: #selector(setHour), for: .touchUpInside)
}
print(radioButtons.btnLabelCustom.radioBtn.actions(forTarget: self, forControlEvent: .touchUpInside) ?? ["Nada"])
}
#objc private func setHour(_ sender: RadioButton) {
print("tap")
rbCollection.forEach {
$0.radioBtn.isActive = false
}
sender.isActive.toggle()
}
}
//MARK: - Constraints management
//TODO: Animations
private extension SelectHourModalView {
func initialViewConfiguration() {
radioButtons.btnLabelCustom.radioBtn.isActive = true
isShowPicker = true
}
func showPicker() {
buttonToOptionsConstraint.isActive = false
buttonToPicker.isActive = true
datePicker.isHidden = false
}
func hidePicker() {
buttonToPicker.isActive = true
buttonToOptionsConstraint.isActive = true
datePicker.isHidden = true
}
}
final class RadioButtonOptionsView: UIView {
let btnLabelNow: RadioButtonLabelView = {
let btnLabel = RadioButtonLabelView(text: "Recógeme ahora")
return btnLabel
}()
let btnLabel20: RadioButtonLabelView = {
let btnLabel = RadioButtonLabelView(text: "Recógeme en 20 minutos")
return btnLabel
}()
let btnLabel30: RadioButtonLabelView = {
let btnLabel = RadioButtonLabelView(text: "Recógeme en 30 minutos")
return btnLabel
}()
let btnLabel1: RadioButtonLabelView = {
let btnLabel = RadioButtonLabelView(text: "Recógeme en una hora")
return btnLabel
}()
let btnLabelCustom: RadioButtonLabelView = {
let btnLabel = RadioButtonLabelView(text: "Hora personalizada")
return btnLabel
}()
let stackContainer: UIStackView = {
let stack = UIStackView()
stack.axis = .vertical
stack.distribution = .fill
stack.spacing = 8
return stack
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupView() {
addSubview(stackContainer)
[btnLabelNow, btnLabel20, btnLabel30, btnLabel1, btnLabelCustom].forEach {
stackContainer.addArrangedSubview($0)
}
stackContainer.anchor(topAnchor: topAnchor, trailingAnchor: trailingAnchor, bottomAnchor: bottomAnchor, leadingAnchor: leadingAnchor)
}
}
This is the UI debugger:
What is the problem? The stack view has the same height as the RadioButton and the stateView inside RadioButton has -1 zIndex and is no user interactable.

Answer 1

Inherit RadioButtonLabelView with UIView instead of UILabel will resolve your issue
final class RadioButtonLabelView: UIView {
//....
}