Add a Wiggle
This will be a continuation of Multiple Objects and UITouch
If you do a long touch in the main section of the iPhone on a icon you will notice the icons will wiggle. This shows the user they can be deleted or moved around. So lets try to mimic that as best we can and when we stop a drag of our image it will wiggle for two seconds.
The first thing we need to do is import a framework to our project. So right click on the Frameworks tab. Then click on Add Framework. Then click QuartzCore FramwWork.
So first open up touchViewController.h and we need to add in two function
-(void)doWiggle:(UIView *)touchView; -(void)endWiggle:(NSTimer*)timer;
Now open up touchViewController.m and we need to add in two functions
-(void)doWiggle:(UIView *)touchView {
// grabbing the layer of the tocuhed view.
CALayer *touchedLayer = [touchView layer];
// here is an example wiggle
CABasicAnimation *wiggle = [CABasicAnimation animationWithKeyPath:@"transform"];
wiggle.duration = 0.1;
wiggle.repeatCount = 1e100f;
wiggle.autoreverses = YES;
wiggle.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(touchedLayer.transform,0.1, 0.0 ,1.0 ,2.0)];
// doing the wiggle
[touchedLayer addAnimation:wiggle forKey:@"wiggle"];
// setting a timer to remove the layer
NSTimer *wiggleTimer = [NSTimer scheduledTimerWithTimeInterval:(2) target:self selector:@selector(endWiggle:) userInfo:touchedLayer repeats:NO];
}
-(void)endWiggle:(NSTimer*)timer {
// stopping the wiggle now
[((CALayer*)timer.userInfo) removeAllAnimations];
}
Now that we have two functions. We need add the touchesEnded method that gets called when you lift your finger off the screen.
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [[event allTouches] anyObject];
if ([touch view] == image) {
[self doWiggle:[touch view]];
}
else if ([touch view] == image2) {
[self doWiggle:[touch view]];
}
}
Now your image will wiggle when you end your drag.
You can grab the source code here.
Multiple Objects and UITouch
Here is a bit of a continuation of Working with UITouch
Please follow that tutorial first. We will be using the source code from that as our starting point. So once you have the source code in Xcode open up touchViewController.h and we need to add in one new outlet for our second image.
So we want the file to look like this. I have commented the line I have added in.
#import <UIKit/UIKit.h>
@interface touchViewController : UIViewController {
IBOutlet UIImageView *image;
IBOutlet UIImageView *image2; // added this
}
@end
Now we need to open up IB and create the new object and make the connection. Double click on touchViewController.xib. So my view now looks like this
My connections now look like this
Also we need to set something for the views in order for a click and drag to work on them. We need to make sure user interaction is enabled on the two UIImageViews we have in our main view. So the property for one looks like the following. Make sure you set this for both image views
Now you can save your view in IB and load up touchViewController.m. In our previous example we had the following method.
-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
// get touch event
UITouch *touch = [[event allTouches] anyObject];
// get the touch location
CGPoint touchLocation = [touch locationInView:touch.view];
// move the image view
image.center = touchLocation;
}
You can now either comment out that function or delete it. We don’t want to use it anymore. Instead add in the following method.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
// get touch event
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.view];
if ([touch view] == image) {
// move the image view
image.center = touchLocation;
}
else if ([touch view] == image2) {
// move the image view
image2.center = touchLocation;
}
}
That function will now allow you to click on a imageview and hold the click and drag the image around the screen.
As always you can grab the source code here.
Working with UITouch
So here is a quick post on how to work with a UITouch. This tutorial will put a UIImageView on a view and then when you touch around the image view will be placed where you touch.
So lets start out by creating a new project and and use a View Based application as shown below.
Now I called the project touch.
So lets create an outlet for the image view we will create. So open up touchViewController.h. Add your outlet.
IBOutlet UIImageView *image;
Now take a image and drag it into your project. For this I will use the following image.
Now double click on touchViewController.xib and it will load IB. Take a UIImageView and drag it on the view. You also want to set the image to the image you dragged to your project. Your view should now look something like this
Now create the link from the outlet you created to the view so it looks like this in the File’s Owner.
Now save the file and quit. If you clicked build and go now we will just see a box on the screen and it does nothing. So we need to add in a function to handle the touch.
So open up touchViewController.m and add in the following code.
-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
// get touch event
UITouch *touch = [[event allTouches] anyObject];
// get the touch location
CGPoint touchLocation = [touch locationInView:touch.view];
// move the image view
image.center = touchLocation;
}So pretty much we are grabbing a touch even on any object it may touch. Then we are getting the location of the touch. We will then take that and move the image.
The thing that sent me for a loop is the locationInView accepts a UIView so I was wondering why self.view didn’t work. I still have no clue but touch includes the view that was touched and that seems to work nicely.
The Apple code works off sub-classing your view which I have never done but this seems to work nicely.
As always here is the source code.