UIImageView पर UIGestureRecognizer


179

मेरे पास एक है UIImageView, जिसे मैं आकार बदलने और घुमाने आदि में सक्षम होना चाहता हूं।

में UIGestureRecognizerजोड़ा जा सकता है UIImageView?

मैं एक रोटेट और पिंच पहचानकर्ता जोड़ना UIImageViewचाहूंगा जो कि रनटाइम में बनाया जाएगा।

कोई इन पहचानकर्ताओं को कैसे जोड़ता है?

जवाबों:


426

पर userInteractionEnabledहै कि जाँच करें । फिर आप एक जेस्चर पहचानकर्ता जोड़ सकते हैं।YESUIImageView

imageView.userInteractionEnabled = YES;
UIPinchGestureRecognizer *pgr = [[UIPinchGestureRecognizer alloc] 
    initWithTarget:self action:@selector(handlePinch:)];
pgr.delegate = self;
[imageView addGestureRecognizer:pgr];
[pgr release];
:
:
- (void)handlePinch:(UIPinchGestureRecognizer *)pinchGestureRecognizer
{
  //handle pinch...
}

5
नहीं, यह सिर्फ दिखाता है कि जेस्चर पहचानने वालों को कैसे जोड़ा जाए। आपको इशारे हैंडलर्स में वास्तविक जूम / रोटेट करना होगा। जूम / रोटेट कैसे करें पर नमूना ऐप Touches_GestureRecognizers देखें ।

77
+1 यह समझने की कोशिश कर रहा है कि मेरे इशारे काम क्यों नहीं करेंगे। "जाँचें कि userInteractionEnabled UESmageView पर YES है।" धन्यवाद!
Critter

1
इसने निश्चित रूप से समग्र दृष्टिकोण के लिए एक पहचानकर्ता पर सीमा निर्धारित करने की कोशिश करने की तुलना में मेरा काम आसान बना दिया। धन्यवाद!
जोश कोवाच

6
imageView.userInteractionEnabled = YES; यह कुंजी है! धन्यवाद।
हमासन

3
userInteractionEnabledअभी भी YES / Xcode 8 वस्तुनिष्ठ-सी / स्विफ्ट में सच होना चाहिए
लीन

76

हां, एक UIGestureRecognizer को UIImageView में जोड़ा जा सकता है। जैसा कि अन्य उत्तर में कहा गया है, अपनी userInteractionEnabledसंपत्ति को सेट करके छवि दृश्य पर उपयोगकर्ता इंटरैक्शन को सक्षम करने के लिए याद रखना बहुत महत्वपूर्ण है YES। UIImageView UIView से विरासत में मिला है, जिसकी उपयोगकर्ता इंटरैक्शन प्रॉपर्टी YESडिफ़ॉल्ट रूप से सेट है , हालाँकि, UIImageView की उपयोगकर्ता इंटरैक्शन प्रॉपर्टी NOडिफ़ॉल्ट रूप से सेट है ।

से UIImageView डॉक्स:

नई छवि दृश्य वस्तुओं को डिफ़ॉल्ट रूप से उपयोगकर्ता की घटनाओं की उपेक्षा करने के लिए कॉन्फ़िगर किया गया है। यदि आप UIImageView के कस्टम उपवर्ग में ईवेंट को हैंडल करना चाहते हैं, तो आपको ऑब्जेक्ट को इनिशियलाइज़ करने के बाद userInteractionEnabled प्रॉपर्टी के मूल्य को YES में स्पष्ट रूप से बदलना होगा।

वैसे भी, जवाब के थोक पर। यहाँ UIImageViewa UIPinchGestureRecognizer, a UIRotationGestureRecognizer, और a के साथ कैसे बनाया जाए, इसका एक उदाहरण दिया गया है UIPanGestureRecognizer

सबसे पहले, viewDidLoadअपनी पसंद का या किसी अन्य तरीके से, एक छवि दृश्य बनाएं, इसे एक छवि, एक फ्रेम दें, और इसके उपयोगकर्ता इंटरैक्शन को सक्षम करें। फिर तीन इशारों को निम्नानुसार बनाएं। उनकी प्रतिनिधि संपत्ति (स्वयं के लिए सबसे अधिक संभावना) का उपयोग करना सुनिश्चित करें। इसके लिए एक ही समय में कई इशारों का उपयोग करना आवश्यक होगा।

- (void)viewDidLoad
{
    [super viewDidLoad];

    // set up the image view
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"someImage"]];
    [imageView setBounds:CGRectMake(0.0, 0.0, 120.0, 120.0)];
    [imageView setCenter:self.view.center];
    [imageView setUserInteractionEnabled:YES]; // <--- This is very important

    // create and configure the pinch gesture
    UIPinchGestureRecognizer *pinchGestureRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchGestureDetected:)];
    [pinchGestureRecognizer setDelegate:self];
    [imageView addGestureRecognizer:pinchGestureRecognizer];

    // create and configure the rotation gesture
    UIRotationGestureRecognizer *rotationGestureRecognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotationGestureDetected:)];
    [rotationGestureRecognizer setDelegate:self];
    [imageView addGestureRecognizer:rotationGestureRecognizer];

    // creat and configure the pan gesture
    UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureDetected:)];
    [panGestureRecognizer setDelegate:self];
    [imageView addGestureRecognizer:panGestureRecognizer];


    [self.view addSubview:imageView]; // add the image view as a subview of the view controllers view
}

यहां वे तीन विधियां बताई गई हैं, जब आपके दृष्टिकोण के इशारों का पता लगाया जाएगा। उनके अंदर, हम इशारे की वर्तमान स्थिति की जांच करेंगे, और अगर यह शुरू हुआ या बदला हुआ है, तो UIGestureRecognizerStateहम इशारे के पैमाने / रोटेशन / अनुवाद संपत्ति को पढ़ेंगे, उस डेटा को एक प्रफुल्लित रूपांतरित करने के लिए लागू करेंगे, छवि के लिए एफाइन परिवर्तन लागू करें देखें, और फिर जेस्चर स्केल / रोटेशन / ट्रांसलेशन को रीसेट करें।

- (void)pinchGestureDetected:(UIPinchGestureRecognizer *)recognizer
{
    UIGestureRecognizerState state = [recognizer state];

    if (state == UIGestureRecognizerStateBegan || state == UIGestureRecognizerStateChanged)
    {
        CGFloat scale = [recognizer scale];
        [recognizer.view setTransform:CGAffineTransformScale(recognizer.view.transform, scale, scale)];
        [recognizer setScale:1.0];
    }
}

- (void)rotationGestureDetected:(UIRotationGestureRecognizer *)recognizer
{
    UIGestureRecognizerState state = [recognizer state];

    if (state == UIGestureRecognizerStateBegan || state == UIGestureRecognizerStateChanged)
    {
        CGFloat rotation = [recognizer rotation];
        [recognizer.view setTransform:CGAffineTransformRotate(recognizer.view.transform, rotation)];
        [recognizer setRotation:0];
    }
}

- (void)panGestureDetected:(UIPanGestureRecognizer *)recognizer
{
    UIGestureRecognizerState state = [recognizer state];

    if (state == UIGestureRecognizerStateBegan || state == UIGestureRecognizerStateChanged)
    {
        CGPoint translation = [recognizer translationInView:recognizer.view];
        [recognizer.view setTransform:CGAffineTransformTranslate(recognizer.view.transform, translation.x, translation.y)];
        [recognizer setTranslation:CGPointZero inView:recognizer.view];
    }
}

अंत में और बहुत महत्वपूर्ण बात, आपको इशारों को एक ही समय में काम करने की अनुमति देने के लिए UIGestureRecognizerDelegate विधि का उपयोग करने की आवश्यकता होगी gestureRecognizer: shouldRecognizeSimultaneouslyWithGestureRecognizer। यदि ये तीन इशारे केवल तीन इशारे हैं जिन्हें इस वर्ग ने अपने प्रतिनिधि के रूप में सौंपा है, तो आप बस YESनीचे दिखाए गए अनुसार वापस लौट सकते हैं। हालांकि, यदि आपके पास अतिरिक्त इशारे हैं, जो इस वर्ग को उनके प्रतिनिधि के रूप में सौंपा गया है, तो आपको यह निर्धारित करने के लिए इस पद्धति में तर्क जोड़ने की आवश्यकता हो सकती है कि कौन सा इशारा उन्हें सभी कामों को एक साथ करने की अनुमति देने से पहले है।

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    return YES;
}

यह सुनिश्चित करने के लिए मत भूलें कि आपकी कक्षा UIGestureRecognizerDelegate प्रोटोकॉल के अनुरूप है । ऐसा करने के लिए, सुनिश्चित करें कि आपका इंटरफ़ेस कुछ इस तरह दिखता है:

@interface MyClass : MySuperClass <UIGestureRecognizerDelegate>

यदि आप किसी कार्य नमूना परियोजना में स्वयं कोड के साथ खेलना पसंद करते हैं, तो मैंने जो नमूना परियोजना बनाई है, उसमें यह कोड यहाँ पाया जा सकता है।


1
यह अब तक का सबसे अच्छा जवाब है, जिसे मैंने स्टैकओवरफ्लो.कॉम में देखा है, पूर्ण विस्तृत, अच्छी टिप्पणी की और यहां तक ​​कि गिट पर स्रोत कोड भी शामिल है। इसके लिए धन्यवाद
एलेजांद्रो लुएंगो

1
स्पष्ट, कदम से कदम, भयानक स्पष्टीकरण
एल्विन

1
धन्यवाद, कि एक या दो साल में कई दर्जन ट्यूटोरियल एप्पल और अन्य लोगों द्वारा करने में विफल रहे। मुझे लगता है कि आईओएस में कई अन्य चीजें होनी चाहिए जो संभव हैं, लेकिन गलतफहमी और गलतफहमी के कारण वे हमारे लिए खो गए हैं।
ज़ैक मॉरिस

शानदार जवाब, बेहतरीन। आपके धैर्य के लिए बहुत बहुत धन्यवाद।
जोर्ज बी जॉर्ज

13

स्विफ्ट 4.2

myImageView.isUserInteractionEnabled = true
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(imageTapped))
tapGestureRecognizer.numberOfTapsRequired = 1
myImageView.addGestureRecognizer(tapGestureRecognizer)

और जब टैप किया गया:

@objc func imageTapped(_ sender: UITapGestureRecognizer) {
   // do something when image tapped
   print("image tapped")
}

11

स्विफ्ट 2.0 समाधान

आप एक ही मनोर में एक नल, चुटकी या कड़ी चोट पहचानकर्ता बनाते हैं। नीचे मैं आपको अपने पहचानकर्ता को चलाने और चलाने के लिए 4 चरणों के माध्यम से चलता हूँ।

4 कदम

1.) से विरासत UIGestureRecognizerDelegateअपनी कक्षा हस्ताक्षर में जोड़कर।

class ViewController: UIViewController, UIGestureRecognizerDelegate {...}

2.) एक IBOutlet बनाने के लिए अपनी छवि से अपने व्यू कॉन्ट्रोलर तक नियंत्रण खींचें:

@IBOutlet weak var tapView: UIImageView!

3.) आपके विचार में डिडलॉड निम्नलिखित कोड जोड़ें:

// create an instance of UITapGestureRecognizer and tell it to run 
// an action we'll call "handleTap:"
let tap = UITapGestureRecognizer(target: self, action: Selector("handleTap:"))
// we use our delegate
tap.delegate = self
// allow for user interaction
tapView.userInteractionEnabled = true
// add tap as a gestureRecognizer to tapView
tapView.addGestureRecognizer(tap)

4.) उस फ़ंक्शन को बनाएं जिसे तब बुलाया जाएगा जब आपका जेस्चर पहचानकर्ता टैप किया गया हो। ( = nilयदि आप चुनते हैं तो आप बाहर कर सकते हैं)।

func handleTap(sender: UITapGestureRecognizer? = nil) {
    // just creating an alert to prove our tap worked!
    let tapAlert = UIAlertController(title: "hmmm...", message: "this actually worked?", preferredStyle: UIAlertControllerStyle.Alert)
    tapAlert.addAction(UIAlertAction(title: "OK", style: .Destructive, handler: nil))
    self.presentViewController(tapAlert, animated: true, completion: nil)
}

आपका अंतिम कोड कुछ इस तरह दिखना चाहिए:

class ViewController: UIViewController, UIGestureRecognizerDelegate {

    @IBOutlet weak var tapView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let tap = UITapGestureRecognizer(target: self, action: Selector("handleTap:"))
        tap.delegate = self
        tapView.userInteractionEnabled = true
        tapView.addGestureRecognizer(tap)
    }

    func handleTap(sender: UITapGestureRecognizer? = nil) {
        let tapAlert = UIAlertController(title: "hmmm...", message: "this actually worked?", preferredStyle: UIAlertControllerStyle.Alert)
        tapAlert.addAction(UIAlertAction(title: "OK", style: .Destructive, handler: nil))
        self.presentViewController(tapAlert, animated: true, completion: nil)
    }
}

1
मैंने इसके बारे में यहाँ एक ब्लॉग लिखा था: codebeaulieu.com/3/UIGestureRecognier-programatically
Dan Beaulieu

6

मैंने सिर्फ एक नजर में एक साथ 3 इशारों को जोड़कर स्विफ्ट 4 के साथ ऐसा किया

  1. UIPinchGestureRecognizer : ज़ूम इन और ज़ूम आउट दृश्य।
  2. UIRotationGestureRecognizer : दृश्य घुमाएँ।
  3. UIPANGestureRecognizer : दृश्य खींचना।

यहाँ मेरा नमूना कोड

class ViewController: UIViewController: UIGestureRecognizerDelegate{
      //your image view that outlet from storyboard or xibs file.
     @IBOutlet weak var imgView: UIImageView!
     // declare gesture recognizer
     var panRecognizer: UIPanGestureRecognizer?
     var pinchRecognizer: UIPinchGestureRecognizer?
     var rotateRecognizer: UIRotationGestureRecognizer?

     override func viewDidLoad() {
          super.viewDidLoad()
          // Create gesture with target self(viewcontroller) and handler function.  
          self.panRecognizer = UIPanGestureRecognizer(target: self, action: #selector(self.handlePan(recognizer:)))
          self.pinchRecognizer = UIPinchGestureRecognizer(target: self, action: #selector(self.handlePinch(recognizer:)))
          self.rotateRecognizer = UIRotationGestureRecognizer(target: self, action: #selector(self.handleRotate(recognizer:)))
          //delegate gesture with UIGestureRecognizerDelegate
          pinchRecognizer?.delegate = self
          rotateRecognizer?.delegate = self
          panRecognizer?.delegate = self
          // than add gesture to imgView
          self.imgView.addGestureRecognizer(panRecognizer!)
          self.imgView.addGestureRecognizer(pinchRecognizer!)
          self.imgView.addGestureRecognizer(rotateRecognizer!)
     }

     // handle UIPanGestureRecognizer 
     @objc func handlePan(recognizer: UIPanGestureRecognizer) {    
          let gview = recognizer.view
          if recognizer.state == .began || recognizer.state == .changed {
               let translation = recognizer.translation(in: gview?.superview)
               gview?.center = CGPoint(x: (gview?.center.x)! + translation.x, y: (gview?.center.y)! + translation.y)
               recognizer.setTranslation(CGPoint.zero, in: gview?.superview)
          }
     }

     // handle UIPinchGestureRecognizer 
     @objc func handlePinch(recognizer: UIPinchGestureRecognizer) {
          if recognizer.state == .began || recognizer.state == .changed {
               recognizer.view?.transform = (recognizer.view?.transform.scaledBy(x: recognizer.scale, y: recognizer.scale))!
               recognizer.scale = 1.0
         }
     }   

     // handle UIRotationGestureRecognizer 
     @objc func handleRotate(recognizer: UIRotationGestureRecognizer) {
          if recognizer.state == .began || recognizer.state == .changed {
               recognizer.view?.transform = (recognizer.view?.transform.rotated(by: recognizer.rotation))!
               recognizer.rotation = 0.0
           }
     }

     // mark sure you override this function to make gestures work together 
     func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
         return true
     }

}

कोई भी प्रश्न, केवल टिप्पणी करने के लिए टाइप करें। धन्यवाद


3

स्विफ्ट 3 उदाहरण

override func viewDidLoad() {

    self.backgroundImageView.addGestureRecognizer(
        UITapGestureRecognizer.init(target: self, action:#selector(didTapImageview(_:)))
    )

    self.backgroundImageView.isUserInteractionEnabled = true
}

func didTapImageview(_ sender: Any) {
    // do something
}

कोई इशारा पुनरावर्तक प्रतिनिधियों या अन्य कार्यान्वयन जहां आवश्यक हो।


2

तुम भी छवि को देखने में एक नल इशारा पहचानकर्ता खींच सकते हैं Storyboard। फिर ctrl + dragकोड द्वारा एक क्रिया बनाएँ ।


1

ब्लॉक प्रेमी के लिए आप ब्लॉक में इशारों की क्रिया को जोड़ने के लिए ALActionBlocks का उपयोग कर सकते हैं

__weak ALViewController *wSelf = self;
imageView.userInteractionEnabled = YES;
UITapGestureRecognizer *gr = [[UITapGestureRecognizer alloc] initWithBlock:^(UITapGestureRecognizer *weakGR) {
    NSLog(@"pan %@", NSStringFromCGPoint([weakGR locationInView:wSelf.view]));
}];
[self.imageView addGestureRecognizer:gr];
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.