Reset Button for draggable images

Scruffy · January 2012

I am creating a fairly simple app with several draggable images in a view, and I want a reset button which will reset all the images to their original positions. Can anyone help with the code for this, or point me to some useful resources?

Thanks in advance.

ps my code in the .m file looks like this:

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

UITouch *touch = [[event allTouches] anyObject];

if ([touch view] == img13) {
CGPoint location = [touch locationInView:self.view];
img13.center = location;
}

if ([touch view] == img14) {
CGPoint location = [touch locationInView:self.view];
img14.center = location;
}

if ([touch view] == img15) {
CGPoint location = [touch locationInView:self.view];
img15.center = location;
}

Bobarino · January 2012

- (IBAction)buttonPressed {
image.center = CGPointMake (x,y);
}

Scruffy · January 2012

Hi there,
Excellent, i got it working now. I have just one other issue i am unable to solve so far; when i grab an image to drag it, as soon as i start moving it the image jumps so that it's centre moves to the cursor [on my IOS Simulator]. The drag action still works, it just looks a bit sloppy, or jumpy, instead of smooth. Any ideas?

(Thanks Bobarino :)

Bobarino;400085 said:

- (IBAction)buttonPressed {
image.center = CGPointMake (x,y);
}

architectpianist · January 2012

Instead of

CGPoint location = [touch locationInView:self.view];
img.center = location;

use

CGPoint location = [touch locationInView:self.view];
[UIView animateWithDuration:0.3 animations:^{
	img.center = location;
}];

Scruffy · January 2012

Thanks architectpianist, but i can't get that code to work; the image can be dragged, but it still jumps when i begin dragging it.

scruffy

architectpianist;400219 said:

Instead of

CGPoint location = [touch locationInView:self.view];
img.center = location;

use

CGPoint location = [touch locationInView:self.view];
[UIView animateWithDuration:0.3 animations:^{
	img.center = location;
}];

Bobarino · January 2012

this should help...

Part 1

iPhone SDK Tutorial: Making An Image Dodging Game (Part 1) - YouTube

Part 2

iPhone SDK Tutorial: Making An Image Dodging Game (Part 2) - YouTube

Part 3

iPhone SDK Tutorial: Making An Image Dodging Game (Part 3) - YouTube

Duncan C · January 2012

Scruffy;400238 said:
Thanks architectpianist, but i can't get that code to work; the image can be dragged, but it still jumps when i begin dragging it.

scruffy

I would suggest not moving the image location to the point the user touches, but instead, detecting a dragging motion, and offsetting the image location by the amount the user drags.

UIGestureRecognizers make this much easier. Do a search in Xcode on "touches" and download the sample app with that name. That will get you 2 projects, one that does it the old way, with touchesBegan/touchesMoved, and the other that uses gesture recognizers. Take a look at the gesture recognizer one.

Scruffy · January 2012

Hi Guys,
Thanks for your help. I have followed all advice and tried out all the above suggestions but unfortunately i don't know enough to make any of them work. However i found an example by Navaneethan Thambu called MyDragApp which i can get to work so i will follow that trail for the moment. It uses the older method but it works and as a novice at this thats all i can go by atm.

Thanks again, and catch you all later :)

Scruffy · January 2012

Hi Duncan,
Regarding the Touches app that you recommended, i have found some of the things i need in an app, using UIGestureRecognizers, but i cannot set Touches into landscape mode. I can make it turn to the right, but the images move 90 degrees as well. I have spent some days on this, exploring lots of image movement apps trying to find one that does all the things i need it to do and i have found all the elements i need, but not all in the one app. Anyway, thanks for your help.

Duncan C;400727 said:
I would suggest not moving the image location to the point the user touches, but instead, detecting a dragging motion, and offsetting the image location by the amount the user drags.

UIGestureRecognizers make this much easier. Do a search in Xcode on "touches" and download the sample app with that name. That will get you 2 projects, one that does it the old way, with touchesBegan/touchesMoved, and the other that uses gesture recognizers. Take a look at the gesture recognizer one.

Duncan C · January 2012

Scruffy;402043 said:
Hi Duncan,
Regarding the Touches app that you recommended, i have found some of the things i need in an app, using UIGestureRecognizers, but i cannot set Touches into landscape mode. I can make it turn to the right, but the images move 90 degrees as well. I have spent some days on this, exploring lots of image movement apps trying to find one that does all the things i need it to do and i have found all the elements i need, but not all in the one app. Anyway, thanks for your help.

Dragging with gesture recognizers has very little to do with auto-rotation. Auto-rotation is a separate issue. If you find one example of how to do it, it's a simple matter to adapt the technique to most applications.

You're unlikely to find a single sample app that does exactly what you want. You need to be able to use samples to learn new techniques, and then adapt and synthesize those techniques into new applications.

Scruffy · January 2012

I know that the following code normally allows for auto-rotation but i just wonder why it doesn't work on the Touches app.

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (YES);
}

Duncan C;402071 said:
Dragging with gesture recognizers has very little to do with auto-rotation. Auto-rotation is a separate issue. If you find one example of how to do it, it's a simple matter to adapt the technique to most applications.

You're unlikely to find a single sample app that does exactly what you want. You need to be able to use samples to learn new techniques, and then adapt and synthesize those techniques into new applications.

Duncan C · January 2012

Scruffy;402082 said:
I know that the following code normally allows for auto-rotation but i just wonder why it doesn't work on the Touches app.

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (YES);
}

Touches is a dirt-simple application. It doesn't even have a view controller. (I'm a little surprised the system doesn't complain about that. Newer OS versions expect your app to create a view controller on launch.)

The method shouldAutorotateToInterfaceOrientation is a view controller method.

If you create an app with a view controller, and add your shouldAutorotateToInterfaceOrientation method above, then it should allow the UI to rotate to all user interface orientations. You then need set up the "struts and springs" (resize controls) in your views so that they resize as the window size changes. For most apps, that's all there is to it.

Scruffy · January 2012

Finally got it, thanks to a lot of help and a tutorial. Added Pan Gesture Recognizers from the objects library to the image containers on the storyboard, added some code and hooked it up and it works!

The code looks like this:

In ViewController.h ---->

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer;

In ViewController.m ---->

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {

CGPoint translation = [recognizer translationInView:self.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
recognizer.view.center.y + translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.view];

}

Then you select the UIPanGestureRecongizer in Interface Builder, bring up the Connections inspector, and drag a line from the selector to the View Controller, and choose handlePan and thats it.
Now everything works smoothly, and it rotates too ;)

Thanks again
Scruffy

Duncan C;402087 said:
Touches is a dirt-simple application. It doesn't even have a view controller. (I'm a little surprised the system doesn't complain about that. Newer OS versions expect your app to create a view controller on launch.)

The method shouldAutorotateToInterfaceOrientation is a view controller method.

If you create an app with a view controller, and add your shouldAutorotateToInterfaceOrientation method above, then it should allow the UI to rotate to all user interface orientations. You then need set up the "struts and springs" (resize controls) in your views so that they resize as the window size changes. For most apps, that's all there is to it.

kmt · April 2012

Hi Scuffy/Duncan,

So, I am using this same code but, getting some very odd reactions. When I pan up down, the view moves left and right. When I pan left/right, the view moves up and down. If I change the code (flip the x and y's) to below, it at least works up down but, then the pan left move it right and the pan right moves it left.

I am dropping the action on the 'whole' view. IE: not just an image view but attaching it to the main view by highlighting the outside of the outline in the .xib file.

Anyone encounter anything strange like this? Happens on both the simulator and the iPad.

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
CGPoint translation = [recognizer translationInView:recognizer.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.y, recognizer.view.center.y + translation.x);
[recognizer setTranslation:CGPointMake(0, 0) inView:recognizer.view];
}

Scruffy;402372 said:
Finally got it, thanks to a lot of help and a tutorial. Added Pan Gesture Recognizers from the objects library to the image containers on the storyboard, added some code and hooked it up and it works!

The code looks like this:

In ViewController.h ---->

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer;

In ViewController.m ---->

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {

CGPoint translation = [recognizer translationInView:self.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
recognizer.view.center.y + translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.view];

}

Then you select the UIPanGestureRecongizer in Interface Builder, bring up the Connections inspector, and drag a line from the selector to the View Controller, and choose handlePan and thats it.
Now everything works smoothly, and it rotates too ;)

Thanks again
Scruffy

Howdy, Stranger!

Forums

Reset Button for draggable images

Replies