0

Okay, so I am only able to scroll outside the borders of the UIImageViews, but I need to be able to scroll on top of those views. The UIImageView contains Pan Gestures, Pinch Gestures, and I am unsure if that is causing the error. I will paste my cell code below:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
    imageIndex = indexPath.row

    var cell : XpandDraggableCell = tableView.dequeueReusableCellWithIdentifier("XpandDraggableCell", forIndexPath: indexPath) as! XpandDraggableCell

    cell.imgview.backgroundColor = UIColor(red: 210, green: 211, blue: 213, alpha: 1.0)

    if (horizontal) {
        defaultX = defaultSpacingX * imageIndex; /* E.g 70 * 2 = 140 from origin X. */
    }else{
        defaultY = defaultSpacingY * imageIndex; /* E.g 70 * 2 = 140 from origin Y. */
    }

    cell.imgview.frame = CGRect(x: cell.imgview.frame.origin.x, y: cell.imgview.frame.origin.y, width: 75.0, height: 75.0)
    var cellWidth : CGFloat = cell.contentView.frame.width
    var cellHeight : CGFloat = cell.contentView.frame.height
    cell.imgview.center = CGPoint(x: cell.contentView.frame.origin.x + (cellWidth / 2), y: cell.contentView.frame.origin.y + (cellHeight / 2))
    cell.imgview.image = UIImage(named: images[imageIndex]) /*Image provided*/
    cell.imgview.contentMode = UIViewContentMode.ScaleAspectFit
    cell.imgview.userInteractionEnabled = true
    cell.imgview.tag = imageIndex

    var addToViewPanGesture : UIPanGestureRecognizer = UIPanGestureRecognizer(target: self, action: Selector("imageViewPanned:"))
    cell.imgview.addGestureRecognizer(addToViewPanGesture)

    var doubleTapAddGesture : UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: Selector("cellDoubleTapped:"))
    doubleTapAddGesture.numberOfTapsRequired = 2
    cell.imgview.addGestureRecognizer(doubleTapAddGesture)

    cell.imgview.backgroundColor = UIColor.clearColor()
    cell.imgview.layer.backgroundColor = UIColor.clearColor().CGColor
    cell.imgviewbtn.backgroundColor = UIColor.clearColor()
    cell.backgroundColor = UIColor(red: 210, green: 211, blue: 213, alpha: 1.0)

    return cell
}


class XpandDraggableCell : UITableViewCell{
    @IBOutlet var imgviewbtn: UIButton!
    @IBOutlet var imgview: UIImageView!
}
Austin Sweat
  • 101
  • 11
  • It looks like the whole image is visible. What is there to pan about the image? –  Jun 13 '15 at 20:30
  • Basically it is a drag and drop function. You drag the image from the container on the right, to the left to drop it on top of the EnvironmentImageView I created and have the ability to create a scene of your choice. – Austin Sweat Jun 13 '15 at 20:31
  • Now this is about drag-and-drop. From what you originally asked, you only mentioned tableview cells and images, and your problem sounded like it was about panning **within** the cell. I'd create a new question, show your full screen, and explain whether you are dragging from outside the table to inside the table, inside the table to outside the table, or all within the table. :) –  Jun 13 '15 at 20:34
  • It is from the right side tableview to the left side environment image view. Do you have a way for me to contact you privately? You seem to know what I mean now, I can start another question if you'd rather do that. – Austin Sweat Jun 13 '15 at 20:36
  • I answered it in an edit to my answer. I don't have time to write the code now, but if you're still stuck, I'll try to help later. –  Jun 13 '15 at 20:42
  • Sure I can wait. I just read your edit, I got that. Just how to get the code to understand it exactly. Hmmmm. – Austin Sweat Jun 13 '15 at 20:44

1 Answers1

2

Panning and scrolling are the "same" gesture.

The problem is that the imageView's pan gesture recognizer is recognizing the gesture, and handling it (instead of failing it or passing the touch through to cell/tableView).

If you expect to be able to pan your image in any direction, what you can do is set the pan gesture recognizer on the tableViewCell, instead of the image.

Then check to see if the gesture's location is within the imageView. If so, begin the gesture, so the pan gesture will recognize it. When you "pan" outside the cell, the gesture won't have been recognized by the pan gesture, and can be recognized as a scroll.

- (BOOL)gestureRecognizerShouldBegin:(UIPanGestureRecognizer *)gestureRecognizer
{
    CGPoint point = [gestureRecognizer locationInView:self.view];
    CGRect frame = self.imageView.frame;
    if (CGRectContainsPoint(frame, point))
    {
        return YES;
    }
     else
    {
        return NO;
    }
}

Update:

Based on your edited question, what you have to do is make your gesture recognizer distinguish between dragging and scrolling. Again, these are similar gestures.

If you touch an image, then move your finger, how can iOS know whether you mean to drag the image, or scroll the table? You're going to have to make an educated guess:

  • If the gesture is to the left, it's likely a drag. The pan gesture recognizer should recognize the gesture.

  • If the gesture is up or down, it's likely a scroll. The pan gesture recognizer should fail the gesture.

Update 2:

Here's the code for your pan gesture recognizer to determine whether the touch should be a drag or a scroll.

- (BOOL)gestureRecognizerShouldBegin:(UIPanGestureRecognizer *)gestureRecognizer
{
    UIView *gestureView = [gestureRecognizer view];
    CGPoint translation = [gestureRecognizer translationInView:[gestureView superview]];

    // Check for horizontal gesture
    if (fabsf(translation.x) > fabsf(translation.y))
    {
        return YES;
    }

    return NO;
}

This will stop the pan gesture recognizer from recognizing vertical gestures as pans, and they should scroll the table, as you desire.

You'll find more information in similar questions.

Having said this, other developers have bypassed this pan-or-scroll tableView issue by using a long press gesture to initiate the drag. In that case, it's clear that any pan gesture would be for the initiated drag, otherwise any gesture would scroll the table (or swipe the cell).

Your app may not need swipe-to-delete but it's generally good not to interfere, conflict with, or change behavior for expected gestures that the users already know.

Community
  • 1
  • 1
  • Okay, so would this allow me to scroll with the image views in the cell without having to scroll outside the border of the uiimageview? – Austin Sweat Jun 13 '15 at 19:43
  • And to be clear I need to set the pan gestures to the cells, not the image views now? – Austin Sweat Jun 13 '15 at 19:43
  • Yes, and yes. This will let you pan the image view (your gesture recognizer) when your touch is within the image view, or scroll the table (built-in gesture) when your touch is outside the image view. –  Jun 13 '15 at 19:53
  • Okay, so this didn't work. Maybe I didn't write the code right, but here is an image of my view, containing the UITableView, UITableViewCell -> UIImageView inside. http://i.imgur.com/w8mXxPn.png – Austin Sweat Jun 13 '15 at 20:19
  • I need to be able to scroll like normal on top of the images, but also able to pan them like normal. – Austin Sweat Jun 13 '15 at 20:20
  • You can't do *both* on top of the images. If you touch the image, then slide your finger up (or down), is iOS supposed to pan the image or scroll the table? Either the image is supposed to pan, or the table is supposed to scroll. Gesture recognizers can either 1) recognize the gesture, and not pass it through, 2) recognize the gesture, and also pass it on, or 3) fail (not recognize) the gesture, and let another gesture recognizer try to recognize it. –  Jun 13 '15 at 20:23
  • Hmm, well there has to be a way to do something to make the scrolling feel more real. Currently when you try to scroll you have to go outside the certain area or you can't scroll at all. I gave it to a few people to try, and they were confused, and annoyed. – Austin Sweat Jun 13 '15 at 20:25
  • Yes. You do have a problem. If the image can pan in any direction, it is going to interfere with the tableView built-in behavior. Either the image moves, or the table moves. You could make the pan gesture be horizontal (left-right) for the image, then table could then scroll up and down. But for panning in any direction, it doesn't make sense to pan the image **and** scroll the table. –  Jun 13 '15 at 20:28
  • I don't want it to happen at the same time. I just want to be able to scroll through the images, and drag and drop the image I pick onto the left side environment view I made. – Austin Sweat Jun 13 '15 at 20:32
  • Thank you very much for that code. Is the view the uiimageview, and the superview the tableview? Just clarifying. – Austin Sweat Jun 14 '15 at 07:37
  • Yes. You understand the concept, but you'll have to tailor the code to match your project. There are tutorials that explain how to drag-and-drop from a scrolling view/tableView cell, which you can google if you're puzzled by how this all fits together. –  Jun 14 '15 at 11:56
  • You're awesome! This worked like a dream! Had to add the delegate 'UIGestureRecognizerDelegate' here is the code I made that worked great: – Austin Sweat Jun 14 '15 at 17:41
  • `func gestureRecognizerShouldBegin(gestureRecognizer: UIGestureRecognizer) -> Bool { var gesture : UIPanGestureRecognizer = gestureRecognizer as! UIPanGestureRecognizer var gestureView : UIView = gestureRecognizer.view! var translation : CGPoint = gesture.translationInView(gestureView.superview!) if(fabsf(Float(translation.x)) > fabsf(Float(translation.y))){ print("Horizontal Pan Gesture") return true } print("Vertical Pan Gesture") return false }` – Austin Sweat Jun 14 '15 at 17:41