你如何在 storyboard 上制作一个 UIImageView 可点击（快速）

Question

I am new to swift (and Xcode development in general) and I was wondering how to make an ImageView on the storyboard clickable. What I'm trying to do is make it so when its clicked, it shows another view controller.

Answer 1

You can add tapGesture for that. Here is the code:

class ViewController: UIViewController {

@IBOutlet weak var imageView: UIImageView!
override func viewDidLoad() {
    super.viewDidLoad()
    // create tap gesture recognizer
    let tapGesture = UITapGestureRecognizer(target: self, action: "imageTapped:")

    // add it to the image view;
    imageView.addGestureRecognizer(tapGesture)
    // make sure imageView can be interacted with by user
    imageView.userInteractionEnabled = true
}

func imageTapped(gesture: UIGestureRecognizer) {
    // if the tapped view is a UIImageView then set it to imageview
    if let imageView = gesture.view as? UIImageView {
        println("Image Tapped")
        //Here you can initiate your new ViewController

        }
    }
}

Swift 3.0

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // create tap gesture recognizer
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageTapped(gesture:)))

        // add it to the image view;
        imageView.addGestureRecognizer(tapGesture)
        // make sure imageView can be interacted with by user
        imageView.isUserInteractionEnabled = true
    }

    func imageTapped(gesture: UIGestureRecognizer) {
        // if the tapped view is a UIImageView then set it to imageview
        if (gesture.view as? UIImageView) != nil {
            print("Image Tapped")
            //Here you can initiate your new ViewController

        }
    }
}

Swift 5.0

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // create tap gesture recognizer
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageTapped(gesture:)))

        // add it to the image view;
        imageView.addGestureRecognizer(tapGesture)
        // make sure imageView can be interacted with by user
        imageView.isUserInteractionEnabled = true
    }

    @objc func imageTapped(gesture: UIGestureRecognizer) {
        // if the tapped view is a UIImageView then set it to imageview
        if (gesture.view as? UIImageView) != nil {
            print("Image Tapped")
            //Here you can initiate your new ViewController

        }
    }
}

Answer 2

You can do it even easier and make a image clickable via Storyboard with no coding at all .

• First you need to drag a UITapGestureRecognizer onto your UIImageView in Storyboard.
• Then you create the IBAction you want to run in your code with @IBAction func imageClicked(_ sender: Any) {}
• Next you need to connect the UITapGestureRecognizer to the IBAction in your class by selecting the gesture recognizer in the Document Outline , then switching to the Connection Inspector Tab and dragging the Sent Actions -> Selector to your UIViewController where you then select the appropriate action you created previously.
• Finally you have to set the checkbox User Interaction Enabled on the image view.

Done, a fully clickable UIImageView without writing a single line of code except the obvious function you want to invoke. But hey, if you for example want to push a segue instead, then you can go without coding at all by using the gesture recognizers Triggered Segues instead of its Sent Actions .

Though Storyboard have their limitations, theres no need to write code for clickable images. ;)

Answer 3

I would suggest creating a UIButton with no text and making it the image you want, instead. After doing that, you can CTRL-drag from the image to the view controller you want to segue to. Or you can just make an IBAction in your view controller's code that manually segues.

Answer 4

for swift version 3.0 try below code

override func viewDidLoad() {
super.viewDidLoad()

let tap1 = UITapGestureRecognizer(target: self, action: #selector(tapGesture1))
imageview.addGestureRecognizer(tap1)
imageview.isUserInteractionEnabled = true
}
func tapGesture1() {
    print("Image Tapped")
}

Answer 5

On the storyboard set image view user interaction enabled and then get with this method

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
    UITouch *touch = [touches anyObject];

    if ([touch view] == yourImageView)
    {
            //add your code for image touch here 
    }
}

Answer 6

Firstly, created one image view. Than write this code override func viewDidLoad() { super.viewDidLoad()

let tap = UITapGestureRecognizer(target: self, action:          #selector(tapGesture))
imageview.addGestureRecognizer(tap)
imageview.isUserInteractionEnabled = true
}
func tapGesture() {
    print("Image View Tapped")
}

in your view controller.

UITapGestureRecognizer method do everything is clickable

Answer 7

I achieved this by setting user interaction enable = true

and this code below in TouchesBegan... Clean and simple for this

ImageView was also inside a StackView

if let touch = touches.first {
   if touch.view == profilePicture {
      print("image touched")
   }
}

Answer 8

Well, although you can use a UITapGestureRecognizer like mentioned above, if you need to do a quick project and just care about the functionality of the app, the easiest way is to have a transparent button covering your UIImageView with no text, and then using that to write whatever code you want. Sure, this will not be recommended if you're making a very important project or something but if you just want to make a quick app (let's say a very simple MVP for some meeting) this method should work fine.

Answer 9

in my opinion the reasonable way is to create extension of UIImage...

This is the code i found...

public typealias SimpleClosure = (() -> ())
private var tappableKey : UInt8 = 0 
private var actionKey : UInt8 = 1 

extension UIImageView {
    
    @objc var callback: SimpleClosure {
        get {
            return objc_getAssociatedObject(self, &actionKey) as! SimpleClosure
        }
        set {
            objc_setAssociatedObject(self, &actionKey, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN_NONATOMIC)
        }
    }
    
    var gesture: UITapGestureRecognizer {
        get {
            return UITapGestureRecognizer(target: self, action: #selector(tapped))
        }
    }
    
    var tappable: Bool! {
        get {
            return objc_getAssociatedObject(self, &tappableKey) as? Bool
        }
        set(newValue) {
            objc_setAssociatedObject(self, &tappableKey, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN)
            self.addTapGesture()
        }
    }

    fileprivate func addTapGesture() {
        if (self.tappable) {
            self.gesture.numberOfTapsRequired = 1
            self.isUserInteractionEnabled = true
            self.addGestureRecognizer(gesture)
        }
    }

    @objc private func tapped() {
        callback()
    }
}

and usage should look like

    @IBOutlet weak var exampleImageView: UIImageView! {
    didSet {
        self.exampleImageView.tappable = true
    }
}override func viewDidLoad() {
    super.viewDidLoad()
    self.exampleImageView.callback = {
         //TODO: Here you put the On click code.
    }
}