Add tap gesture to a nested stackview - ios

Question

I've been trying to add tap gesture to a list of stackviews which are deeply nested in another stackview and a scrollview.
I'm not sure why is my implementation is not working.
In my code I'm using a selector but I would like to use a closure so I could pass into a function with parameters something like this (linkToOpen:String)->Void
import UIKit
import PlaygroundSupport
class TestViewController: UIViewController {
var aboutText:[String] = []
var fbLinks:[String] = []
let scrollView = UIScrollView()
let stackView = UIStackView()
let tap = UITapGestureRecognizer(target: self, action: #selector(didTapCard(sender: )))
override func viewDidLoad() {
super.viewDidLoad()
//Add and setup scroll view
self.view.addSubview(self.scrollView)
self.scrollView.translatesAutoresizingMaskIntoConstraints = false;
//Constrain scroll view
self.scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 5).isActive = true;
self.scrollView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 30).isActive = true;
self.scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -5).isActive = true;
self.scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0).isActive = true;
self.scrollView.addSubview(self.stackView)
self.stackView.translatesAutoresizingMaskIntoConstraints = false
self.stackView.axis = .vertical
self.stackView.alignment = UIStackView.Alignment.fill
self.stackView.spacing = 10;
//constrain stack view to scroll view
self.stackView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor).isActive = true;
self.stackView.topAnchor.constraint(equalTo: self.scrollView.topAnchor).isActive = true;
self.stackView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor).isActive = true;
self.stackView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor).isActive = true;
self.stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true;
fbLinks.append("Some text")
fbLinks.append("Some other text but longer")
fbLinks.append("Some other text but way longer then the previous was")
fbLinks.append("text again what a surprise")
fbLinks.append("guess what this is a text too")
for link in fbLinks
{
let sw:UIStackView = generateStackedItem(imageName:"bolt",text: link)
stackView.addArrangedSubview(sw)
}
}
func generateText(text:String)->UILabel
{
let textLabel = UILabel()
textLabel.text = NSLocalizedString(text, comment: "")
textLabel.textAlignment = .left
textLabel.numberOfLines = 0
textLabel.lineBreakMode = .byWordWrapping
return textLabel
}
func generateStackedItem(imageName:String,text:String)->UIStackView
{
let stackView = UIStackView()
stackView.axis = NSLayoutConstraint.Axis.horizontal
stackView.distribution = .fill
stackView.alignment = .center
stackView.spacing = 5.0
let label = generateText(text: text)
//stackView.addArrangedSubview(imageView)
stackView.addArrangedSubview(label)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.heightAnchor.constraint(equalTo: label.heightAnchor, constant: 5).isActive = true
stackView.isUserInteractionEnabled = true
stackView.addGestureRecognizer(tap)
return stackView
}
func openLink(link:String){
if let url = URL(string: link) {
UIApplication.shared.open(url)
}
}
#objc func didTapCard (sender: UITapGestureRecognizer) {
// let clickedView = cardView[sender.view!.tag]
print("View tapped !")
}
}
let vc = TestViewController()
vc.view.backgroundColor = .white
PlaygroundPage.current.liveView = vc

Answer 1

You can add a gesture recognizer to only one view.
Think of it like a label...
If you instantiate a label, then try to add it to 4 different stack views, it will only exist in the last stack view to which you've added it.
So, you need to create a new recognizer for each view:
stackView.isUserInteractionEnabled = true
// create new Tap Gesture Reconizer here
let tap = UITapGestureRecognizer(target: self, action: #selector(didTapCard(sender:)))
stackView.addGestureRecognizer(tap)
Then, in your action selector, you can get a reference to that view (and its properties / subviews / etc):
#objc func didTapCard (sender: UITapGestureRecognizer) {
if let sv = sender.view as? UIStackView,
let label = sv.arrangedSubviews.first as? UILabel,
let str = label.text {
print("Stack view with:", str, "was tapped!")
}
}
Here is your complete class, edited with those changes:
class TestViewController: UIViewController {
var aboutText:[String] = []
var fbLinks:[String] = []
let scrollView = UIScrollView()
let stackView = UIStackView()
override func viewDidLoad() {
super.viewDidLoad()
//Add and setup scroll view
self.view.addSubview(self.scrollView)
self.scrollView.translatesAutoresizingMaskIntoConstraints = false;
//Constrain scroll view
self.scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 5).isActive = true;
self.scrollView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 30).isActive = true;
self.scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -5).isActive = true;
self.scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0).isActive = true;
self.scrollView.addSubview(self.stackView)
self.stackView.translatesAutoresizingMaskIntoConstraints = false
self.stackView.axis = .vertical
self.stackView.alignment = UIStackView.Alignment.fill
self.stackView.spacing = 10;
//constrain stack view to scroll view
self.stackView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor).isActive = true;
self.stackView.topAnchor.constraint(equalTo: self.scrollView.topAnchor).isActive = true;
self.stackView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor).isActive = true;
self.stackView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor).isActive = true;
self.stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true;
fbLinks.append("Some text")
fbLinks.append("Some other text but longer")
fbLinks.append("Some other text but way longer then the previous was")
fbLinks.append("text again what a surprise")
fbLinks.append("guess what this is a text too")
for link in fbLinks
{
let sw:UIStackView = generateStackedItem(imageName:"bolt",text: link)
stackView.addArrangedSubview(sw)
}
}
func generateText(text:String)->UILabel
{
let textLabel = UILabel()
textLabel.text = NSLocalizedString(text, comment: "")
textLabel.textAlignment = .left
textLabel.numberOfLines = 0
textLabel.lineBreakMode = .byWordWrapping
return textLabel
}
func generateStackedItem(imageName:String,text:String)->UIStackView
{
let stackView = UIStackView()
stackView.axis = NSLayoutConstraint.Axis.horizontal
stackView.distribution = .fill
stackView.alignment = .center
stackView.spacing = 5.0
let label = generateText(text: text)
//stackView.addArrangedSubview(imageView)
stackView.addArrangedSubview(label)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.heightAnchor.constraint(equalTo: label.heightAnchor, constant: 5).isActive = true
stackView.isUserInteractionEnabled = true
// create new Tap Gesture Reconizer here
let tap = UITapGestureRecognizer(target: self, action: #selector(didTapCard(sender:)))
stackView.addGestureRecognizer(tap)
return stackView
}
func openLink(link:String){
if let url = URL(string: link) {
UIApplication.shared.open(url)
}
}
#objc func didTapCard (sender: UITapGestureRecognizer) {
if let sv = sender.view as? UIStackView,
let label = sv.arrangedSubviews.first as? UILabel,
let str = label.text {
print("Stack view with:", str, "was tapped!")
}
}
}
Note: That will work, but is not a particularly great way to do it.
A better approach would probably be to create a custom class that has its own stack view with imageView and label... and its own tap gesture recognizer. Then use either closures or protocol / delegate pattern to process the action.