Cara menetapkan tindakan untuk objek UIImageView di Swift


186

Saya mencoba untuk menetapkan UIImageViewsuatu tindakan ketika pengguna mengetuknya.

Saya tahu cara membuat tindakan untuk UIButton, tetapi bagaimana saya bisa meniru perilaku yang sama UIButton, tetapi menggunakan UIImageView?

Jawaban:


421

Anda akan membutuhkan UITapGestureRecognizer. Untuk mengatur gunakan ini:

override func viewDidLoad()
{
    super.viewDidLoad()

    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(imageTapped(tapGestureRecognizer:)))
    imageView.isUserInteractionEnabled = true
    imageView.addGestureRecognizer(tapGestureRecognizer)
}

@objc func imageTapped(tapGestureRecognizer: UITapGestureRecognizer)
{
    let tappedImage = tapGestureRecognizer.view as! UIImageView

    // Your action
}

(Anda juga dapat menggunakan UIButtondan menetapkan gambar untuk itu, tanpa teks dan dari sekadar menghubungkan IBAction)


3
Nitpick: var tgr = UITapGestureRecognizer (target: self action: Selector ("imageTapped:")), perlu koma di antara dua parameter.
sysuser

3
seperti yang dinyatakan di bawah ini oleh MidHun MP, pastikan Anda memiliki userInteractionEnabled = true
Sheraz

2
Di Swift 3.0 sintaks aksi: Selector ("imageTapped:") berubah menjadi action: #selector (imageTapped))
emily

2
Juga di Swift 3.0 properti userInteractionEnabled telah diubah namanya menjadi isUserInteractionEnabled
Doug Amos

2
Menggunakan Swift 4, ini berhasil bagi saya, tetapi saya harus menambahkan @objcpengubah ke fungsi.
Mark Lyons

68

Anda perlu menambahkan tanda pengenal isyarat (Untuk mengetuk gunakan UITapGestureRecognizer , untuk mengetuk dan menahan, gunakan UILongPressGestureRecognizer ) ke UIImageView.

let tap = UITapGestureRecognizer(target: self, action: #selector(YourClass.tappedMe))
imageView.addGestureRecognizer(tap)
imageView.isUserInteractionEnabled = true

Dan Menerapkan metode pemilih seperti:

@objc func tappedMe()
{
    println("Tapped on Image")
}

13
userInteractionEnabled adalah kunci.
kennydust

@ hatim: Apa masalah yang Anda hadapi? Jika Anda memiliki masalah baru, silakan posting sebagai pertanyaan baru.
Midhun MP

@ MadhunMP Saya menghasilkan tampilan gambar secara dinamis dan telah melakukan persis apa yang tertulis dalam jawaban ini tetapi fungsi tappedMe () tidak dipanggil
hatim

1
Ini bekerja untuk saya dengan perubahan berikut: biarkan ketuk = UITapGestureRecognizer (target: mandiri, tindakan: #selector (ViewController.tappedMe)) // baris berikutnya -> successIndicatorImg.addGestureRecognizer (ketuk) // baris berikutnya -> successIndicatorImg.isUserInteractionEnabled = true
Almir Campos

@ hatim, apakah Anda menggunakan gerakan yang sama ke beberapa tampilan UI? Saya baru saja menyelesaikan masalah ini karena saya menggunakan gerakan yang sama untuk beberapa tampilan dan hanya satu yang berfungsi untuk saya. ketika saya membuat beberapa gerakan, itu berhasil untuk saya.
nadafafif

36

Anda dapat menambahkan UITapGestureRecognizerke imageView, cukup seret satu ke Storyboard / xib Anda, Ctrl-drag dari imageView ke gestureRecognizer, dan Ctrl-drag dari gestureRecognizer ke file Swift untuk membuatIBAction .

Anda juga harus mengaktifkan interaksi pengguna pada UIImageView, seperti yang ditunjukkan pada gambar ini: masukkan deskripsi gambar di sini


4
UIImageViewtidak merespons sentuhan secara default. Anda juga harus mengaktifkan interaksi pengguna.
rmaddy

@rmaddy Ups, itu benar. Diedit.
Emil

1
Saya suka bagaimana Anda dapat mengatur ini menggunakan IB, drag / drop kuat, dan tidak berharap itu mungkin. +1 untuk itu. Sebagai noob, akan mudah untuk tidak tahu bagaimana itu terhubung tanpa "mousing" di storyboard. Itu tergantung pada preferensi Anda, tetapi saya lebih suka "melihatnya dalam kode".
angryITguy

14

Untuk swift 2.0 ke atas lakukan ini

@IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        let tap = UITapGestureRecognizer(target: self, action: #selector(ViewController.tappedMe))
        imageView.addGestureRecognizer(tap)
        imageView.userInteractionEnabled = true
    }
    func tappedMe()
    {
        print("Tapped on Image")
    }

userInteractionEnabled sekarang telah diubah namanya menjadi isUserInteractionEnabled
Chaim Friedman

11

Kode Swift4

Coba ini beberapa metode ekstensi baru:

import UIKit

extension UIView {

    fileprivate struct AssociatedObjectKeys {
        static var tapGestureRecognizer = "MediaViewerAssociatedObjectKey_mediaViewer"
    }

    fileprivate typealias Action = (() -> Void)?


    fileprivate var tapGestureRecognizerAction: Action? {
        set {
            if let newValue = newValue {
                // Computed properties get stored as associated objects
                objc_setAssociatedObject(self, &AssociatedObjectKeys.tapGestureRecognizer, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN)
            }
        }
        get {
            let tapGestureRecognizerActionInstance = objc_getAssociatedObject(self, &AssociatedObjectKeys.tapGestureRecognizer) as? Action
            return tapGestureRecognizerActionInstance
        }
    }


    public func addTapGestureRecognizer(action: (() -> Void)?) {
        self.isUserInteractionEnabled = true
        self.tapGestureRecognizerAction = action
        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleTapGesture))
        self.addGestureRecognizer(tapGestureRecognizer)
    }


    @objc fileprivate func handleTapGesture(sender: UITapGestureRecognizer) {
        if let action = self.tapGestureRecognizerAction {
            action?()
        } else {
            print("no action")
        }
    }

}

Sekarang kapan pun kita ingin menambahkan UITapGestureRecognizerke UIViewatau UIViewseperti subkelas UIImageView, kita dapat melakukannya tanpa membuat fungsi terkait untuk penyeleksi!

Pemakaian:

 profile_ImageView.addTapGestureRecognizer {
        print("image tapped")
    }

2
Bagus sekali. dan itu sangat menyederhanakan implementasi sejauh ini.
Nick N

membuat saya sedikit takut dengan fungsi refleksi yang digunakan - apakah ada peluang bagus untuk ini akan bekerja di versi cepat di masa depan?
BananaAcid

1
Ini sangat elegan dan bermanfaat. Bekerja untuk saya
Taylor Maxwell

2
❤️Saya suka ekstensi
Ricardo

8

Anda sebenarnya bisa mengatur gambar UIButtonuntuk apa yang biasanya Anda masukkan ke dalam UIImageView. Misalnya, di mana Anda akan melakukan:

myImageView.image = myUIImage

Anda bisa menggunakan:

myButton.setImage(myUIImage, forState: UIControlState.Normal)

Jadi, begini tampilannya kode Anda:

override func viewDidLoad(){
  super.viewDidLoad()

  var myUIImage: UIImage //set the UIImage here
  myButton.setImage(myUIImage, forState: UIControlState.Normal)
}

@IBOutlet var myButton: UIButton!
@IBAction func buttonTap(sender: UIButton!){
  //handle the image tap
}

Hal yang hebat tentang menggunakan metode ini adalah bahwa jika Anda harus memuat gambar dari database, Anda dapat mengatur judul tombol sebelum Anda mengatur gambar:

myButton.setTitle("Loading Image...", forState: UIControlState.Normal)

Untuk memberi tahu pengguna Anda bahwa Anda memuat gambar


2

Perlu menambahkan malas untuk TapGestureRecognizer untuk mendaftar
karena 'diri' di UITapGestureRecognizer (target: self ...) akan nol jika bukan malas var. Bahkan jika Anda mengatur isUserInteractionEnable = true, itu tidak akan mendaftar tanpa lazar var.

lazy var imageSelector : UIImageView = {
    let image = UIImageView(image: "imageName.png")
    //now add tap gesture
    image.isUserInteractionEnabled = true
    image.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleImageSelector)))
    return image
}()
@objc private func handleImageSelector() {
    print("Pressed image selector")
}

1

Anda dapat menempatkan UIButtondengan latar belakang transparan di atas UIImageView, dan mendengarkan ketukan pada tombol sebelum memuat gambar


1
Ini cara cepat untuk menggambarkan opsi. Saya pikir semua orang tahu itu!
depsch ali

3
Ini bukan ide yang baik untuk menambahkan komponen UI yang tidak perlu tanpa alasan nyata. Ini akan meningkatkan kompleksitas UI dan Anda juga harus berurusan dengan kendala tata letak otomatis yang sama. Lebih baik menambahkan TapGestureRecognizer.
Gunhan

1

Kode Swift 4


Langkah 1 Di ViewdidLoad ()

   let pictureTap = UITapGestureRecognizer(target: self, action: #selector(MyInfoTableViewController.imageTapped))
       userImageView.addGestureRecognizer(pictureTap)
       userImageView.isUserInteractionEnabled = true

Langkah 2 Tambahkan Fungsi Berikut

@objc func imageTapped() {

        let imageView = userImageView
        let newImageView = UIImageView(image: imageView?.image)
        newImageView.frame = UIScreen.main.bounds
        newImageView.backgroundColor = UIColor.black
        newImageView.contentMode = .scaleAspectFit
        newImageView.isUserInteractionEnabled = true
        let tap = UITapGestureRecognizer(target: self, action: #selector(dismissFullscreenImage))
        newImageView.addGestureRecognizer(tap)
        self.view.addSubview(newImageView)

        self.navigationController?.isNavigationBarHidden = true
        self.tabBarController?.tabBar.isHidden = true

    }

Telah Diuji Dan Bekerja Dengan Baik


0

Saya sarankan untuk menempatkan tombol tidak terlihat (opacity = 0) pada imageview Anda dan kemudian menangani interaksi pada tombol.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.