How to add clickable images to UIPickerView rows? – Ios swift

You won’t be able to add a gesture recognizer to the viewForRow view — all touches get eaten by the picker view.

So, you could write your own picker view which, depending on how closely you want to replicate the built-in picker view, could be fairly simple or super complex.

Or… you can add a tap recognizer to the picker view … then check if the tap is inside the center row’s image view.

Here’s a quick example…

We’ll use this as our custom row view:

class MyPickerRowView: UIView {

    let label = UILabel(frame: CGRect(x: 60, y: 0, width: 80, height: 50))
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height:50))

    var selected: Bool = false
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() {
        if #available(iOS 13.0, *) {
            imageView.image = UIImage.add
        } else {
            // Fallback on earlier versions
            imageView.backgroundColor = .red
        }
        addSubview(label)
        addSubview(imageView)
    }
    func tappedImageView(_ p: CGPoint) -> Bool {
        // let's toggle the image if the tap hits
        if imageView.frame.contains(p) {
            selected.toggle()
            if #available(iOS 13.0, *) {
                imageView.image = selected ? UIImage.checkmark : UIImage.add
            } else {
                imageView.backgroundColor = selected ? .green : .red
            }
            return true
        }
        return false
    }

}

The only "non-usual" thing is the func tappedImageView(_ p: CGPoint) -> Bool… it will check the passed point and return true if the point is inside the image view frame, or false if it’s not.

We’re also going to toggle the image between UIImage.add and UIImage.checkmark so we have some visual feedback.

Our tap gesture handler (in the controller class) will:

• get the view for the selected (center) row
• make sure it’s our custom MyPickerRowView class
• translate the tap point to that view
• ask that view if the point is inside the image view frame

So, here’s the controller class:

class PickerTestViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate, UIGestureRecognizerDelegate {
    
    let picker = UIPickerView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        picker.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(picker)
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            picker.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            picker.trailingAnchor.constraint(equalTo: g.trailingAnchor),
            picker.centerYAnchor.constraint(equalTo: g.centerYAnchor),
        ])
        
        // create a tap recognizer
        let tap = UITapGestureRecognizer(target: self, action: #selector(pickerTapped(_:)))
        // don't prevent all the normal behaviors of the picker view
        tap.cancelsTouchesInView = false
        // tap delegate needs to be set so we can use shouldRecognizeSimultaneouslyWith
        tap.delegate = self
        // add the tap recognizer to the PICKER view itself
        picker.addGestureRecognizer(tap)
        
        picker.delegate = self
        picker.dataSource = self

        // just so we can easily see the frame of the picker view
        picker.layer.borderColor = UIColor.red.cgColor
        picker.layer.borderWidth = 1
        
    }
    
    @objc func pickerTapped(_ tapRecognizer:UITapGestureRecognizer) {
        
        // get the index of the selected row (the "center" row)
        let n = picker.selectedRow(inComponent: 0)
        
        // make sure the view for that row is a MyPickerRowView
        if let v = picker.view(forRow: n, forComponent: 0) as? MyPickerRowView {
            // convert the tap location to that view
            let p = tapRecognizer.location(in: v)
            // ask the view if the tap is in the image view frame
            if v.tappedImageView(p) {
                print("tapped in image view in center row")
                // do something
            }
        }
    }
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return 100
    }
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 50
    }
    
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let parentView = MyPickerRowView()
        parentView.label.text = "(row)"
        return parentView
    }
    
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
    
}